您當前位置>首頁 » 新聞資(zī)訊 » 公衆号相關(guān) >
uniapp 微信公衆号H5掃碼功能
發表時間:2020-10-9
發布人:葵宇科技
浏覽次數:88
uniapp 不支持H5掃碼功能 所以需要調用微信的SDK
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2
第一步 先下(xià)載sdk文(wén)件,然後引入 index.js文(wén)件 也可(kě)以放在components方法裡
npm install jweixin-module --save
第二步 調接口返回config配置信息
//在onload 中(zhōng)調用,找後台要接口!!!
var apiUrl = location.href.split("#")[0]
uni.request({
url: api.api.getJsSdkConfig,
data: {
url: apiUrl,//當前頁面的域名
api: ['scanQRCode'],//調用的方法去接口列表裡找
},
success: function(res) {
var wxData = JSON.parse(res.data.data.config)
that.wx_sanCode(wxData)
}
})
//掃碼
wx_sanCode: function(wxData) {
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可(kě)以在pc端打開,參數信息會通(tōng)過log打出,僅在pc端時才會打印。
appId: wxData.appId, // 必填,公衆号的唯一标識
timestamp: wxData.timestamp, // 必填,生成簽名的時間戳
nonceStr: wxData.nonceStr, // 必填,生成簽名的随機串
signature: wxData.signature, // 必填,簽名
jsApiList: wxData.jsApiList // 必填,需要使用的JS接口列表
})
wx.ready(function() {
// config信息驗證後會執行ready方法,所有接口調用都必須在config接口獲得結果之後,config是一個(gè)客戶端的異步操作,所以如(rú)果需要在頁面加載時就調用相關(guān)接口,則須把相關(guān)接口放在ready函數中(zhōng)調用來确保正确執行。對于用戶觸發時才調用的接口,則可(kě)以直接調用,不需要放在ready函數中(zhōng)。
wx.checkJsApi({
jsApiList: ['scanQRCode'], // 需要檢測的JS接口列表,所有JS接口列表見附錄2,
success: function(res) {
console.log('返回信息')
console.log(res)
// 以鍵值對的形式返回,可(kě)用的api值true,不可(kě)用為false
// 如(rú):{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
});
wx.error(function(res){
// config信息驗證失敗會執行error函數,如(rú)簽名過期導緻驗證失敗,具體錯誤信息可(kě)以打開config的debug模式查看,也可(kě)以在返回的res參數中(zhōng)查看,對于SPA可(kě)以在這裡更新簽名。
console.log(res,'接口驗證失敗')
});
}
然後就是點擊事件乎起掃碼功能
//掃碼
bindsaoQRcode:function(){
wx.scanQRCode({
needResult: 1, // 默認為0,掃描結果由微信處理,1則直接返回掃描結果,
scanType: ["qrCode","barCode"], // 可(kě)以指定掃二維碼還是一維碼,默認二者都有
success: function (res) {
console.log(res);
console.log('掃碼')
var result = res.resultStr; // 當needResult 為 1 時,掃碼返回的結果
window.location.href = result //安卓機型跳轉渲染有問(wèn)題 所以要加這句
}
});
},