最核心的一個概念:
小程序的webview(H5頁面)中調(diào)用jssdk中的功能(比如獲取位置信息),需要有一個和小程序申請主體一致的公眾號賬號,在公眾號里去配置相關的jssdk信息.
1 小程序賬號
因為webview不支持個人類型,所以需要申請一個企業(yè)法人及個體工商戶類型的小程序賬號
2?公眾號賬號
要求小程序和公眾號的賬號對應的主體信息必須一致,有兩種途徑達到此目的:
先申請公眾號賬號,然后通過公眾號的快速生成小程序功能,生成步驟1的小程序賬號,這樣這兩個自然滿足同主體資格
登錄微信公眾號平臺顷窒，點擊小程序管理-添加-快速注冊并認證小程序:
用和申請小程序賬號完全一致的主體信息去申請公眾號(主體類型,主體名稱,主體證件號),也能保證兩個賬號的主體資格一致(目前沒有小程序快速生成公眾號賬號的功能..)
3 域名綁定
這里需要兩個賬號都配置一下:
業(yè)務域名
首先webview指向一個外部網(wǎng)頁鏈接(我們的H5頁面)
<web-view src="https://abc.xxx.com.cn/cc/index.html"></web-view>
這個地址要滿足:
已經(jīng)通過ICP備案域名
https協(xié)議
不支持自定義端口
不支持ip地址
不支持短鏈域名
那么首先要在小程序中的'開發(fā)'-'開發(fā)設置'的'業(yè)務域名'中,將https://abc.xxx.com.cn配置進去:
JS接口安全域名
在上述h5頁面中,因為要調(diào)用jssdk的js文件:
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
因此要在公眾號設置”的“功能設置”里填寫“JS接口安全域名”
注意:以上兩個配置地址時,都需要將配置時提供的一個文本文件按照要求上傳到H5頁面所在服務器并確保能被訪問,用于騰訊驗證服務器,否則是無法提交相關信息的
4 應用
jssdk提供了很多功能,但是webview中,只支持部分接口,自行查看web-view,這里以獲取位置信息為例:
通過config接口注入權(quán)限驗證配置
所有需要使用JSSDK的頁面必須先注入配置信息钝满，否則將無法調(diào)用:
wx.config({
appId: '', // 必填趋距，公眾號的appid,注意不是小程序的appid
timestamp: , // 必填而晒，生成簽名的時間戳
nonceStr: '', // 必填鸦难，生成簽名的隨機串
signature: '',// 必填珍语，簽名
debug: true, // 選填,開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來强衡。
jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表,這里為獲取位置信息
});
以上參數(shù)除了最后兩個,建議在后臺服務中存儲和計算,具體需參考jssdk,主要思路:
利用公眾號的appid和secret去獲取access_token
利用access_token去獲取ticket
利用ticket和自行生成的(timestamp,nonceStr,當前頁面的地址)計算出最終的簽名
執(zhí)行getLocation
以上步驟執(zhí)行成功后,方可執(zhí)行wx.getLocation:
var success=true
// 之所以這里有個success變量,是因為發(fā)現(xiàn)wx.error觸發(fā)也會調(diào)用wx.ready(如果有個wx.success就好了)
//但其實這并不完美,因為還發(fā)現(xiàn)有時候wx.ready先執(zhí)行,然后觸發(fā)了wx.error ........
wx.ready(function(){
if(success){
wx.getLocation({
type: 'wgs84',
success(res) {
// res為坐標位置信息
},
fail(e) {
// 獲取失敗
}
})
}
// config信息驗證后會執(zhí)行ready方法
});
wx.error(function(res){
success=false
// config信息驗證失敗會執(zhí)行error函數(shù)
});
吐槽:
wx.config有時候成功,有時候說簽名失敗
wx.ready代表配置驗證完畢了,不代表驗證成功了,那他的意義在于什么
reference:
jssdk:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
web-view:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
