Code4Android：微信小程序體驗(yàn)歷程：我遇到的問題及解決方法

時(shí)間：2020-07-15 10:36:28

因?yàn)樽约簩?duì)小程序也是很有興趣的，感覺是很有意思的一個(gè)東西，所以以QQ練手，做一個(gè)高仿QQ的微信小程序，由于本人是Android開發(fā)者，平時(shí)很少接觸前端的一些東西，水平有限，所以代碼很多地方是不規(guī)范的，做的過程也就是一個(gè)學(xué)習(xí)的過程，一個(gè)提高的過程。

這篇文章主要寫我在SmallAppForQQ這個(gè)項(xiàng)目進(jìn)展的過程中遇到的一些問題。如果閱讀此文的你有一定幫助，很是欣慰，歡迎star項(xiàng)目。

SmallAppForQQ源碼

開發(fā)工具

官方demo

項(xiàng)目結(jié)構(gòu)

文章開頭，先簡(jiǎn)單介紹下項(xiàng)目結(jié)構(gòu)，若沒有安裝開發(fā)工具，可去GitHub:https://github.com/xiehui999/SmallAppForQQ下載。微信小程序項(xiàng)目結(jié)構(gòu)主要有四個(gè)文件類型,如下

WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。內(nèi)部主要是微信自己定義的一套組件。
WXSS(WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式，
js 邏輯處理，網(wǎng)絡(luò)請(qǐng)求
json 小程序設(shè)置，如頁(yè)面注冊(cè)，頁(yè)面標(biāo)題及tabBar。

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

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

app.json
必須要有這個(gè)文件，如果沒有這個(gè)文件，項(xiàng)目無法運(yùn)行，因?yàn)槲⑿趴蚣馨堰@個(gè)作為配置文件入口，整個(gè)小程序的全局配置。包括頁(yè)面注冊(cè)，網(wǎng)絡(luò)設(shè)置，以及小程序的window背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。
app.js
必須要有這個(gè)文件，沒有也是會(huì)報(bào)錯(cuò)！但是這個(gè)文件創(chuàng)建一下就行什么都不需要寫
以后我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。
app.wxss
全局配置的樣式文件，項(xiàng)目非必須。

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

常見問題

rpx（responsive pixel）

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

這里寫圖片描述

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

這里寫圖片描述

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

40013錯(cuò)誤

這里寫圖片描述

在微信小程序剛出來的時(shí)候如果輸入AppID提示這個(gè)信息就表示沒有破解，但是現(xiàn)在官方軟件更新可以選擇無AppID開發(fā)，如下圖，我們之間選擇無AppID，即可解決此錯(cuò)誤。建議安裝官方開發(fā)工具。可去此處找下載鏈接。

這里寫圖片描述

-4058錯(cuò)誤

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

這里寫圖片描述

我們看到上面的錯(cuò)誤信息中有個(gè)數(shù)字-4058，這應(yīng)該是初入微信小程序遇到最多的錯(cuò)誤了，這種一般都是文件缺失，后面有個(gè)path，可以對(duì)著該路徑看看是否存在這個(gè)文件。造成這種錯(cuò)誤的原因一般都是創(chuàng)建項(xiàng)目選擇的目錄不正確，或者在app.json注冊(cè)了一個(gè)不存在的頁(yè)面。
當(dāng)然還有一種情況就是在app.json文件的pages注冊(cè)的頁(yè)面是沒有創(chuàng)建的，或者你刪除了某個(gè)頁(yè)面，但是沒有取消注冊(cè)也會(huì)是-4058錯(cuò)誤。

Page注冊(cè)錯(cuò)誤

這里寫圖片描述

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

Page route錯(cuò)誤

這里寫圖片描述

字面意思就是頁(yè)面路由錯(cuò)誤，在微信中有兩種路由方式一種是在wxml文件使用<navigator />組件，一種是調(diào)用wx.navigateTo。
如下代碼：

wxml文件：

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

js文件事件處理函數(shù)：

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

