微信小程序 常見問題：

一：項目結構

微(wei)信小程(cheng)序項目結構主要有四個(ge)文件(jian)類型,如(ru)下

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

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

js 邏輯處理，網絡(luo)請求

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

注意：為了(le)方便開發(fa)者減少配置項，規定描述(shu)頁面的這四個文件必須具有相同的路徑與文件名(ming)。

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

app.json

必須要有這(zhe)個(ge)(ge)文件(jian)(jian)，如果沒有這(zhe)個(ge)(ge)文件(jian)(jian)，項目無法運行(xing)，因為(wei)微(wei)信框架把這(zhe)個(ge)(ge)作為(wei)配(pei)置文件(jian)(jian)入口，整個(ge)(ge)小程序的(de)全局配(pei)置。包括頁(ye)面注冊，網絡設置，以及小程序的(de)window背景(jing)色，配(pei)置導航條樣式，配(pei)置默認標題。

app.js
必須要有這個文件，沒有也是會報錯！但是這個文件創建一下就行 什么都不需要寫
以后我們可以在這個(ge)文件中監(jian)聽(ting)并處理小(xiao)程序的生命(ming)周期函數、聲明全局變(bian)量。

app.wxss
全局配(pei)置的樣式文件，項目(mu)非(fei)必須(xu)。

知道小(xiao)程(cheng)序基本文件結構，就可以(yi)(yi)開始(shi)研究官方demo了(le)，研究過程(cheng)中如果(guo)有(you)不明白的地(di)方可以(yi)(yi)去(qu)官方文檔(dang)尋(xun)求答案，如果(guo)找不到答案或者有(you)疑問(wen)，可再此博客留言，相互(hu)交流。下(xia)面介紹下(xia)出現概率較高的幾個問(wen)題。

二：常見問題

rpx（responsive pixel）

微信(xin)小程序新定義了(le)一(yi)個尺寸單位(wei)，可以適配(pei)不同(tong)分辨率的(de)屏(ping)(ping)幕(mu)，它(ta)規定屏(ping)(ping)幕(mu)寬(kuan)為750rpx，如(ru)在 iPhone6 上，屏(ping)(ping)幕(mu)寬(kuan)度為375px，共有750個物(wu)(wu)理像素(su)，則750rpx = 375px = 750物(wu)(wu)理像素(su)，1rpx = 0.5px = 1物(wu)(wu)理像素(su)。

這個(ge)項目(mu)我用(yong)的(de)(de)都(dou)是rpx尺寸單位，期間遇到一個(ge)很奇葩的(de)(de)問題。在相(xiang)鄰的(de)(de)兩條(tiao)信息(xi)直接(jie)都(dou)會有(you)一個(ge)分割線(xian)，我將線(xian)的(de)(de)高度都(dou)設置成1rpx,但是不有(you)個(ge)別(bie)分割線(xian)是不顯示的(de)(de)，如下(xia)圖

看到沒在第一條和第二條直接并沒有現(xian)實這(zhe)條線，但是其他的都展示了，分割線的屬性(xing)是一樣(yang)的，而(er)且(qie)在不同的手機上（分辨率(lv)不同）不顯示的分割線也是不同的，有的分辨率(lv)好幾(ji)條分割線都不顯示，不知道(dao)這(zhe)是模擬器的bug還是rpx的bug。最后分割線的高度尺寸單位使(shi)用了px,解決(jue)了這(zhe)個問題。

40013錯誤

在微(wei)信小(xiao)程(cheng)序剛出(chu)來的(de)時候如果輸入AppID提示這(zhe)個信息就(jiu)表示沒有破解，但是(shi)現在官(guan)方(fang)軟件更新可(ke)以選(xuan)擇無AppID開發，如下圖，我們之間(jian)選(xuan)擇無AppID，即可(ke)解決此錯誤。建議安(an)裝官(guan)方(fang)開發工(gong)具。可(ke)去此處(chu)找下載鏈(lian)接。

4058錯誤

