提前說下:
寫這兩篇筆記,純看文檔,沒有實踐、測試代碼,是否正確,錯誤的地方可能會很多!只是幫我梳理了下小程序文檔。
筆記個別重點:
1.自定義組件
Component 構造器,該頁面的 Component() 方法的參數並不全,需要看的是:
框架 -> 框架接口 -> 自定義組件 -> Component
2.多線程
1>app.json 中配置 'Worker' 代碼放置的目錄
{
"workers": "workers"
}
2>在上面定義的目錄下,我們就可以創建我們想要的 worker 線程文件(任意創建,也可以創建其他文件,例如:utils.js)
workers/index.js
workers/utils.js
workers/request/index.js
workers/response/index.js
...
3>編寫 worker 線程文件,例如:workers/request/index.js
const utils = require('../utils.js')
// worker 線程文件,會自動暴露一個 'worker' 對象,我們直接使用即可
// (worker 線程文件有一個 worker 對象,我們直接使用)
// 1.接收消息(接收主線程的消息)
worker.onMessage(function(res){
console.log(res)
})
// 2.發送消息(給主線程發送消息)
worker.postMessage({
msg: '你好,主線程'
})
4>在主線程,初始化我們定義好的 worker 線程(主線程就是目前的微信小程序線程,可以理解爲在 app.js 文件中)
// 參數爲:我們定義的 worker 線程文件(絕對路徑)
const worker = wx.createWorker('workers/request/index.js')
// 1.主線程向 worker 線程發送消息
worker.postMessage({
msg: '你好,worker 線程'
})
// 2.主線程接收 worker 線程的消息
worker.onMessage(function(res){
console.log(res);
})
// 3.worker 線程的最大併發數量爲 1,所以,要切換其他 worker 線程,需要結束之前創建的 worker 線程
// (只有主線程可以調用)
worker.terminate()
5>注意點:
1.worker 線程最大併發數量爲 1,創建另外線程,需結束之前的線程
2.worker 文件中,只能 require 我們定義的 worker 目錄下的文件
3.worker 內不支持 wx 系列的 API
3.服務端能力
1>服務端 API
2>消息推送
類似我們之前開發的微信公衆號的消息系統(消息和事件)
4.自定義 tabBar
如果我們不想要小程序默認的 'tabBar',我們可以使用 '自定義 tabBar' 來接管。所有 tabBar 的頁面,只能使用同一個 '自定義 tabBar'。(這個也是正確的)
對於我們可能希望,不同的大的模塊內部,也有自己的 '底部導航',我們可以當做頁面的底部(這種並非是 'tabBar',不過非常類似),就是正常的頁面結構就可以了,只不過模擬成 tabBar 的感覺。
'自定義 tabBar' 需要配置:
1>app.json 中指定 『"custom": true』,表示使用 '自定義 tabBar'
2>其餘的 tabBar 配置項,依舊得完整填寫,爲了兼容舊版。
3>所有的 tab 頁,還需配置『"usingComponents": {}』,簡單的寫法是,直接在 app.json 中配置 『"usingComponents": {}』(不過不推薦,不清晰)
5.優化
1>setData 原理
WebView(視圖層) 和 JavascriptCore(邏輯層),都是獨立的模塊,不具備數據直接共享的通道,兩邊是通過 evaluateJavascript 實現。
evaluateJavascript 實現是:將用戶傳輸的數據,轉爲 '字符串' 進行傳遞,傳遞完成後,再拼接成 'js 腳本',然後執行 'js 腳本' 來達到數據傳遞。
所以 setData 不能過於頻繁、不能單次傳遞大量數據,同時,頁面進入後臺,不可進行 setData。
2>圖片資源
大圖片和長列表圖片(很長的列表頁,列表中的每項,都帶有圖片),對內存和頁面切換,都有很大影響
https://sevencai.github.io/2018/03/22/%E9%95%BF%E5%88%97%E8%A1%A8%E5%9B%BE%E7%89%87%E4%BC%98%E5%8C%96%E6%96%B9%E5%BC%8F/
再次鏈接到了 '張鑫旭' 博客了,好久沒看他的文章了...
https://www.zhangxinxu.com/php/myRecomm
'掘金' 看來也不錯,有時間看看
https://juejin.im/
3>代碼包大小
1.儘量不包含圖片,放到 CDN
2.及時清理不用的代碼,類庫引用等都得注意
6.調試
1>vConsole
2>Source Map(方便排錯,同時只作用域 '開發版',無需擔心 '線上版')
在開發者工具中開啓 ES6 轉 ES5、代碼壓縮時,會生成 Source Map 的 .map 文件。開發版小程序中,基礎庫會使用代碼包中的 .map 文件,對 vConsole 中展示的錯誤信息堆棧進行重新映射
7.低版本兼容
1>版本號比較
1.微信客戶端和小程序基礎庫的版本號風格爲:Major.Minor.Patch(主版本號.次版本號.修訂版本號)
2.組件、API等,都有要求的 '最低基礎庫版本號',判斷當前版本號是否達到要求,達不到需進行處理,是否升級等
3.通過 wx.getSystemInfo 或 wx.getSystemInfoSync 的 SDKVersion 來獲取當前小程序運行的基礎庫的版本號
4.版本號比較,不要直接使用 '字符串比較'。官方給我們提供了一個 compareVersion() 函數,看文檔
2>API 存在判斷
對於新增的 API,可以判斷 API 是否存在,來進行兼容處理
if(wx.openBluetoothAdapter){
//存在
}else{
// 不存在
}
3>wx.canIUse
通過 wx.canIUse,可以判斷以下內容,是否可以在當前版本的基礎庫使用
1.API 參數或返回值的參數
wx.showModal({
success(res){
if(wx.canIUse('showDodal.cancel')){
// 可以使用
}
}
})
2.組件或組件的屬性
wx.canIUse('cover-view')
4>小程序後臺,可以設置 '基礎庫最低版本',強制用戶來升級 '微信客戶端'
8.轉發
1>2種方式:
1.右上角轉發菜單
2.頁面內轉發按鈕
<button open-type="share"></button>
2>必須設置頁面的 Page.onShareAppMessage() 事件,它監聽用戶轉發的行爲,並自定義轉發內容
onShareAppMessage(res){
// res.from - 轉發事件來源(button - 頁面內轉發按鈕 | menu - 右上角轉發菜單)
// res.target - from 的值是 button,target 爲轉發按鈕 <button> | from 的值爲 menu,target 爲 null
// res.webViewUrl - 頁面中包含 <web-view> 組件時,返回當前 <web-view> 的 url
return {
title: '轉發標題,默認值:當前小程序名稱',
path: '轉發路徑,默認值:當前頁面 path,必須是以 "/" 開頭的完整路徑',
imageUrl: '自定義圖片路徑,默認值:當前頁面的截圖'
}
}
3>API -> 轉發
wx.showShareMenu - 顯示當前頁面的轉發按鈕
wx.showShareMenu({
withShareTicket: true // 是否使用帶 ShareTicket 的轉發詳情
})
wx.hideShareMenu - 隱藏轉發按鈕
wx.getShareInfo - 獲取轉發詳細信息(目前應該只是爲了獲取,轉發的羣ID - openGid)
wx.getShareInfo({
shareTicket: 'xxx',
success: function(res){
// res.errMsg
// res.encryptedData, // 完整轉發數據,openGid
// res.iv
}
})
wx.updateShareMenu - (貌似和 '動態消息' 有關)
4>組件 -> 開放能力 -> open_data
通過 openGid,可以獲取 '羣名'
<open-data type="groupName" open-gid="xxxxxx"></open-data>
5>轉發的流程,以及 API 的使用,應該是這樣,猜測
// 1.顯示頁面的轉發按鈕,主要是 '使用帶 ShareTicket 的轉發詳情'(不知道會不會將按鈕的轉發,也支持 ShareTicket)
wx.showShareMenu({
withShareTicket: true
})
// 2.設置 Page.onShareAppMessage(),自定義轉發內容
Page({
onShareAppMessage(res){
return {
title: '轉發標題,默認值:當前小程序名稱',
path: '轉發路徑,默認值:當前頁面 path,必須是以 "/" 開頭的完整路徑',
imageUrl: '自定義圖片路徑,默認值:當前頁面的截圖'
}
}
});
// 3.其他用戶通過轉發,打開小程序,在 App.onLaunch 或 App.onShow 可以獲取到 ShareTicket,然後調用 wx.getShareInfo() 得到 openGid
App({
onLaunch(){
// options.shareTicket
if(options.shareTicket){
wx.getShareInfo({
shareTicket: 'xxx',
success: function(res){
// res.errMsg
// res.encryptedData, // 完整轉發數據,openGid
// res.iv
}
})
}
}
})
6>動態消息
動態消息的特點:
1.消息發送出去,可以修改部分消息內容
2.消息有對應的提醒按鈕,用戶點擊...
使用方法:
1.創建 activity_id
服務端 -> 動態消息 -> createActivityId
GET https://api.weixin.qq.com/cgi-bin/message/wxopen/activityid/create?access_token=ACCESS_TOKEN
得到 activity_id
2.轉發之前,聲明動態消息
API -> 轉發
wx.updateShareMenu({
withShareTicket: true, // 是否使用帶 ShareTicket 的轉發詳情(默認值爲 false)
isUpdatableMessage: true, // 是否是動態消息(默認值爲 false)
activityId: '', // 動態消息 ID
templateInfo: { // 動態消息的模板信息(目前只參數列表)
parameterList: [{
name: 'member_count',
value: '1'
}, {
name: 'room_limit',
value: '3'
}]
}
})
templateInfo
parameterList
{
name: '',
value: ''
}
狀態:
0 - 應該是未開始,文字內容:"成員正在加入,當前 {member_count}/{room_limit} 人"
1 - 已開始,文字內容:"已開始"
狀態參數(上面參數列表中的 name 的類型):
member_count - 狀態 0 有效,模板中的 member_count 的值
room_limit - 狀態 0 有效,模板中的 room_limit 的值
path - 狀態 1 有效,點擊 '進入' 啓動小程序時使用的 '路徑'
version_type - 狀態 1 有效,點擊 '進入' 啓動小程序時使用的 '版本':develop、trial、release
3.轉發動態消息後,可以修改消息內容
服務端 -> 動態消息 -> setUpdatableMsg
POST https://api.weixin.qq.com/cgi-bin/message/wxopen/updatablemsg/send?access_token=ACCESS_TOKEN
9.模板消息
同 '微信公衆號' 的模板消息很類似,簡單總結下異同點:
相同點:
都是從模板庫中,選擇自己的模板,沒有則新添加,然後審覈、通過
通過接口或直接在管理面板來管理 '我的模板'
不同點:
1>推送位置
公衆號:是在公衆號內
小程序:所有小程序的模板消息,都在微信消息的 '服務通知'
2>下發條件
公衆號:可以隨意發送
小程序:只有 2 種情況:1.支付 2.提交表單
1.支付完成,會有 'prepay_id'(一次支付,最多可發送 3 條模板消息)
2.提交表單(一次提交,只能發送 1 條模板消息)
頁面的 <form> 組件,report-submit 爲 true 時,表示需要發送模板消息,提交表單可以獲取 formId
3>發送數量
公衆號:一次操作,可以發多條
小程序:一次支付,最多可發送 3 條模板消息;一次提交,只能發送 1 條模板消息
4>模板跳轉能力
公衆號:任意鏈接,可以外鏈
小程序:只能本小程序內的各個頁面
發送步驟:
1.選擇模板
2.得到相關的下發參數
支付 - prepay_id
提交表單 - formId
3.調用 templateMessage.send 接口
10.統一服務消息
服務端 -> 統一服務消息 -> uniformMessage.send
一個接口,同時發送 '公衆號模板消息' 和 '小程序模板消息',跟單獨發,沒啥區別,得分別定義各自的模板消息數據
11.客服消息
所有小程序的 '客服消息' 都展示在微信消息的 '小程序客服消息'
'客服消息' 就是小程序的消息系統。
指南 -> 服務端能力 -> 消息推送(需要我們在後臺配置消息推送地址)
1>用戶進入客服消息
1.在頁面中,點擊 '客服會話按鈕' 進入
<button open-type="contact" bindcontact="handleContact"></button>
open-type 爲 contact,可用的屬性有:
session-from - 會話來源(用戶進入客服會話,發送的 '事件消息' 的 SessionFrom 參數)
send-message-title - 會話內消息卡片標題(默認:當前標題)
send-message-path - 會話內消息卡片點擊跳轉小程序路徑(默認:當前分享路徑)
send-message-img - 會話內消息卡片圖片(默認:當前頁面截圖)
show-message-card - 是否顯示會話內消息卡片,設置爲 true,用戶進入客服會話會在右下角顯示 '可能要發送的小程序' 提示,用戶點擊後,可以快速發送小程序消息(默認:false)
bindcontact - 客服消息回調
如果用戶在會話中點擊了小程序消息,則會返回到小程序,我們可以通過 bindcontact 事件回調,獲取用戶所點消息的頁面路徑 path 和對應的參數 query
/*
這裏提到了:用戶在會話中,點擊了 '小程序消息'。
小程序消息來源:
1>我們後臺可以給用戶,發送 '小程序類型的消息'
2>上面的幾個 '*-message-*' 屬性,其實就定義了 '小程序消息',而不需要後臺發送(相當於前臺發送了)
*/
page({
handleContact(e){
// e.path
// e.query
}
})
2.在微信的 '小程序客服消息' 列表中,進入指定的 '小程序' 的客服消息
2>用戶主動發送消息
1.文本消息
MsgType - text
Content - 文本內容
2.圖片消息
MsgType - image
PicUrl - 圖片鏈接(由系統生成)
MediaId - 圖片消息媒體id,可以調用 getTempMedia 接口來獲取圖片內容
3.小程序卡片消息
MsgType - miniprogrampage
Title - 標題
AppId - 小程序 appid
PagePath - 小程序頁面路徑
ThumbUrl - 封面圖片的臨時 cdn 鏈接
ThumbMediaId - 封面圖片的臨時素材 id(應該跟 image 消息的 MediaId 一樣,可以通過接口獲取圖片內容)
3>用戶觸發事件消息
1.用戶在頁面中,點擊 '客服會話按鈕' 進入客服會話,觸發事件
MsgType - event
Event - user_enter_tempsession
SessionFrom - sessionFrom(開發者在客服會話按鈕設置的 session-from 屬性)
4>服務器給用戶發送消息
不能主動給用戶發送客服消息,只有當用戶和小程序客服產生特定動作交互時,開發者纔可給用戶發送消息。
目前允許的動作有:
用戶發送消息 - 允許服務器向用戶 | 下發條數限制 - 5 | 下發時限 - 48小時
1.文本消息
msgtype - text
text: {
content - 文本內容
}
// 發送文本消息,支持添加可跳轉小程序的文字鏈接(在網上搜了下,沒人知道怎麼實現...)
/*
點擊下方,跳轉到我的小程序(這裏是我們的文本內容)
<a
href="http://www.qq.com"
data-miniprogram-appid="appid"
data-miniprogram-path="pages/index/index"
>
點擊跳小程序
</a>
*/
2.圖片消息
msgtype - image
image: {
media_id - 圖片媒體id,通過 '新增素材接口' 上傳圖片文件獲得
}
3.圖文鏈接
msgtype - link
link: {
title - 消息標題
description - 描述
url - 消息被點擊後跳轉的鏈接
thumb_url - 圖片鏈接,支持 jpg、png,較好的效果爲,大圖 - 640x320 | 小圖 - 80x80
}
4.小程序卡片
msgtype - miniprogrampage
miniprogrampage: {
title - 消息標題
pagepath - 小程序的頁面路徑,跟 app.json 對齊,支持參數,例如:pages/index/index?foo=bar
thumb_media_id - 小程序消息卡片的封面,image 類型的 media_id,由 '新增素材接口' 上傳圖片文件獲得,建議大小爲:520x416
}
5>轉發客服消息
不太懂...
6>下發客服輸入狀態
就是在客服消息頁面中,給用戶展示 '正在輸入'
服務端 -> 客服消息 -> customerServiceMessage.setTyping
參數:
access_token
touser - 用戶的 openId
command - 命令
Typing - 對用戶下發 '正在輸入' 狀態
CancelTyping - 取消對用戶的 '正在輸入' 狀態
7>臨時素材
開發者可在接收和發送客服消息的過程中,獲取或上傳臨時素材
1.獲取客服消息內的臨時素材(下載臨時的多媒體文件)
服務端 -> 客服消息 -> customerServiceMessage.getTempMedia
參數:
access_token
media_id - 媒體文件 id
2.上傳媒體文件(用於發送客服消息,或被動恢復用戶消息)
服務端 -> 客服消息 -> customerServiceMessage.uploadTempMedia
參數:
access_token
type - 文件類型(目前只有 image)
media - FormData,form-data 中媒體文件標識,有 filename、filelength、content-type 等信息
12.生成小程序碼
1>小程序碼的優勢:
1.具有更好的辨識度,美觀
2.擁有展示 '公衆號關注組件' 等高級能力
組件 -> 開放能力 -> official-account
當用戶掃 '小程序碼' 打開小程序時,開發者可在小程序內配置 '公衆號關注組件',方便用戶快捷關注公衆號。
幾點注意事項:
1.設置的公衆號需要和小程序在同一個主體下
2.組件限定最小寬度爲 300px,高度爲 84px
3.每個頁面只能配置一個該組件(類似頁面上的一個 view 結構)
<official-account></official-account>
屬性:
bindload - 組件加載成功時觸發
binderror - 組件加載失敗時觸發
2>生成 '小程序碼' 接口
1.適用於需要的碼數量較少的業務場景。永久有效,和 wxacode.createQRCode 生成的二維碼總數限制 100000 個
服務端 -> 小程序碼 -> wxacode.get
參數:
access_token
page -
width -
auto_color -
line_color -
is_hyaline -
2.適用於需要的碼數量極多的業務場景。永久有效,數量暫無限制
服務端 -> 小程序碼 -> wxacode.getUnlimited
參數:
access_token
scene -
page -
width -
auto_color -
line_color -
is_hyaline -
3>生成 '小程序' 的 '二維碼' 接口(這個接口專門單獨出來,是生成普通的二維碼,並非是 '小程序碼',沒有上面提到的優勢)
1.適用於需要的碼數量較少的業務場景。永久有效,和 wxacode.get 生成的二維碼總數限制 100000 個
服務端 -> 小程序碼 -> wxacode.createQRCode
參數:
access_token
page -
width -
13.小程序登錄
小程序可以通過微信官方提供的登錄能力,方便地獲取微信提供的用戶身份標識,快速建立小程序內的用戶體系
登錄流程分 2 步:
1.小程序前端,調用 wx.login() API,來獲取臨時登錄憑證 code
API -> 開放接口 -> 登錄 -> wx.login
wx.login
參數:
timeout - 超時時間
success -
fail -
complete -
sucess 回調函數的參數:
code - 用戶登錄憑證(有效期:5分鐘)
/*
還有一個相關的接口:
wx.checkSession() - 檢查登錄態是否過期
參數:
success -
fail -
complete -
很多時候,需要 session_key 來進行解密,如果 session_key 過期,會導致失敗。我們需要判斷用戶是否仍舊登錄着,不登錄則重新登錄
wx.checkSession({
success(){
// 出於登錄狀態
},
fail(){
// session_key 已過期,需要重新登錄
wx.login()
}
})
*/
2.通過上面獲取到的 code,請求我們的開發服務器,開發服務器調用 '服務端接口' 的 'auth.code2Session',換取用戶唯一標識 'open_id' 和 會話祕鑰 'session_key'
服務端 -> 開發接口 -> 登錄 -> code2Session
code2Session
get https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
請求參數:
appid - 小程序 appId
secret - 小程序 appSecret
js_code - wx.login() 得到的 code
grant_type - 授權類型,目前只有:authorization_code
返回值:
openid - 用戶 open_id
session_key - 會話祕鑰
unionid - 用戶 unionid,微信開放平臺綁定了小程序
errcode - 錯誤碼
errmsg - 錯誤信息
注意:
1.會話祕鑰 session_key 是對用戶數據進行 '機密簽名' 的祕鑰。爲了安全,需要保存在服務器。
2.臨時登錄憑證 code 只能使用一次
/*
考慮:
1.上面的登錄流程,是微信的登錄流程,並未對接到我們的業務系統用戶,我們還需要和業務系統的用戶進行綁定關聯!
user_binds - 用戶綁定表
id
user_id - 用戶id
type - 類型:qq、aliyun、wechat_official_account、wechat_miniprogram
unique_identifier - unionid
attach_identifier - openid
nick_name - 暱稱
gender - 性別
...
session_key 也得保存,用於解密,只有臨時數據,redis 中比較合適,和 open_id 關聯上就行
2.我們的系統,是否應該採用微信這套 '登錄狀態' 體系?
我感覺不太合適,還是後端來存儲比較合適。小程序只是提供一個快捷入口,直接登錄,首次需要和用戶 id 綁定下,以後就關聯登錄了
*/
14.授權
部分接口需要經過用戶授權同意後,才能使用。
1>如果用戶未接受或拒絕過此權限,會彈窗詢問用戶,用戶點擊同意後方可調用接口
2>如果用戶已授權,可以直接調用接口
3>如果用戶已拒絕授權,則不會出現彈窗,直接進入接口 fail 回調(我們需要做用戶拒絕授權的處理)
1>獲取用戶授權設置
API -> 設置 -> wx.getSetting
獲取用戶的當前設置(返回值中,只會出現小程序已經向用戶請求過的權限 - 這個意思是,我們項目裏可能涉及了好多授權的權限,但是用戶目前只訪問到其中的部分,就只會顯示這部分的權限)
wx.getSetting({
success(res){
res.authSetting = {
"scope.userInfo": true,
"scope.userLocation": true,
}
}
})
2>打開設置界面
打開設置界面有 2 種方式:
1.小程序設置界面:「右上角」 - 「關於」 - 「右上角」 - 「設置」
2.開發者可以調用 wx.openSetting 打開設置界面
/*
參考:https://developers.weixin.qq.com/community/develop/doc/000cea2305cc5047af5733de751008
之前,可以直接調用該接口,後來微信爲了避免此接口的濫用,調整了調用方式:
1>使用 <button> 組件來調用
<button open-type="openSetting" bindopensetting="callback">打開設置頁</button>
2>由點擊行爲,觸發 wx.openSetting 接口
<button bindtap="openSetting">打開設置頁</button>
Page({
openSetting(e){
wx.openSetting()
}
})
*/
// 參數&返回結果和 'wx.getSetting' 一致
wx.openSetting({
success(res){
res.authSetting = {
"scope.userInfo": true,
"scope.userLocation": true,
}
}
})
3>發起用戶授權
API -> 授權 -> wx.authorize
提前向用戶發起授權請求。調用後,會立刻彈窗詢問用戶是否同意授權。如果之前已同意授權,則不會出現彈窗,直接返回成功
wx.authorize({
// scope - 需要獲取權限的 scope
// success - 成功
// fail - 失敗
// complete - 成功、失敗都執行
})
4>scope 列表
scope.userInfo - 用戶信息(接口:wx.getUserInfo)
scope.userLocation - 地理位置(接口:wx.getLocation, wx.chooseLocation)
scope.address - 通訊地址(接口:wx.chooseAddress)
scope.invoiceTitle - 發票擡頭(接口:wx.chooseInvoiceTitle)
scope.invoice - 獲取發票(接口:wx.chooseInvoice)
scope.werun - 微信運動步數(接口:wx.getWeRunData)
scope.record - 錄音功能(接口:wx.startRecord)
scope.writePhotosAlbum - 保存到相冊(接口:wx.saveImageToPhotosAlbum, wx.saveVideoToPhotosAlbum)
scope.camera - 攝像頭(<camera> 組件)
注意:
1.wx.authorize({ scope: "scope.userInfo" }) // 不會出現授權窗口,需要使用 <button open-type="getUserInfo"></button>
2.scope.userLocation,必須配置 '地理位置說明用途'
/*
框架 -> 小程序配置 -> 全局配置 -> permission
"permission": {
"scope.userLocation": {
"desc": "小程序獲取權限時展示的接口用途說明,最長 30 個字符"
}
}
*/
5>AuthSetting
用戶授權設置信息
wx.getSetting({
success(res){
// 返回 authSetting,
// res.authSetting
// 是否授權了 '錄音功能'
if( ! res.authSetting['scope.record']){
}
}
})
{
"scope.userInfo": true,
"scope.userLocation": true,
...
對應上面的 scope 列表
...
}
15.獲取手機號
1>調用須知
1.獲取微信用戶綁定的手機號,需要先調用 'wx.login' 接口
2.需要用戶主動觸發,才能發起獲取手機的接口。所以不能通過 API 調用,得使用 '<button>' 組件
3.只對企業開發者,且完成了認證的小程序開放
2>使用
1.<button> 組件,open-type 設置爲 'getPhoneNumber',用戶點擊並同意後,通過 bindgetphonenumber 事件回調微信返回的加密數據
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
2.在 '事件回調' 中,通過微信返回的加密數據,調用開發服務器的接口,結合服務器上存儲的 session_key 和 app_id 來解密數據,得到用戶手機號(需要 session_key,所以之前必須調用了 'wx.login')
Page({
getPhoneNumber(e) {
console.log(e.detail.errMsg)
console.log(e.detail.iv)
console.log(e.detail.encryptedData)
// 調用服務器接口
wx.request({
})
}
})
/*
注意:
在回調中調用 wx.login 登錄,可能會刷新登錄態。此時服務器使用 code 換取的 sessionKey 不是加密時使用的 sessionKey,導致解密失敗。
建議開發者提前進行 login;或者在回調中先使用 checkSession 進行登錄態檢查,避免 login 刷新登錄態。
*/
3>返回參數說明
encryptedData - 包括敏感數據在內的完整用戶信息的加密數據
iv - 加密算法的初始向量
encryptedData 解密後的 json 結構爲:
{
"phoneNumber": "13580006666", // 用戶綁定的手機號(國外手機號會有區號)
"purePhoneNumber": "13580006666", // 沒有區號的手機號
"countryCode": "86", // 區號
"watermark": {
"appid": "APPID",
"timestamp": TIMESTAMP
}
}