微信小程序常見(jiàn)問(wèn)題有哪些

這篇文章主要介紹了微信小程序常見(jiàn)問(wèn)題有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著(zhù)大家一起了解一下。

微信小程序 常見(jiàn)問(wèn)題：

一：項目結構

微信小程序項目結構主要有四個(gè)文件類(lèi)型,如下

WXML （WeiXin Markup Language）是框架設計的一套標簽語(yǔ)言，結合基礎組件、事件系統，可以構建出頁(yè)面的結構。內部主要是微信自己定義的一套組件。

WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式，

js 邏輯處理，網(wǎng)絡(luò )請求

json 小程序設置，如頁(yè)面注冊，頁(yè)面標題及tabBar。

注意：為了方便開(kāi)發(fā)者減少配置項，規定描述頁(yè)面的這四個(gè)文件必須具有相同的路徑與文件名。

在根目錄下用app來(lái)命名的這四中類(lèi)型的文件，就是程序入口文件。

app.json

必須要有這個(gè)文件，如果沒(méi)有這個(gè)文件，項目無(wú)法運行，因為微信框架把這個(gè)作為配置文件入口，整個(gè)小程序的全局配置。包括頁(yè)面注冊，網(wǎng)絡(luò )設置，以及小程序的window背景色，配置導航條樣式，配置默認標題。

app.js

必須要有這個(gè)文件，沒(méi)有也是會(huì )報錯！但是這個(gè)文件創(chuàng )建一下就行 什么都不需要寫(xiě)
以后我們可以在這個(gè)文件中監聽(tīng)并處理小程序的生命周期函數、聲明全局變量。

app.wxss

全局配置的樣式文件，項目非必須。

知道小程序基本文件結構，就可以開(kāi)始研究官方demo了，研究過(guò)程中如果有不明白的地方可以去官方文檔尋求答案，如果找不到答案或者有疑問(wèn)，可再此博客留言，相互交流。下面介紹下出現概率較高的幾個(gè)問(wèn)題。

二：常見(jiàn)問(wèn)題

rpx（responsive pixel）

微信小程序新定義了一個(gè)尺寸單位，可以適配不同分辨率的屏幕，它規定屏幕寬為750rpx，如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

這個(gè)項目我用的都是rpx尺寸單位，期間遇到一個(gè)很奇葩的問(wèn)題。在相鄰的兩條信息直接都會(huì )有一個(gè)分割線(xiàn)，我將線(xiàn)的高度都設置成1rpx,但是不有個(gè)別分割線(xiàn)是不顯示的

看到?jīng)]在第一條和第二條直接并沒(méi)有現實(shí)這條線(xiàn)，但是其他的都展示了，分割線(xiàn)的屬性是一樣的，而且在不同的手機上（分辨率不同）不顯示的分割線(xiàn)也是不同的，有的分辨率好幾條分割線(xiàn)都不顯示，不知道這是模擬器的bug還是rpx的bug。最后分割線(xiàn)的高度尺寸單位使用了px,解決了這個(gè)問(wèn)題。

40013錯誤

在微信小程序剛出來(lái)的時(shí)候如果輸入AppID提示這個(gè)信息就表示沒(méi)有破解，但是現在官方軟件更新可以選擇無(wú)AppID開(kāi)發(fā)，如下圖，我們之間選擇無(wú)AppID，即可解決此錯誤。建議安裝官方開(kāi)發(fā)工具?？扇ゴ颂幷蚁螺d鏈接。

4058錯誤

微信小程序創(chuàng )建項目時(shí)選擇無(wú)AppID，創(chuàng )建項目時(shí)會(huì )生成app.json，app.josn是程序啟動(dòng)最重要的文件，程序的頁(yè)面注冊，窗口設置，tab設置及網(wǎng)絡(luò )請求時(shí)間設置都是在此文件下的。如果你創(chuàng )建的項目目錄下沒(méi)有app.json文件就會(huì )報下面的錯誤。

