關於高仿QQ的微信小程式的詳解

這篇文章主要寫我在SmallAppForQQ這個專案進展的過程中遇到的一些問題。希望閱讀此文對你有一定幫助。

SmallAppForQQ：一個訪QQ的微信小程式

#文章開頭，先簡單介紹下專案結構，若沒有安裝開發工具，可去

github. com/xiehui999/SmallAppForQQ

下載。微信小程式專案結構主要有四個檔案類型，如下—

1）WXML檔案：（Weixin Markup Language）是微信在前人基礎之上設計的一套描述式標籤語言，用於建立小程式的視圖。

2）WXSS檔案：(WeiXin Style Sheets)是一套樣式語言，用於描wxml中視圖元件的樣式，

3）js檔案：業務邏輯處理，與後端進行資料互動等

4）json檔案：小程式設定文件，如頁面註冊，頁面標題等。

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

app.json

這個文件，在根目錄下，是程式入口文件。

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

app.js

必須要有這個文件，沒有也是會報錯！但是這個檔案建立一下就行 什麼都不需要寫

以後我們可以在這個檔案中監聽並處理小程式的生命週期函數、宣告全域變數。

app.wxss

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

知道小程式基本文件結構，就可以開始研究官方demo了，研究過程中如果有不明白的地方可以去官方文件尋求答案。以下介紹下出現機率較高的幾個問題－

常見問題rpx（responsive pixel）

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

（rpx並不是微信新定義的尺寸單位，在之前移動開發中便有，微信是兼收了眾家之長，在前人基礎之上定義了一個小程序開發框架。和蘋果一樣，蘋果在開放AppStore時使用Objective-C作為App的開發語言，但是OC並不是蘋果發明的。的問題。在相鄰的兩個訊息直接都會有一個分割線，我將線的高度都設定成1rpx,但是不有個別分割線是不顯示的，如下圖

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

40013錯誤

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

（目前個人開發者也能申請小程序，appId不再稀缺，無此麻煩）

-4058錯誤（缺少app.json檔案）

微信小程式建立專案時選擇無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檔案使用元件，一種是呼叫wx.navigateTo。

如下程式碼－

wxml：

搜尋

js：

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

如果你這樣寫的話，恭喜你，你就會看到上面提示的錯誤，這是因為重複呼叫路由所引起的，處理方法就是刪除一個路由，刪除元件或刪除wx.navigateTo。除了上面說的可能導致路由錯誤外，還有一種情況，類似於下面的程式碼

搜尋

這種也是不允許的，也就是說navigator元件內部不能再嵌套組件navigator。

Do not have * handler in current page.

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

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

tabBar設定不顯示

對於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"]

#1、tabBar寫法錯誤導致的不顯示，將其中的大寫字母B寫成小寫，導致tabBar不顯示。

2、tabBar的list中沒有寫入pagePath字段，或是pagePath中的頁面沒有註冊

3、tabBar的list的pagePath指定的頁面沒有寫在註冊頁面第一個。微信小程式的邏輯是"pages"中的第一個頁面是首4、頁，也就是程式啟動後第一個顯示的頁面，如果tabBar的list的pagePath指定的頁面都不是pages的第一個，當然也就不會電視tabBar了。

5、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":"音乐"}

視窗的標題取決於三個地方：

1，app.json中的App標題設定

2，page同名json檔案中的標題設定

3，js程式碼透過wx.setNavigationBarTitle介面設定

如果標題是靜態的，透過2設定。如果視窗本身是動態的，標題取決於傳進來的參數，比例id，那麼最好把1中的navigationBarTitleText設定為空，然後在js中動置。注意，空的設置，會影響所有頁面。

wx.navigateTo無法開啟頁面

一個應用程式同時只能開啟5個頁面，當已經開啟了5個頁面之後，wx.navigateTo不能正常開啟新頁面。請避免多層級的互動方式，或使用wx.redirectTo。

簡單一點，推薦使用wx.redirectTo，然後開發小程式單頁應用，單頁應用，就像以前pc網站洪荒時期的單頁網站。

關於wx.navigateTo5個頁面的開啟限制，有沒有解決的工具或方案？

navigateTo限制為五層，其實就是規定了頁面堆疊中的元素不能超過五個。頁面棧中元素達到五個後，就不能增加了。關於小程式頁面堆疊的詳細說明，詳細請看這篇：

www.ifanr.com/minapp/744601

該文並沒有給出解決的方法。碼農於此處給出一個理論方案：

1，每次跳躍都使用redirectTo，並且只在js中使用。在wxml中使用，也是透過先綁定事件，在事件

函數中使用。

2，自已实现一个页面栈，每次跳转之前，先推进这个自定义的页面栈。

3，不使用wx.navigateBack，从自定义页面栈中取出一个页面，redirectTo

这样就实现了无级跳转。小程序官方的机制，适用于简单的、层级不多的场景。使用如上自定义栈，好处还有减少内存占用，因为永远都是redirectTo。

本地资源无法通过 css 获取

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

页面间数据传递

微信小程序路由（页面跳转）是通过API wx.navigateTo或者wxml中组件实现的，不管哪种实现都会有一个重要的参数就是url，它指定了要跳转的页面，并且页面之间数据传递也是通过url来实现的，这个数据传递有点类似于我们使用的get网络请求，把参数都拼接在要跳转界面地址的后面并以“？”连接。然后将要传入的数据以键和值的形式追加在"?"后面，多个参数直接用"&"符合。如我们点击消息聊天记录，将列表上的数据传到下一个页面，可以这样写。

{{item.title}}
{{item.message}}
{{item.time}}
0}}">{{item.count}}

而数据接收是在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"})
},
})

这样就实现了页面间数据传递功能。

另外，听说支付宝也开始搞小程序了，连IDE都很像微信小程序开发工具：

文档页：

从“小程序”这个名字来看，因为“程序”是通用名词，而“小”本身没有独特性，所以任何公司申请“小程序”商标估计都难以获得商标管理局的通过，这也就意味着任何公司都可以做自己的“小程序”平台。

以上是關於高仿QQ的微信小程式的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！