一:項(xiàng)目結(jié)構(gòu)
微信小程序項(xiàng)目結(jié)構(gòu)主要有四個(gè)文件類(lèi)型,如下
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。
注意:為了方便開(kāi)發(fā)者減少配置項(xiàng),規(guī)定描述頁(yè)面的這四個(gè)文件必須具有相同的路徑與文件名。
在根目錄下用app來(lái)命名的這四中類(lèi)型的文件,就是程序入口文件。
app.json
必須要有這個(gè)文件,如果沒(méi)有這個(gè)文件,項(xiàng)目無(wú)法運(yùn)行,因?yàn)槲⑿趴蚣馨堰@個(gè)作為配置文件入口,整個(gè)小程序的全局配置。包括頁(yè)面注冊(cè),網(wǎng)絡(luò)設(shè)置,以及小程序的window背景色,配置導(dǎo)航條樣式,配置默認(rèn)標(biāo)題。
app.js
必須要有這個(gè)文件,沒(méi)有也是會(huì)報(bào)錯(cuò)!但是這個(gè)文件創(chuàng)建一下就行 什么都不需要寫(xiě)
以后我們可以在這個(gè)文件中監(jiān)聽(tīng)并處理小程序的生命周期函數(shù)、聲明全局變量。
app.wxss
全局配置的樣式文件,項(xiàng)目非必須。
知道小程序基本文件結(jié)構(gòu),就可以開(kāi)始研究官方demo了,研究過(guò)程中如果有不明白的地方可以去官方文檔尋求答案,如果找不到答案或者有疑問(wèn),可再此博客留言,相互交流。下面介紹下出現(xiàn)概率較高的幾個(gè)問(wèn)題。
微信小程序新定義了一個(gè)尺寸單位,可以適配不同分辨率的屏幕,它規(guī)定屏幕寬為750rpx,如在 iPhone6 上,屏幕寬度為375px,共有750個(gè)物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
這個(gè)項(xiàng)目我用的都是rpx尺寸單位,期間遇到一個(gè)很奇葩的問(wèn)題。在相鄰的兩條信息直接都會(huì)有一個(gè)分割線,我將線的高度都設(shè)置成1rpx,但是不有個(gè)別分割線是不顯示的,如下圖
看到?jīng)]在第一條和第二條直接并沒(méi)有現(xiàn)實(shí)這條線,但是其他的都展示了,分割線的屬性是一樣的,而且在不同的手機(jī)上(分辨率不同)不顯示的分割線也是不同的,有的分辨率好幾條分割線都不顯示,不知道這是模擬器的bug還是rpx的bug。最后分割線的高度尺寸單位使用了px,解決了這個(gè)問(wèn)題。
在微信小程序剛出來(lái)的時(shí)候如果輸入AppID提示這個(gè)信息就表示沒(méi)有破解,但是現(xiàn)在官方軟件更新可以選擇無(wú)AppID開(kāi)發(fā),如下圖,我們之間選擇無(wú)AppID,即可解決此錯(cuò)誤。建議安裝官方開(kāi)發(fā)工具。可去此處找下載鏈接。
微信小程序創(chuàng)建項(xiàng)目時(shí)選擇無(wú)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)目目錄下沒(méi)有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è)面是沒(méi)有創(chuàng)建的,或者你刪除了某個(gè)頁(yè)面,但是沒(méi)有取消注冊(cè)也會(huì)是-4058錯(cuò)誤。
這個(gè)錯(cuò)誤可能很容易理解,頁(yè)面注冊(cè)錯(cuò)誤。頁(yè)面是通過(guò)Page對(duì)象來(lái)渲染的,每個(gè)頁(yè)面對(duì)應(yīng)的js文件必須要?jiǎng)?chuàng)建page,最簡(jiǎn)單的方式就是在js文件下寫(xiě)入Page({}),在page中有管理頁(yè)面渲染的生命周期,以及數(shù)據(jù)處理,事件都在這完成。這個(gè)錯(cuò)誤引起的原因一般都是剛創(chuàng)建頁(yè)面,js文件還有有處理或者忘了處理。所以要養(yǎng)成創(chuàng)建頁(yè)面的同時(shí)在js文件先創(chuàng)建Page的習(xí)慣.
字面意思就是頁(yè)面路由錯(cuò)誤,在微信中有兩種路由方式一種是在wxml文件使用
如下代碼:
wxml文件:
js文件事件處理函數(shù):
bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
}
如果你這樣寫(xiě)的話,恭喜你,你就會(huì)看到上面提示的錯(cuò)誤,這是因?yàn)橹貜?fù)調(diào)用路由引起的,處理方法就是刪除一個(gè)路由,刪除
<navigator url="search/search"><navigator url="search/search"><view class="serach_view_show" bindtap="bindtap"> 搜索</view></navigator></navigator>
這種也是不允許的,也就是說(shuō)
大概意思就是當(dāng)前頁(yè)面沒(méi)有此處理,讓確定是否已經(jīng)定義,還指出了錯(cuò)誤出現(xiàn)的可能位置pages/message/message,其實(shí)這種問(wèn)題出現(xiàn)一般就是我們?cè)趙xml定義了一些處理事件,但是在js文件中沒(méi)有實(shí)現(xiàn)這個(gè)時(shí)事件的處理方法,就會(huì)出現(xiàn)這個(gè)錯(cuò)誤。那么我們按提示在js文件加上事件處理,如下代碼,加上后就不會(huì)再有此錯(cuò)誤提示。
bindtap:function(event){ wx.navigateTo({ url: "search/search" }) },
電話:0951-5988193(8:30-17:30)
郵箱:master@yuhaosoft.com.cn
24H:13995012209、15378951724
地址:銀川市興慶區(qū)鳳凰南街鳳凰商務(wù)樓503室
Copyright @ 昱皓軟件. YUHAO.LTD 寧ICP備16000928號(hào)