微信小程式開發常見問題分析

距離微信小程式內測版發布已經有十幾天的時間了，網路上對微信小程式的討論也異常火爆，從發佈到現在微信小程式一直佔領著各種技術論壇的頭條，當然各種平台也對微信小程式有新聞報道，畢竟騰訊在國內影響力還是很大的。我們都知道微信小程式第一天發佈內測版，並沒有公開官方開發文件和開發工具，但這阻止不了技術人的好奇心。

因為自己對小程式也是很有興趣的，感覺是很有意思的一個東西，所以立刻做了一下小demo，水平有限，所以做的過程也就是一個學習的過程，一個提高的過程。
這篇文章主要寫我在寫demo的過程中遇到的一些問題。如果閱讀此文的你有一定幫助，很是欣慰。

一：專案結構

微信小程式專案結構主要有四個檔案類型,如下

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

WXSS (WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的元件樣式，

js 邏輯處理，網路要求

json 小程式設定，如頁面註冊，頁面標題及tabBar。

注意：為了方便開發者減少設定項，規定描述頁面的這四個檔案必須具有相同的路徑與檔案名稱。

在根目錄下用app來命名的這四中類型的文件，就是程式入口文件。

app.json

必須要有這個文件，如果沒有這個文件，專案無法運行，因為微信框架把這個作為設定檔入口，整個小程式的全域設定。包括頁面註冊，網頁設置，以及小程式的window背景色，配置導航條樣式，配置預設標題。

app.js
必須要有這份文件，沒有也是會報錯！但是這個檔案建立一下就行 什麼都不需要寫
以後我們可以在這個檔案中監聽並處理小程式的生命週期函數、宣告全域變數。

app.wxss
全域配置的樣式文件，項目非必須。

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

二：常見問題

rpx（responsive pixel）

微信小程式新定義了一個尺寸單位，可以適配不同解析度的螢幕，它規定螢幕寬為750rpx，如在iPhone6 上，螢幕寬度為375px ，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

這個專案我用的都是rpx尺寸單位，期間遇到一個很奇葩的問題。在相鄰的兩個訊息直接都會有一個分割線，我將線的高度都設定成1rpx,但是不有個別分割線是不顯示的，如下圖

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

40013錯誤

在微信小程式剛出來的時候如果輸入AppID提示這個資訊就表示沒有破解，但是現在官方軟體更新可以選擇無AppID開發，如下圖，我們之間選擇無AppID，即可解決此錯誤。建議安裝官方開發工具。可去此處找下載連結。

4058錯誤

微信小程式建立專案時選擇無AppID，建立專案時會產生app.json，app.josn是程式啟動最重要的文件，程式的頁面註冊，視窗設置，tab設定及網路請求時間設定都是在此文件下的。如果你建立的專案目錄下沒有app.json檔案就會回報下面的錯誤。

我們看到上面的錯誤訊息中有個數字-4058，這應該是初入微信小程式遇到最多的錯誤了，這種一般都是文件缺失，後面有個path，可以對著該路徑看看是否存在這個檔案。造成這種錯誤的原因通常是建立專案選擇的目錄不正確，或是在app.json註冊了一個不存在的頁面。
當然還有一種情況就是在app.json檔案的pages註冊的頁面是沒有創建的，或者你刪除了某個頁面，但是沒有取消註冊也會是-4058錯誤。

Page註冊錯誤

這個錯誤可能很容易理解，頁面註冊錯誤。頁面是透過Page物件來渲染的，每個頁面對應的js檔案必須要建立page，最簡單的方式就是在js檔案下寫入Page({})，在page有管理頁面渲染的生命週期，以及資料處理，事件都在這裡完成。這個錯誤造成的原因一般都是剛創建頁面，js檔案還有有處理或忘了處理。所以要養成創建頁面的同時在js檔案先創建Page的習慣.

Page route錯誤

字面意思就是頁面路由錯誤，在微信中有兩種路由方式一種是在wxml檔案使用

如下程式碼：
wxml檔：

js檔案事件處理函數：
bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
}
如果你這樣寫的話，恭喜你，你會看到上面提示的錯誤，這是因為重複呼叫路由所造成的，處理方法就是刪除一個路由，刪除

 搜尋

這種也是不允許的，也就是說

Do not have * handler in current page.

大概意思就是當前頁面沒有此處理，讓確定是否已經定義，還指出了錯誤出現的可能位置pages/message/message,其實這種問題出現一般就是我們在wxml定義了一些處理事件，但是在js文件中沒有實作這個時事件的處理方法，就會出現這個錯誤。那我們按提示在js檔案加上事件處理，如下程式碼，加上後就不會再有此錯誤提示。

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

tabBar設定不顯示

對於tabBar不顯示，原因有很多，查找這個錯誤直接去app.json這個文件，最常見的也是剛學習微信小程式最容易犯的錯誤無外乎下面幾種
註冊頁面即將頁面寫到app.json的pages欄位中，如

 "pages":[    "pages/message/message",    "pages/contact/contact",nam     "pages/contact/contact",nam /music/music",    "pages/index/index",    "pages/logs/logs"
  ]

tabBar寫法錯誤所導致的不顯示，將其中的大寫字母寫成小寫，導致tab不顯示。
tabBar的list中沒有寫pagePath字段，或者pagePath中的頁面沒有註冊
tabBar的list的pagePath指定的頁面沒有寫在註冊頁面第一個。微信小程式的邏輯是"pages"中的第一個頁面是首頁，也就是程式啟動後第一個顯示的頁面，如果tabBar的list的pagePath指定的頁面都不是pages的第一個，當然也就不會電視tabBar了。
tabBar的數量低於兩項或高於五項，微信官方中明確規定tabBar的至少兩項最多五項。超過或少於都不會顯示tabBar。

navigationBarTitle顯示問題

透過這個動態圖你應該發現問題了，當點擊音樂進入音樂介面時，title先顯示了WeChatForQQ然後顯示的音樂，這個體驗肯定是難以接受的，原因是音樂介面的title是在js檔案中page的生命週期方法中設定的。
若不了解生命週期，可以點擊查看

 Page({
data:{
// text:"这是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
  },
  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无法打开页面

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo

本地资源无法通过 css 获取

background-image：可以使用网络图片，或者 base64，或者使用标签

页面间数据传递

微信小程序路由（页面跳转）是通过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生命周期有一个onLoad函数，它就是做一些初始化数据的工作，onLoad函数有一个参数options，我们就可以通过key将数据获取，如下

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(){    // 页面关闭
  },
  bindtap:function(event){
wx.navigateTo({
  url: "/pages/message/search/search"})
  },
})

这样就实现了页面间数据传递功能。
更多微信小程序开发常见问题分析相关文章请关注PHP中文网！