subPackages 分包加載

因?yàn)樾〕绦蛑靼笮〔怀^2M 限制，所以使用分包是個(gè)不錯(cuò)的選擇，總分包大小不超過8M，可以添加多個(gè)分包，分包加載可以優(yōu)化小程序首次啟動(dòng)的下載時(shí)間，當(dāng)進(jìn)入分包頁(yè)面再進(jìn)行下載，這種按需加載可以把某些數(shù)據(jù)量大的抽離出來(lái)放入分包（如圖表）

rpx 單位、

在做移動(dòng)端最常用適配的方法就是使用 rem 或 vw 作為單位來(lái)進(jìn)行適配，所以微信小程序提供了 rpx 單位來(lái)進(jìn)行適配

授權(quán)彈窗

wx.getUserInfo 接口調(diào)整，以前可以直接主動(dòng)調(diào)用顯示授權(quán)彈窗 ?，現(xiàn)在需要使用 點(diǎn)擊來(lái)引導(dǎo)用戶去授權(quán)，小程序 wx.getUserInfo 接口正式版已調(diào)整，體驗(yàn)版和開發(fā)版還可以使用原有方式。

原生組件 z-index

原生組件的層級(jí)是最高的，所以頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少，都無(wú)法蓋在原生組件上，可以通過 cover-view 來(lái)解決，但某些特定環(huán)境如 swiper 或彈窗中需要顯隱原生組件，需要配合 hidden 來(lái)使用

偽元素

小程序的偽元素屬性無(wú)法在微信開發(fā)者工具 css 屬性中看到，所以對(duì)于某些組件樣式無(wú)法覆蓋時(shí)（如 button 的邊框或某些線條設(shè)置），是因?yàn)橥ㄟ^偽元素 ::after 設(shè)置的，所以必須使用偽元素來(lái)覆蓋

頁(yè)面棧

一個(gè)應(yīng)用同時(shí)只能打開5個(gè)頁(yè)面棧，當(dāng)已經(jīng)打開了5個(gè)頁(yè)面之后（現(xiàn)在限制是10層），后續(xù)可能出現(xiàn)不能正常打開新頁(yè)面。wx.navigateTo 跳轉(zhuǎn)會(huì)保留當(dāng)前頁(yè)面，wx.redirectTo 則不會(huì)，所以請(qǐng)避免多層級(jí)的交互方式來(lái)合理使用跳轉(zhuǎn)方式

組件化

emplate 模塊與 component 組件，是小程序中組件化的方式，二者的區(qū)別是，template 模塊主要是展示，方法需要在使用 template 的頁(yè)面中定義。而 component 組件，則擁有自己的js 文件，整個(gè) component 組件類似一個(gè) page 頁(yè)面。簡(jiǎn)單來(lái)說，只是展示用，建議使用 template，組件中涉及到較多的邏輯，建議使用 component

調(diào)式

一、開發(fā)者工具 source 斷點(diǎn)調(diào)式、console.log 打印數(shù)據(jù)和 AppData 查看數(shù)據(jù)

二、小程序注意當(dāng)前調(diào)式基礎(chǔ)庫(kù)版來(lái)調(diào)式一些兼容性以及 bug 問題

三、小程序先在開發(fā)版或體驗(yàn)版右上角打開調(diào)試顯示 vConsole，再切到正式版就能看到 vConsole 模式

數(shù)據(jù)傳遞

一、使用數(shù)據(jù)緩存，wx.setStorage 和 wx.getStorage，存儲(chǔ)數(shù)據(jù)只能是字符串格式，所以一般設(shè)置時(shí)需要使用 JSON.stringfy 來(lái)把對(duì)象轉(zhuǎn)字符串，獲取時(shí)使用 JSON.parse 來(lái)還原成對(duì)象

二、wx.navigateTo 跳轉(zhuǎn)傳遞參數(shù)，在跳轉(zhuǎn) url 后拼接字符串，在 onLoad() 函數(shù)內(nèi)，通過 options.參數(shù)名 的方式獲取傳遞的參數(shù)，注意如果有特殊字符（如?#等）,可以使用encodeURIComponent 和 decodeURIComponent 編碼和解碼，否則會(huì)被截?cái)?，?dǎo)致特殊字符后面的數(shù)據(jù)無(wú)法傳遞