微信小程序(xu)創(chuang)建(jian)項(xiang)(xiang)目(mu)時選擇無AppID，創(chuang)建(jian)項(xiang)(xiang)目(mu)時會生成app.json，app.josn是(shi)程序(xu)啟動最重(zhong)要的(de)文件(jian)，程序(xu)的(de)頁面(mian)注冊，窗口設(she)置(zhi)，tab設(she)置(zhi)及網絡(luo)請求時間設(she)置(zhi)都是(shi)在此文件(jian)下的(de)。如果你創(chuang)建(jian)的(de)項(xiang)(xiang)目(mu)目(mu)錄下沒有app.json文件(jian)就會報(bao)下面(mian)的(de)錯(cuo)誤。

我們看到上面的錯誤信息中有個數字-4058，這應該是初入微信小程序遇到最多的錯誤了，這種一般都是文件缺失，后面有個path，可以對著該路徑看看是否存在這個文件。造成這種錯誤的原因一般都是創建項目選擇的目錄不正確，或者在app.json注冊了一個不存在的頁面。
當(dang)然(ran)還有(you)一種情況就是(shi)在app.json文(wen)件的pages注冊的頁(ye)面是(shi)沒有(you)創建的，或(huo)者你刪除了(le)某(mou)個頁(ye)面，但(dan)是(shi)沒有(you)取消注冊也會(hui)是(shi)-4058錯誤。

Page注冊錯誤

這個錯(cuo)誤(wu)可能很容易理(li)解，頁(ye)(ye)(ye)面(mian)注冊錯(cuo)誤(wu)。頁(ye)(ye)(ye)面(mian)是通過Page對(dui)象來渲染的(de)，每個頁(ye)(ye)(ye)面(mian)對(dui)應的(de)js文(wen)件(jian)必須要創(chuang)建page，最簡單(dan)的(de)方式(shi)就是在(zai)(zai)js文(wen)件(jian)下(xia)寫入Page({})，在(zai)(zai)page中(zhong)有(you)管理(li)頁(ye)(ye)(ye)面(mian)渲染的(de)生命周(zhou)期，以(yi)及數據處理(li)，事(shi)件(jian)都在(zai)(zai)這完(wan)成。這個錯(cuo)誤(wu)引起的(de)原(yuan)因一般都是剛創(chuang)建頁(ye)(ye)(ye)面(mian)，js文(wen)件(jian)還有(you)有(you)處理(li)或者(zhe)忘了處理(li)。所以(yi)要養成創(chuang)建頁(ye)(ye)(ye)面(mian)的(de)同時在(zai)(zai)js文(wen)件(jian)先創(chuang)建Page的(de)習慣.

Page route錯誤

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

如下代碼：
wxml文件：

js文件事件處理函數：
bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
}
如果你(ni)這(zhe)(zhe)樣寫的(de)話，恭喜(xi)你(ni)，你(ni)就會看到(dao)上面(mian)提示的(de)錯誤，這(zhe)(zhe)是因為重復調用(yong)路由引起的(de)，處理方法(fa)就是刪(shan)除一個路由，刪(shan)除

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

這(zhe)種(zhong)也(ye)是(shi)不允許的，也(ye)就(jiu)是(shi)說

Do not have * handler in current page.

大概意思(si)就是當前(qian)頁面沒有(you)(you)此(ci)處(chu)(chu)(chu)理，讓確定(ding)(ding)是否已經(jing)定(ding)(ding)義，還指出(chu)了(le)錯誤(wu)出(chu)現(xian)的可能位置(zhi)pages/message/message,其實這(zhe)種(zhong)問題出(chu)現(xian)一(yi)(yi)般就是我們在wxml定(ding)(ding)義了(le)一(yi)(yi)些(xie)處(chu)(chu)(chu)理事(shi)件(jian)，但是在js文件(jian)中沒有(you)(you)實現(xian)這(zhe)個時(shi)事(shi)件(jian)的處(chu)(chu)(chu)理方(fang)法(fa)，就會出(chu)現(xian)這(zhe)個錯誤(wu)。那么我們按提(ti)示在js文件(jian)加上事(shi)件(jian)處(chu)(chu)(chu)理，如下代碼，加上后就不(bu)會再有(you)(you)此(ci)錯誤(wu)提(ti)示。

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

