引用微信JSSDK与支付宝JSSDK
文章目录
前言
要做一个H5页面，需具有扫一扫功能、微信支付、支付宝支付等功能，因各种原因使用了uniapp，然后我又选择了引用支付宝与微信SDK来实现
一、浏览器判断
需要判断是在微信还是支付宝扫码的，然后进行支付
let en = window.navigator.userAgent
this.platform = /MicroMessenger/.test(en) ? 'wechat' : /AlipayClient/.test(en) ? 'alipay' : 'other'
二、微信JSSDK引入
官方文档
主要是通过以下三步来引入
2.1 绑定域名
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。不设置的话无法验证通过。
2.2 引入JS文件
到官方文档下载JS文件（支持https）：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js，引入到自己的项目中。
在需要调用JS接口的页面引入JS文件
const wx = require('../../js/jweixin')
2.3 通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用）
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
向后端请求配置信息
// 微信JDK配置
async getConfig() {
console.log('开始配置', location.href, this.platform)
await uni.request({
url: `${baseUrl}/wechatConfig`,
method: 'GET',
data: {
url: location.href
},
success: (res) => {
let data = res.data.data;
wx.config({
debug: true,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: ["scanQRCode", "chooseWXPay"]
});
wx.ready(() => {
console.log('验证成功')
});
wx.error((res) => {
console.log('验证失败')
});
},
fail: (res) => {
this.HMmessages.show('获取配置信息失败', {
icon: 'error',
fontColor: "#ff0000"
});
}
})
},
2.4 使用扫一扫功能
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: (res) => {
let scanResults = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
console.log(scanResults, ‘扫码返回的结果’)
},
fail: (res) => {
this.HMmessages.show('扫描二维码失败', {
icon: 'error',
fontColor: "#ff0000"
});
}
});
三、支付宝JSSDK引入
官方文档
支付宝相对微信来说要简单很多，引入后就可以直接使用，无需配置。
3.1 引入JS文件
到官方文档下载JS文件，引入到自己的项目中，然后在需要的页面引入即可。
const ap = require('../../js/alipay')
3.2 使用支付宝扫一扫功能
ap.scan((res)=> {
let scanResults = res.code;
console.log(scanResults, '扫描结果')
});