我們看到上面的錯誤信息中有個(gè)數字-4058，這應該是初入微信小程序遇到最多的錯誤了，這種一般都是文件缺失，后面有個(gè)path，可以對著(zhù)該路徑看看是否存在這個(gè)文件。造成這種錯誤的原因一般都是創(chuàng )建項目選擇的目錄不正確，或者在app.json注冊了一個(gè)不存在的頁(yè)面。

當然還有一種情況就是在app.json文件的pages注冊的頁(yè)面是沒(méi)有創(chuàng )建的，或者你刪除了某個(gè)頁(yè)面，但是沒(méi)有取消注冊也會(huì )是-4058錯誤。

Page注冊錯誤

這個(gè)錯誤可能很容易理解，頁(yè)面注冊錯誤。頁(yè)面是通過(guò)Page對象來(lái)渲染的，每個(gè)頁(yè)面對應的js文件必須要創(chuàng )建page，最簡(jiǎn)單的方式就是在js文件下寫(xiě)入Page({})，在page中有管理頁(yè)面渲染的生命周期，以及數據處理，事件都在這完成。這個(gè)錯誤引起的原因一般都是剛創(chuàng )建頁(yè)面，js文件還有有處理或者忘了處理。所以要養成創(chuàng )建頁(yè)面的同時(shí)在js文件先創(chuàng )建Page的習慣.

Page route錯誤

字面意思就是頁(yè)面路由錯誤，在微信中有兩種路由方式一種是在wxml文件使用

如下代碼：

wxml文件：

js文件事件處理函數：

bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
}

如果你這樣寫(xiě)的話(huà)，恭喜你，你就會(huì )看到上面提示的錯誤，這是因為重復調用路由引起的，處理方法就是刪除一個(gè)路由，刪除

<navigator url="search/search">
<navigator url="search/search">
<view class="serach_view_show" bindtap="bindtap"> 搜索</view>
</navigator>
</navigator>

這種也是不允許的，也就是說(shuō)

Do not have * handler in current page.

大概意思就是當前頁(yè)面沒(méi)有此處理，讓確定是否已經(jīng)定義，還指出了錯誤出現的可能位置pages/message/message,其實(shí)這種問(wèn)題出現一般就是我們在wxml定義了一些處理事件，但是在js文件中沒(méi)有實(shí)現這個(gè)時(shí)事件的處理方法，就會(huì )出現這個(gè)錯誤。那么我們按提示在js文件加上事件處理，如下代碼，加上后就不會(huì )再有此錯誤提示。

 bind:function(event){
  wx.navigateTo({
   url: "
pages/logs/logs
"
  })
 },

tabBar設置不顯示

對于tabBar不顯示，原因有很多，查找這個(gè)錯誤直接去app.json這個(gè)文件，最常見(jiàn)的也是剛學(xué)習微信小程序最容易犯的錯誤無(wú)外乎下面幾種

注冊頁(yè)面即將頁(yè)面寫(xiě)到app.json的pages字段中，如

"pages":[
  "pages/index/index",
  "pages/logs/logs",
  "pages/account/account",
  "pages/more/more"
 ],

tabBar寫(xiě)法錯誤導致的不顯示，將其中的大寫(xiě)字母B寫(xiě)成小寫(xiě)，導致tabBar不顯示。

tabBar的list中沒(méi)有寫(xiě)pagePath字段，或者pagePath中的頁(yè)面沒(méi)有注冊

tabBar的list的pagePath指定的頁(yè)面沒(méi)有寫(xiě)在注冊頁(yè)面第一個(gè)。微信小程序的邏輯是"pages"中的第一個(gè)頁(yè)面是首頁(yè)，也就是程序啟動(dòng)后第一個(gè)顯示的頁(yè)面，如果tabBar的list的pagePath指定的頁(yè)面都不是pages的第一個(gè)，當然也就不會(huì )電視tabBar了。
tabBar的數量低于兩項或者高于五項，微信官方中明確規定tabBar的至少兩項最多五項。超過(guò)或者少于都不會(huì )顯示tabBar。

navigationBarTitle顯示問(wèn)題

通過(guò)這個(gè)動(dòng)態(tài)圖你應該發(fā)現問(wèn)題了，當點(diǎn)擊音樂(lè )進(jìn)入音樂(lè )界面時(shí)，title先顯示了WeChatForQQ然后顯示的音樂(lè )，這個(gè)體驗肯定是難以接受的，原因是音樂(lè )界面的title是在js文件中page的生命周期方法中設置的。
若你不了解生命周期，可以點(diǎn)擊查看

