首頁  >  文章  >  微信小程式  >  微信小程式知識點總結

微信小程式知識點總結

hzc
hzc轉載
2020-06-12 09:19:093708瀏覽

subPackages 分包加載

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

rpx 單位、

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

授權彈跳視窗

wx.getUserInfo 介面調整,先前可以直接主動呼叫顯示授權彈窗 ,現在需要使用 點擊來引導使用者去授權,小程式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,元件豐富且拓展靈活

推薦教學:《微信小程式

以上是微信小程式知識點總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除