tabBar設置不顯示

對于tabBar不顯示，原因有很多，查找這個錯誤直接去app.json這個文件，最常見的也是剛學習微信小程序最容易犯的錯誤無外乎下面幾種
 注冊(ce)頁面(mian)即將頁面(mian)寫到(dao)app.json的(de)pages字段中，如

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

tabBar寫法錯誤導致的不顯示，將其中的大寫字母B寫成小寫，導致tabBar不顯示。
tabBar的list中沒有寫pagePath字段，或者pagePath中的頁面沒有注冊
tabBar的list的pagePath指定的頁面沒有寫在注冊頁面第一個。微信小程序的邏輯是"pages"中的第一個頁面是首頁，也就是程序啟動后第一個顯示的頁面，如果tabBar的list的pagePath指定的頁面都不是pages的第一個，當然也就不會電視tabBar了。
tabBar的數量低(di)于(yu)兩(liang)項(xiang)或者高于(yu)五(wu)項(xiang)，微信(xin)官方中(zhong)明確規定(ding)tabBar的至少兩(liang)項(xiang)最多五(wu)項(xiang)。超過或者少于(yu)都(dou)不會顯示tabBar。

navigationBarTitle顯示問題

通過這個動態圖你應該發現問題了，當點擊音樂進入音樂界面時，title先顯示了WeChatForQQ然后顯示的音樂，這個體驗肯定是難以接受的，原因是音樂界面的title是在js文件中page的生命周期方法中設置的。
若你不了解生命周期，可以點擊查看
Page({
data:{
// text:"這是一個頁面"
},
onLoad:function(options){
// 頁(ye)面初始化 options為頁(ye)面跳轉所帶來的參數

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

通過注釋你應該明白了，設置標題寫在了onReady方法中，也就是頁面已經渲染完成了，在onReady之前顯示的title就是json文件（覆蓋關系，如果在子頁面json文件設置title會覆蓋app.json全局設置）中的title。可能你會說將wx.setNavigationBarTitle寫在onLoad函數中，不過如果這樣設置是不對的，因為onLoad執行過后才渲染頁面，在渲染頁面時title會從json文件中讀取，導致onLoad設置的title會只在頁面渲染之前展示，之后就顯示json文件的tile，所以現在你應該明白ttle設置最優的地方就是給子文件寫一個json文件，在文件中寫入，如果想改變顏色直接在文件中添加就可以，該文件所寫的屬性值會覆蓋app.json中設置的值。
{
"navigationBarTitleText": "賬戶"
}

wx.navigateTo無法打開頁面

一個(ge)應用(yong)同(tong)時只能打(da)(da)開5個(ge)頁(ye)(ye)面，當已經打(da)(da)開了(le)5個(ge)頁(ye)(ye)面之后，wx.navigateTo不能正(zheng)常打(da)(da)開新頁(ye)(ye)面。請避免多(duo)層級的(de)交互方(fang)式(shi)，或者使用(yong)wx.redirectTo

本地資源無法通過 css 獲取

 background-image：可以使用網絡圖片，或(huo)者 base64，或(huo)者使用標(biao)簽

頁面間數據傳遞

 微信小程(cheng)序路(lu)由(you)（頁(ye)面跳轉(zhuan)）是通過API wx.navigateTo或者wxml中(zhong)

 <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>

而數(shu)(shu)(shu)據接(jie)(jie)收是(shi)(shi)在(zai)js文(wen)件的page里接(jie)(jie)收的，page生(sheng)命周期(qi)有一(yi)個onLoad函(han)數(shu)(shu)(shu)，它就是(shi)(shi)做一(yi)些(xie)初始(shi)化數(shu)(shu)(shu)據的工作，onLoad函(han)數(shu)(shu)(shu)有一(yi)個參數(shu)(shu)(shu)options，我們(men)就可(ke)以通過key將數(shu)(shu)(shu)據獲取，如下

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

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