首頁 > 微信小程式 > 小程式開發 > 關於高仿QQ的微信小程式的詳解

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

Y2J
發布: 2017-04-26 15:33:31
原創
2751 人瀏覽過

這篇文章主要寫我在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的微信小程式的詳解


文档页:

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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板