微信小程序中有哪些知識點

這篇文章主要介紹微信小程序中有哪些知識點，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

subPackages 分包加載

因為小程序主包大小不超過2M 限制，所以使用分包是個不錯的選擇，總分包大小不超過8M，可以添加多個分包，分包加載可以優化小程序首次啟動的下載時間，當進入分包頁面再進行下載，這種按需加載可以把某些數據量大的抽離出來放入分包（如圖表）

rpx 單位、

在做移動端最常用適配的方法就是使用 rem 或 vw 作為單位來進行適配，所以微信小程序提供了 rpx 單位來進行適配

授權彈窗

wx.getUserInfo 接口調整，以前可以直接主動調用顯示授權彈窗  ，現在需要使用 <button open-type="getUserInfo"></button> 點擊來引導用戶去授權，小程序 wx.getUserInfo 接口正式版已調整，體驗版和開發版還可以使用原有方式。

原生組件 z-index

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

偽元素

小程序的偽元素屬性無法在微信開發者工具 css 屬性中看到，所以對于某些組件樣式無法覆蓋時（如 button 的邊框或某些線條設置），是因為通過偽元素 ::after 設置的，所以必須使用偽元素來覆蓋

頁面棧

一個應用同時只能打開5個頁面棧，當已經打開了5個頁面之后（現在限制是10層），后續可能出現不能正常打開新頁面。wx.navigateTo 跳轉會保留當前頁面，wx.redirectTo 則不會，所以請避免多層級的交互方式來合理使用跳轉方式

組件化

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

調式

一、開發者工具 source 斷點調式、console.log 打印數據和 AppData 查看數據

二、小程序注意當前調式基礎庫版來調式一些兼容性以及 bug 問題

三、小程序先在開發版或體驗版右上角打開調試顯示 vConsole，再切到正式版就能看到 vConsole 模式

數據傳遞

一、使用數據緩存，wx.setStorage 和 wx.getStorage，存儲數據只能是字符串格式，所以一般設置時需要使用 JSON.stringfy 來把對象轉字符串，獲取時使用 JSON.parse 來還原成對象

二、wx.navigateTo 跳轉傳遞參數，在跳轉 url 后拼接字符串，在 onLoad() 函數內，通過 options.參數名 的方式獲取傳遞的參數，注意如果有特殊字符（如?#等）,可以使用encodeURIComponent 和 decodeURIComponent 編碼和解碼，否則會被截斷，導致特殊字符后面的數據無法傳遞

三、getCurrentPages() 函數用于獲取當前頁面棧的實例，可以獲取頁面棧或修改頁面棧數據

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

導航欄膠囊對齊適配

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

unionid 標識

unionid 是小程序用戶的跨程序標識，擁有 unionid 首先需要綁定微信開放平臺（微信開放平臺-管理平臺-小程序-綁定小程序），因為 unionid 就是微信開放平臺分發下來的，不將小程序綁定微信開放平臺，就沒有 unionid，當不同小程序的 unionid 是不同的，需要把小程序掛載到同一個主體中，同一用戶，對同一個微信開放平臺下的不同應用，unionid 是相同的

后臺返回 unionid 給前端：首先 wx.login 獲取用戶登錄憑證code，然后 wx.getSetting 查看是否已授權，wx.getUserInfo 獲取用戶信息，通過用戶信息的加密字段給后臺向微信服務器換取 unionid 返回，由于獲取請求返回數據可能會在 Page.onLoad 之后才返回， 所以一般加上 callback （獲取 unionid 一般放在 app.js 的 onLaunch 中，所以需要 callback 來處理 它和頁面 onLoad 的數據獲取）

接口請求

建議把所有請求抽離到同一個 api.js 中，可以方便后期的修改和排查問題，小程序請求是通過微信后臺來請求我們的后臺地址來進行后端映射、你請求的接口實際到微信的后端做了一道映射，微信后端拿到你的 wx.request 調用的 url、用后端請求后端，所以不會出現跨域問題

input 鍵盤

考慮不同場景使用不同的 type，如文本鍵盤，數字鍵盤來提高用戶體驗

wux-weapp

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

以上是“微信小程序中有哪些知識點”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！