如果你這樣寫的話，恭喜你，你就會(huì)看到上面提示的錯(cuò)誤，這是因?yàn)橹貜?fù)調(diào)用路由引起的，處理方法就是刪除一個(gè)路由，刪除<navigator />組件或者刪除wx.navigateTo。除了上面說的可能導(dǎo)致路由錯(cuò)誤外，還有一種情況，類似于下面的代碼

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

這種也是不允許的，也就是說<navigator/>組件內(nèi)部不能再嵌套<navigator/>組件。它只能是單層存在的。

Do not have * handler in current page.

這里寫圖片描述

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

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

tabBar設(shè)置不顯示

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

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

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

tabBar寫法錯(cuò)誤導(dǎo)致的不顯示，將其中的大寫字母B寫成小寫，導(dǎo)致tabBar不顯示。
tabBar的list中沒有寫pagePath字段，或者pagePath中的頁(yè)面沒有注冊(cè)
tabBar的list的pagePath指定的頁(yè)面沒有寫在注冊(cè)頁(yè)面第一個(gè)。微信小程序的邏輯是"pages"中的第一個(gè)頁(yè)面是首頁(yè)，也就是程序啟動(dòng)后第一個(gè)顯示的頁(yè)面，如果tabBar的list的pagePath指定的頁(yè)面都不是pages的第一個(gè)，當(dāng)然也就不會(huì)電視tabBar了。
tabBar的數(shù)量低于兩項(xiàng)或者高于五項(xiàng)，微信官方中明確規(guī)定tabBar的至少兩項(xiàng)最多五項(xiàng)。超過或者少于都不會(huì)顯示tabBar。

navigationBarTitle顯示問題

這里寫圖片描述

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

Page({   data:{     // text:"這是一個(gè)頁(yè)面"   },   onLoad:function(options){     // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來的參數(shù)    },   onReady:function(){     // 頁(yè)面渲染完成     //NavigationBarTitle如果此處和json文件都設(shè)置，最后展示此處的標(biāo)題欄 wx.setNavigationBarTitle({   title: '音樂' })   },   onShow:function(){     // 頁(yè)面顯示   },   onHide:function(){     // 頁(yè)面隱藏   },   onUnload:function(){     // 頁(yè)面關(guān)閉   } })

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

{     "navigationBarTitleText": "音樂" }

wx.navigateTo無法打開頁(yè)面

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

本地資源無法通過 css 獲取

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

頁(yè)面間數(shù)據(jù)傳遞

微信小程序路由（頁(yè)面跳轉(zhuǎn)）是通過API wx.navigateTo或者wxml中<navigator/>組件實(shí)現(xiàn)的，不管哪種實(shí)現(xiàn)都會(huì)有一個(gè)重要的參數(shù)就是url，它指定了要跳轉(zhuǎn)的頁(yè)面，并且頁(yè)面之間數(shù)據(jù)傳遞也是通過url來實(shí)現(xiàn)的，這個(gè)數(shù)據(jù)傳遞有點(diǎn)類似于我們使用的get網(wǎng)絡(luò)請(qǐng)求，把參數(shù)都拼接在要跳轉(zhuǎn)界面地址的后面并以“？”連接。然后將要傳入的數(shù)據(jù)以鍵和值的形式追加在"?"后面，多個(gè)參數(shù)直接用"&"符合。如我們點(diǎn)擊消息聊天記錄，將列表上的數(shù)據(jù)傳到下一個(gè)頁(yè)面，可以這樣寫。

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

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

Page({   data:{     // text:"這是一個(gè)頁(yè)面"     isHiddenToast:true   }   onLoad:function(options){     // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來的參數(shù)     console.log(options.title)      console.log(options.message)    },   onReady:function(){     // 頁(yè)面渲染完成   },   onShow:function(){     // 頁(yè)面顯示   },   onHide:function(){     // 頁(yè)面隱藏   },   onUnload:function(){     // 頁(yè)面關(guān)閉   },   bindtap:function(event){ wx.navigateTo({   url: "/pages/message/search/search" })   }, })