引用微信JSSDK与支付宝JSSDK

文章目录

• 引用微信JSSDK与支付宝JSSDK
• 前言
• 一、浏览器判断
• 二、微信JSSDK引入
• • 2.1 绑定域名
  • 2.2 引入JS文件
  • 2.3 通过config接口注入权限验证配置
  • 2.4 使用扫一扫功能
• 三、支付宝JSSDK引入
• • 3.1 引入JS文件
  • 3.2 使用支付宝扫一扫功能
• 四、目录结构

---

前言

要做一个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