三、getCurrentPages() 函數(shù)用于獲取當(dāng)前頁(yè)面棧的實(shí)例，可以獲取頁(yè)面?；蛐薷捻?yè)面棧數(shù)據(jù)

四、getApp() 可以獲取全局對(duì)象和方法

導(dǎo)航欄膠囊對(duì)齊適配

導(dǎo)航欄一般使用自定義，比較靈活可控，首先需要 app.json 中設(shè)置 navigationStyle ：custom 自定義，然后通過小程序 wx.getMenuButtonBoundingClientRect() 可以獲取到右上角膠囊菜單位置信息，不過這個(gè)接口不穩(wěn)定，部分機(jī)型會(huì)出現(xiàn)獲取失敗的 bug，所以使用 wx.getSystemInfo 來(lái)獲取該設(shè)備的狀態(tài)欄高度（即手機(jī)時(shí)間和電量那一欄高度），標(biāo)題欄高度（即包括導(dǎo)航返回鍵、標(biāo)題和膠囊的高度）默認(rèn)設(shè)置安卓為48，ios 為44（小程序默認(rèn)膠囊在安卓中為48px 的標(biāo)題欄居中，因?yàn)榘沧款悇e比較多，所以會(huì)有點(diǎn)差別，ios 為44px 的標(biāo)題欄居中），導(dǎo)航欄總高度為狀態(tài)欄高度+標(biāo)題欄高度，padding-top 高度為狀態(tài)欄高度，標(biāo)題欄中元素垂直對(duì)齊來(lái)達(dá)到適配并與膠囊對(duì)齊，設(shè)置內(nèi)容高度時(shí)可以利用 calc(100vh - ?導(dǎo)航欄總高度)，把樣式放在全局 app.wxss 中

unionid 標(biāo)識(shí)

unionid 是小程序用戶的跨程序標(biāo)識(shí)，擁有 unionid 首先需要綁定微信開放平臺(tái)（微信開放平臺(tái)-管理平臺(tái)-小程序-綁定小程序），因?yàn)?unionid 就是微信開放平臺(tái)分發(fā)下來(lái)的，不將小程序綁定微信開放平臺(tái)，就沒有 unionid，當(dāng)不同小程序的 unionid 是不同的，需要把小程序掛載到同一個(gè)主體中，同一用戶，對(duì)同一個(gè)微信開放平臺(tái)下的不同應(yīng)用，unionid 是相同的

后臺(tái)返回 unionid 給前端：首先 wx.login 獲取用戶登錄憑證code，然后 wx.getSetting 查看是否已授權(quán)，wx.getUserInfo 獲取用戶信息，通過用戶信息的加密字段給后臺(tái)向微信服務(wù)器換取 unionid 返回，由于獲取請(qǐng)求返回?cái)?shù)據(jù)可能會(huì)在 Page.onLoad 之后才返回， 所以一般加上 callback （獲取 unionid 一般放在 app.js 的 onLaunch 中，所以需要 callback 來(lái)處理 它和頁(yè)面 onLoad 的數(shù)據(jù)獲?。?/p>

接口請(qǐng)求

建議把所有請(qǐng)求抽離到同一個(gè) api.js 中，可以方便后期的修改和排查問題，小程序請(qǐng)求是通過微信后臺(tái)來(lái)請(qǐng)求我們的后臺(tái)地址來(lái)進(jìn)行后端映射、你請(qǐng)求的接口實(shí)際到微信的后端做了一道映射，微信后端拿到你的 wx.request 調(diào)用的 url、用后端請(qǐng)求后端，所以不會(huì)出現(xiàn)跨域問題

input 鍵盤

考慮不同場(chǎng)景使用不同的 type，如文本鍵盤，數(shù)字鍵盤來(lái)提高用戶體驗(yàn)

wux-weapp

小程序組件比較推薦 wux-weapp，組件豐富并且拓展靈活

推薦教程：《微信小程序》

以上是微信小程序知識(shí)點(diǎn)總結(jié)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！