在Vue项目中使用微信js-sdk

2024-03-20 13:57:58

第一步、安装jssdk的库

npm install weixin-js-sdk -S

第二部、挂载到全局

jssdk后续可能会在项目的多个页面中使用到，这里为了方便使用把它挂载到Vue的原型上

import Vue from "vue"
import jssdk from "weixin-js-sdk"
//将sdk挂载到原型
Vue.prototype.$wx = jssdk
//如果有使用开放标签需要在此次设置，忽略vue的警告
Vue.config.ignoredElements = ['wx-open-launch-app', 'wx-open-launch-weapp']

第三步、配置SDK

在主页中配置SDK

//index.vue

//微信js-sdk配置参数
let config = {
	// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出
	// debug: true, 
	appId: 'wx_xxxxxxxxxx', // 必填，公众号的唯一标识
	timestamp: "1621361063790", // 必填，生成签名的时间戳
	nonceStr: "sign_xxxxxxxxx", // 必填，生成签名的随机串
	signature: "sign", // 必填，签名
	jsApiList: ['wx-open-launch-weapp','updateAppMessageShareData'], // 必填，需要使用的JS接口列表
	openTagList: [ 'wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
};
//配置SDK
that.$wx.config(config);

配置成功，失败回调

config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中

that.$wx.ready(function() {
	console.log("js-sdk配置成功！");
	//分享给好友
	that.$wx.updateAppMessageShareData({
		title: share_title, // 分享标题
		desc: share_desc, // 分享描述
		link: share_link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		imgUrl: share_cover, // 分享后显示的封面图
		success: function() {}，// 设置成功回调
	});
});
// 
/**
*通过error接口处理失败验证
*config信息验证失败会执行error函数，如签名过期导致验证失败，
*具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
*对于SPA可以在这里更新签名
*/
that.$wx.error(function(res) {
	console.log('config信息验证失败', res);
});

使用开放标签

有时业务需要在H5页跳转到小程序，这是我们可以使用微信提供的开放标签,在这里以跳转小程序为例

1、配置

在配置sdk时加入需要使用的开放标签，

that.$wx.config(
{
	openTagList: [ 'wx-open-launch-weapp'],
	..........
}
);

2、在vue项目使用时需要使用一下的方式

<wx-open-launch-weapp username="小程序原始id" path="要跳转到的小程序页面" @ready="按钮加载好后触发">
	<script type="text/wxtag-template">
		<style>
				.btn {
					display: block;
					width: 100%;
					height: 100%;
					background-color: red;
					}
		</style>
		<button class="btn">
			跳转到小程序
		</button>
	</script>
</wx-open-launch-weapp>

官方文档

这里只是简单使用，还有其他详细的用法，请参考官方文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

码农公寓