因為自己對小程序也是很有興趣的，感覺是很有意思的一個東西，所以以QQ練手，做一個高仿QQ的微信小程序，由于本人是Android開發(fā)者，平時很少接觸前端的一些東西，水平有限，所以代碼很多地方是不規(guī)范的，做的過程也就是一個學習的過程，一個提高的過程。
這篇文章主要寫我在SmallAppForQQ這個項目進展的過程中遇到的一些問題。如果閱讀此文的你有一定幫助，很是欣慰，歡迎star項目。
文章開頭，先簡單介紹下項目結構，若沒有安裝開發(fā)工具，可去GitHub:https://github.com/xiehui999/SmallAppForQQ下載。微信小程序項目結構主要有四個文件類型,如下
WXML（WeiXin Markup Language）是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。內部主要是微信自己定義的一套組件。
WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式，
js 邏輯處理，網絡請求
json 小程序設置，如頁面注冊，頁面標題及tabBar。
注意：為了方便開發(fā)者減少配置項，規(guī)定描述頁面的這四個文件必須具有相同的路徑與文件名。
在根目錄下用app來命名的這四中類型的文件，就是程序入口文件。
app.js
必須要有這個文件，沒有也是會報錯！但是這個文件創(chuàng)建一下就行 什么都不需要寫
以后我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數、聲明全局變量。
app.wxss
全局配置的樣式文件，項目非必須。
知道小程序基本文件結構，就可以開始研究官方demo了，研究過程中如果有不明白的地方可以去官方文檔尋求答案，如果找不到答案或者有疑問，可再此博客留言，相互交流。下面介紹下出現概率較高的幾個問題。
微信小程序新定義了一個尺寸單位，可以適配不同分辨率的屏幕，它規(guī)定屏幕寬為750rpx，如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
這個項目我用的都是rpx尺寸單位，期間遇到一個很奇葩的問題。在相鄰的兩條信息直接都會有一個分割線，我將線的高度都設置成1rpx,但是不有個別分割線是不顯示的，如下圖
看到沒在第一條和第二條直接并沒有現實這條線，但是其他的都展示了，分割線的屬性是一樣的，而且在不同的手機上（分辨率不同）不顯示的分割線也是不同的，有的分辨率好幾條分割線都不顯示，不知道這是模擬器的bug還是rpx的bug。最后分割線的高度尺寸單位使用了px,解決了這個問題。
在微信小程序剛出來的時候如果輸入AppID提示這個信息就表示沒有破解，但是現在官方軟件更新可以選擇無AppID開發(fā)，如下圖，我們之間選擇無AppID，即可解決此錯誤。建議安裝官方開發(fā)工具。可去此處找下載鏈接。
微信小程序創(chuàng)建項目時選擇無AppID，創(chuàng)建項目時會生成app.json，app.josn是程序啟動最重要的文件，程序的頁面注冊，窗口設置，tab設置及網絡請求時間設置都是在此文件下的。如果你創(chuàng)建的項目目錄下沒有app.json文件就會報下面的錯誤。
我們看到上面的錯誤信息中有個數字-4058，這應該是初入微信小程序遇到最多的錯誤了，這種一般都是文件缺失，后面有個path，可以對著該路徑看看是否存在這個文件。造成這種錯誤的原因一般都是創(chuàng)建項目選擇的目錄不正確，或者在app.json注冊了一個不存在的頁面。
當然還有一種情況就是在app.json文件的pages注冊的頁面是沒有創(chuàng)建的，或者你刪除了某個頁面，但是沒有取消注冊也會是-4058錯誤。
這個錯誤可能很容易理解，頁面注冊錯誤。頁面是通過Page對象來渲染的，每個頁面對應的js文件必須要創(chuàng)建page，最簡單的方式就是在js文件下寫入Page({})，在page中有管理頁面渲染的生命周期，以及數據處理，事件都在這完成。這個錯誤引起的原因一般都是剛創(chuàng)建頁面，js文件還有有處理或者忘了處理。所以要養(yǎng)成創(chuàng)建頁面的同時在js文件先創(chuàng)建Page的習慣.
字面意思就是頁面路由錯誤，在微信中有兩種路由方式一種是在wxml文件使用<navigator />組件，一種是調用wx.navigateTo。
如下代碼：
wxml文件：
網站首頁
TEL：021-61554458<navigator url="search/search"> <view class="serach_view_show" bindtap="bindtap"> 搜索</view> </navigator>js文件事件處理函數：
bindtap:function(event){ wx.navigateTo({ url: "search/search" }) }如果你這樣寫的話，恭喜你，你就會看到上面提示的錯誤，這是因為重復調用路由引起的，處理方法就是刪除一個路由，刪除<navigator />組件或者刪除wx.navigateTo。除了上面說的可能導致路由錯誤外，還有一種情況，類似于下面的代碼
<navigator url="search/search"> <navigator url="search/search"> <view class="serach_view_show" bindtap="bindtap"> 搜索</view> </navigator> </navigator>這種也是不允許的，也就是說<navigator/>組件內部不能再嵌套<navigator/>組件。它只能是單層存在的。
大概意思就是當前頁面沒有此處理，讓確定是否已經定義，還指出了錯誤出現的可能位置pages/message/message,其實這種問題出現一般就是我們在wxml定義了一些處理事件，但是在js文件中沒有實現這個時事件的處理方法，就會出現這個錯誤。那么我們按提示在js文件加上事件處理，如下代碼，加上后就不會再有此錯誤提示。
bindtap:function(event){ wx.navigateTo({ url: "search/search" }) },對于tabBar不顯示，原因有很多，查找這個錯誤直接去app.json這個文件，最常見的也是剛學習微信小程序最容易犯的錯誤無外乎下面幾種
注冊頁面即將頁面寫到app.json的pages字段中，如
"pages":[ "pages/message/message", "pages/contact/contact", "pages/dynamic/dynamic", "pages/dynamic/music/music", "pages/index/index", "pages/logs/logs" ]tabBar寫法錯誤導致的不顯示，將其中的大寫字母B寫成小寫，導致tabBar不顯示。
tabBar的list中沒有寫pagePath字段，或者pagePath中的頁面沒有注冊
tabBar的list的pagePath指定的頁面沒有寫在注冊頁面第一個。微信小程序的邏輯是"pages"中的第一個頁面是首頁，也就是程序啟動后第一個顯示的頁面，如果tabBar的list的pagePath指定的頁面都不是pages的第一個，當然也就不會電視tabBar了。
tabBar的數量低于兩項或者高于五項，微信官方中明確規(guī)定tabBar的至少兩項最多五項。超過或者少于都不會顯示tabBar。
通過這個動態(tài)圖你應該發(fā)現問題了，當點擊音樂進入音樂界面時，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執(zhí)行過后才渲染頁面，在渲染頁面時title會從json文件中讀取，導致onLoad設置的title會只在頁面渲染之前展示，之后就顯示json文件的tile，所以現在你應該明白ttle設置最優(yōu)的地方就是給子文件寫一個json文件，在文件中寫入，如果想改變顏色直接在文件中添加就可以，該文件所寫的屬性值會覆蓋app.json中設置的值。
{ "navigationBarTitleText": "音樂" }一個應用同時只能打開5個頁面，當已經打開了5個頁面之后，wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式，或者使用wx.redirectTo
background-image：可以使用網絡圖片，或者 base64，或者使用<image/>標簽
微信小程序路由（頁面跳轉）是通過API wx.navigateTo或者wxml中<navigator/>組件實現的，不管哪種實現都會有一個重要的參數就是url，它指定了要跳轉的頁面，并且頁面之間數據傳遞也是通過url來實現的，這個數據傳遞有點類似于我們使用的get網絡請求，把參數都拼接在要跳轉界面地址的后面并以“？”連接。然后將要傳入的數據以鍵和值的形式追加在"?"后面，多個參數直接用"&"符合。如我們點擊消息聊天記錄，將列表上的數據傳到下一個頁面，可以這樣寫。
<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" }) }, })這樣就實現了頁面間數據傳遞功能。
好了，今天就寫到這了后期若遇到微信小程序其它一些問題，我會追加到此文，若你在開發(fā)過程中遇到比較坑的問題已經解決方案，可在本文評論，方便大家。謝謝支持。
