1. 配置分包加載以及打包、引用原則
小程序如果需要進行分包加載,需要在 app.json 中,通過 subPackages 或者 subpackages 定義分包結構
每個分包結構含三個常用字段:
- root:分包的根目錄,該目錄下的所有文件都會被打包成一個獨立的包
- name:分包的別名,用于在代碼中引用該分包
- pages:指定當前分包中包含哪些頁面
<!-- 如果需要跳轉到分包頁面,需要在路徑之前加上分包的根目錄路徑 root 路徑才行 -->
<navigator url="/modules/goodModules/pages/list/list">跳轉到商品列表頁面</navigator>"subPackages": [{"root": "modules/goodModules","name": "goodModules","pages": ["pages/list/list","pages/datail/detail"]}]
打包原則
tabbar頁面必須在主包內
最外層的pages字段,屬于主包的包含的頁面
按subpackages配置路徑進行打包,配置路徑外的目錄將被打包到主包中
分包之間不能相互嵌套,subpackage的根目錄不能是另外一個subpackage內的子目錄
引用原則
主包不可以引用分包的資源,但分包可以使用主包的公共資源
分包與分包之間資源無法相互引用,分包異步化時不受限制
2. 獨立分包的裝置
獨立分包:指能夠獨立于主包和其他分包運行的包
當給subpackages定義的分包結構添加independent字段,即可聲明對應分包為獨立分包
從獨立分包中頁面進入小程序時,不用下載主包,當用戶進入普通分包或主包內頁面時,主包才會被下載。開發者可以將功能相對獨立的頁面配置到獨立分包中,因為獨立分包不依賴主包就能運行,使得分包頁面啟動速度更快。
{"root": "modules/marketModules","name":"marketModules","pages": ["pages/market/market"],"independent": true}
注意事項:
(1)獨立分包中不能依賴主包和其他分包中的資源
(2)主包中的app.wxss對獨立分包無效
(3)App只能在主包內定義,獨立分包中不能定義App,會造成嚴重的后果
3. 分包預下載
訪問小程序頁面時,預先下載其他分包中的代碼和資源,提高用戶體驗
要在app.json中通過preloadRule字段設置預下載規則
"preloadRule": {"pages/index/index": {"network": "all","packages": ["modules/goodModules"]},"modules/marketModules/pages/market/market": {"network": "all","packages": ["__APP__"]}}
4. 獲取微信頭像
想使用微信提供的頭像填寫能力:
- 將button組件open-type的值設置為chooseAvatar
- 通過bindchooseavatar事件回調獲取到頭像信息的臨時路徑
// wxml
<view><button class="btn" open-type="chooseAvatar" bindchooseavatar="chooseAvatar"><image class="avatar" src="{{ avatarUrl }}" mode=""/></button>
</view>// index.js
Page({data: {avatarUrl: '../../'},// 獲取微信頭像chooseAvatar(event) {const { avatarUrl } = event.datailthis.setData({avatarUrl})}
})
5.獲取微信昵稱
想使用微信提供的昵稱填寫能力,需要三步:
- 通過 form 組件中包裹住 input 以及 form-type 為 submit 的 button 組件
- 需要將 input 組件 type 的值設置為 nickname,當用戶輸入框輸入時,鍵盤上方會展示微信昵稱
- 給 form 綁定 submit 事件,在事件處理函數中通過事件對象獲取用戶昵稱
<form bindsubmit="onSubmit"><input type="nickname" name="nickname" placeholder="請輸入昵稱"/><button type="primary" plain form-type="submit">點擊獲取昵稱</button>
</form>onSubmit (event) {console.log(event.datail.value);}
6.轉發功能
幫助用戶流暢的與好友分享內容和服務
方式一:
頁面.js必須聲明onShareAppMessage事件監聽函數,并自定義轉發內容。只有定義了此事件處理函數,右上角菜單才會顯示“轉發”按鈕
方式二:
通過給button組件設置屬性open-type=“share”,可以在用戶點擊按鈕后觸發Page.onShareAppMessage事件監聽函數
如果通過按鈕轉發就有值,如果通過右上角三個點轉發就是undefined
onShareAppMessage (obj) {return {title: '這是一個非常神奇的畫面',path: '/miniprogram/pages/index/index.js',imageUrl: '../../assets/易烊千璽.jpg'}}
7.分享到朋友圈
要滿足兩個條件:
- 頁面必須設置允許“發送給朋友”,頁面.js文件聲明onShareAppMessage事件監聽函數
- 頁面必須設置允許“分享到朋友圈”,頁面.js文件聲明onShareTimeline事件監聽函數
8. 手機號驗證組件
手機號驗證組件分為兩種:手機號快速驗證組件 以及 手機號實時驗證組件
- 手機號快速驗證組件:平臺會對號碼進行驗證,但不保證是實時驗證
// 在event.detail中可以獲取到code,code是動態令牌,用來換區用戶的手機號,需要將code發送給后端,后端接收后調用API,換區用戶真正的手機號,再返回給前端
<button open - type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
- 手機號實時驗證組件:在每次請求時,平臺均會對用戶選擇的手機號進行實時驗證。
<button open - type="getRealtimePhoneNumber"
bindgetrealtimephonenumber="getrealtimephonenumber" />
注意事項:
目前該接口針對非個人開發者,且完成了認證的小程序開放(不包含海外主體)
兩種驗證方式要付費使用,有1000次的免費額度
9. 客服功能
使用方式:
- 需要將button組件open-type的值設置為contact,當用戶點擊就會進入客服會話
- 在微信公眾后臺,綁定后的客服賬號,可以登錄網頁端客服獲移動端小程序 客服接收,發送客服消息
10.框架接口-getApp()
通過getApp() 方法獲取到小程序全局唯一的App實例
所以在getApp()中添加全局共享的數據、方法,從而實現頁面、組件的數據傳值
注意事項:
- 不要在App()方法中使用getApp(), 使用this就可以拿到app實例
- 通過getApp()獲取實例后,不要私自調用生命周期函數
// app.js
const appInstance = getApp()
App({// 全局共享的數據globalData: {token: ''},// 全局共享的方法setToken(token) {this.globalData.token = token}
})<button bind:tap="login">登錄</button>// pages/profile/profile.js
const appInstance = getApp()
Page({login () {appInstance.setToken('ncjdcbhwerbcj')}})