Page({
data:{
// text:"這是一個(gè)頁(yè)面"
},
onLoad:function(options){
// 頁(yè)面初始化 options為頁(yè)面跳轉所帶來(lái)的參數

 },
 onReady:function(){
  // 頁(yè)面渲染完成
  //NavigationBarTitle如果此處和json文件都設置，最后展示此處的標題欄
wx.setNavigationBarTitle({
 title: '賬戶(hù)'
})
 },
 onShow:function(){
  // 頁(yè)面顯示
 },
 onHide:function(){
  // 頁(yè)面隱藏
 },
 onUnload:function(){
  // 頁(yè)面關(guān)閉
 }
})

通過(guò)注釋你應該明白了，設置標題寫(xiě)在了onReady方法中，也就是頁(yè)面已經(jīng)渲染完成了，在onReady之前顯示的title就是json文件（覆蓋關(guān)系，如果在子頁(yè)面json文件設置title會(huì )覆蓋app.json全局設置）中的title?？赡苣銜?huì )說(shuō)將wx.setNavigationBarTitle寫(xiě)在onLoad函數中，不過(guò)如果這樣設置是不對的，因為onLoad執行過(guò)后才渲染頁(yè)面，在渲染頁(yè)面時(shí)title會(huì )從json文件中讀取，導致onLoad設置的title會(huì )只在頁(yè)面渲染之前展示，之后就顯示json文件的tile，所以現在你應該明白ttle設置最優(yōu)的地方就是給子文件寫(xiě)一個(gè)json文件，在文件中寫(xiě)入，如果想改變顏色直接在文件中添加就可以，該文件所寫(xiě)的屬性值會(huì )覆蓋app.json中設置的值。

{
"navigationBarTitleText": "賬戶(hù)"
}

wx.navigateTo無(wú)法打開(kāi)頁(yè)面

一個(gè)應用同時(shí)只能打開(kāi)5個(gè)頁(yè)面，當已經(jīng)打開(kāi)了5個(gè)頁(yè)面之后，wx.navigateTo不能正常打開(kāi)新頁(yè)面。請避免多層級的交互方式，或者使用wx.redirectTo

本地資源無(wú)法通過(guò) css 獲取

background-image：可以使用網(wǎng)絡(luò )圖片，或者 base64，或者使用標簽

頁(yè)面間數據傳遞

微信小程序路由（頁(yè)面跳轉）是通過(guò)API wx.navigateTo或者wxml中

 <navigator url="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">
     <view class="item" >
       <view class="item-left">
         <image src="{{item.url}}" class="image"/>
       </view>
       <view class="item-middle">
         <view>
            <text class="title">{{item.title}}</text>
         </view>
         <view>
           <text class="message">{{item.message}}</text>
         </view>
      </view>
      <view class="item_right">
        <view><text class="time">{{item.time}}</text></view>
        <view class="mark" wx:if="{{item.count>0}}"><text class="text">{{item.count}}</text></view>
      </view>
     </view>
     <view class="line"></view>
    </navigator>

而數據接收是在js文件的page里接收的，page生命周期有一個(gè)onLoad函數，它就是做一些初始化數據的工作，onLoad函數有一個(gè)參數options，我們就可以通過(guò)key將數據獲取，如下

Page({
 data:{
  // text:"這是一個(gè)頁(yè)面"
  isHiddenToast:true
 }
 onLoad:function(options){
  // 頁(yè)面初始化 options為頁(yè)面跳轉所帶來(lái)的參數
  console.log(options.title)
   console.log(options.message)

 },
 onReady:function(){
  // 頁(yè)面渲染完成
 },
 onShow:function(){
  // 頁(yè)面顯示
 },
 onHide:function(){
  // 頁(yè)面隱藏
 },
 onUnload:function(){
  // 頁(yè)面關(guān)閉
 },
 bind:function(event){
wx.navigateTo({
 url: "
pages/logs/logs
"
})
 },
})