引用微信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, '扫描结果')
});
四、目录结构
标签：支付宝,JSSDK,微信,JS,res,引入 来源： https://blog.csdn.net/yml15180824993/article/details/122824132
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。