uni-app在vue3中对接微信JSSDK

meng_xiaoxiao

已于 2022-10-19 11:45:42 修改

阅读量5.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签：微信 uni-app

于 2022-10-19 09:29:11 首次发布

本文链接：https://blog.csdn.net/meng_xiaoxiao/article/details/127383182

本文介绍了如何在Vue项目中通过npm引入微信jssdk，从引入到获取授权信息并初始化的过程，包括getWxSignature函数和公众后台配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：引入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,