uniapp 封裝? 微信? 支付寶 與app端? 的掃一掃

const scan_btn = function(that) { // #ifdef H5let ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == 'micromessenger') {//微信console.log("微信")that.$commonjs.wechat_scan(that)}if (ua.match(/AlipayClient/i) == 'alipayclient') {//支付寶console.log("支付寶")var AlipayJSBridge=window.AlipayJSBridgeAlipayJSBridge.call('scan', {type: 'qr'}, function(result) {if(result.error){that.$commonjs.tipshow(that, result.error, 'error')}else{that.$commonjs.getjiexidevice(that,result.codeContent);}});}if (ua.match(/AlipayClient/i) != 'alipayclient' && ua.match(/MicroMessenger/i) != 'micromessenger') {that.$commonjs.tipshow(that, "請在微信 支付寶 app中使用掃一掃", 'error')}// #endif// #ifndef H5uni.scanCode({success: function(res) {console.log(res.result)that.$commonjs.getjiexidevice(that,res.result)},fail:function(res) {console.log('scanCode_fail',res)},});// #endif }, const wechat_scan=function(that){ var jweixin=require('@/components/jweixin-module/lib/index.js')let ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == 'micromessenger') {let url = location.href.split('#')[0] // 測試要到線上測試！后臺域名要配置！不然會報簽名錯誤。that.$apiconfig.getWechatConfig({data: {signurl: url}}).then(res => {if (res.statusCode != 200) {that.$commonjs.tipshow(that, '網絡請求錯誤' + res.statusCode, 'error')}if (res.statusCode == 200) {if (res.data.code == "0") {that.$commonjs.tipshow(that, res.data.msg, 'error')}if (res.data.code == "1") {let wx_co = res.data.data// 通過config接口注入權限設置，config信息由后端提供jweixin.config({debug: false, // 是否開啟調試模式appId: wx_co.appId, // 必填，公眾號的唯一標識timestamp: wx_co.timestamp, // 必填，生成簽名的時間戳nonceStr: wx_co.nonceStr, // 必填，生成簽名的隨機串signature: wx_co.signature, // 必填，簽名，見附錄1jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2});// config 信息嚴重失敗會執行該函數jweixin.error(function (err) {alert("錯誤信息:" + JSON.stringify(err));}); jweixin.scanQRCode({needResult: 1, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，desc: 'scanQRCode desc',success: function(res) {console.info('點擊掃描按鈕res...',res)var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果that.$commonjs.getjiexidevice(that,result)},fail(err){console.info('點擊掃描按鈕err...',err)}});}}})}}module.exports = {scan_btn,wechat_scan }

添加到common.js中

在main.js中引入

import commonjs from '@/js_sdk/common.js' Vue.prototype.$commonjs = commonjs;

調用

this.$commonjs.scan_btn(this)

其他：微信掃一掃需要去后端獲取配置，需按照自己實際情況修改

?

jweixin.config({debug: false, // 是否開啟調試模式appId: wx_co.appId, // 必填，公眾號的唯一標識timestamp: wx_co.timestamp, // 必填，生成簽名的時間戳nonceStr: wx_co.nonceStr, // 必填，生成簽名的隨機串signature: wx_co.signature, // 必填，簽名，見附錄1jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2});

總結

以上是生活随笔為你收集整理的uniapp 封装微信支付宝web端扫一扫的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。