uni-app在vue3中对接微信JSSDK

import wx from "weixin-js-sdk"，挂载到全局app.config.globalProperties.$wx=wx;第三步：获取JSSDK在网页中的授权信息及初始化JSSDK，授权信息是后台发返回的。在项目的终运行命令：npm i weixin-js-sdk 如下图。在APP.vue里面调用getWxSignature。第二步，在项目人口文件导入微信jssdk。第一步：引

meng_xiaoxiao

4723人浏览 · 2022-10-19 09:29:11

meng_xiaoxiao · 2022-10-19 09:29:11 发布

第一步：引入jssdk

在项目的终运行命令：npm i weixin-js-sdk 如下图

第二步，在项目人口文件导入微信jssdk

import wx from "weixin-js-sdk"，挂载到全局app.config.globalProperties.$wx=wx;

第三步：获取JSSDK在网页中的授权信息及初始化JSSDK，授权信息是后台发返回的

const url =process.env.VUE_APP_BASE_URL+ "/v1/auth/jssdk?url=";
export function getWxSignature(context,jsApiList) {
	uni.request({
		url: url+location.href.split('#')[0],//当前页面路劲
		method: 'GET',
		success: res => init(context, res,jsApiList),
		fail: () => context.message.error("获取微信签名失败")
	});
}
// 接口列表
export const wxapis={
	scanQRCode:"scanQRCode"
}

function init(context, e,jsApiList) {
	const { data: { data } } = e	
	context.$wx.config({
		debug: false,
		appId: data.appId,
		timestamp: data.timestamp,
		nonceStr: data.nonceStr,
		signature: data.signature,
		jsApiList: jsApiList
	});
	context.$wx.ready(function() {
		console.log("接口开通成功");
	});
}

在组件里面调用getWxSignature

<script>
	import { getWxSignature, wxapis } from "@/utils/initWechatJSSDK.js"
	export default {
		    onLoad(param) {
	        getWxSignature(this, [wxapis.scanQRCode])
        }
	}
</script>

公众后台配置：