vue引入微信jssdk,完美实现

1.安装SDK

npm install weixin-js-sdk --save

2.微信分享的封装工具类(wxShare.js)

/* eslint-disable */
import Vue from 'vue';
import wx from 'weixin-js-sdk';
//存储服务器授权链接 
const jsSDKAuth = 'XXX/wx_jssign_package.json'; 
//存储各个链接的签名信息
const signMap = new Map(); 
// 设置默认的分享信息,因为如分享图、请求授权项、隐藏授权项等基本不变,此处设置直接引用,避免使用时繁琐设置
const defaultWxShareConfig = { 
	title: "分享标题(通常是动态的)", 
	desc: '分享描述(通常是动态的)',
	link: location.href,
	imgUrl: '分享图片(通常是128*128的logo)',
	jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems', 'closeWindow'],
	hideMenuList: ['menuItem:editTag', 'menuItem:delete', 'menuItem:originPage', 'menuItem:readMode','menuItem:openWithQQBrowser', 'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:share:brand']
} 
//存储临时的分享信息
const wxShareConfig = {
	
}

const wxShare = {
    //各个页面加载后,调用此方法,传入的参数config是对象,其属性参考defaultWxShareConfig
	updateWxShareConfig(config = {}) {
		wxShareConfig.title = config.title || defaultWxShareConfig.title;
		wxShareConfig.desc = config.desc || defaultWxShareConfig.desc;
        wxShareConfig.link = config.link || defaultWxShareConfig.link;
		wxShareConfig.imgUrl = config.imgUrl || defaultWxShareConfig.imgUrl;
        wxShareConfig.jsApiList = config.jsApiList || defaultWxShareConfig.jsApiList;
        wxShareConfig.hideMenuList = config.hideMenuList || defaultWxShareConfig.hideMenuList;
        //微信中二次分享的处理,截取到有效的分享链接
		var authUrl = wxShareConfig.link.split("#")[0];
		authUrl = authUrl.split("?")[0];
        //判断是否已经签名了
		if (signMap.has(authUrl)) {
			this._wxConfigJSSDK(signMap.get(authUrl), wxShareConfig);
		} else {
			this._wxShareAuth(authUrl);
		}

	},

    //从服务器获取某分享链接的签名信息,并存储起来
	_wxShareAuth(authUrl) {
        //此处我使用的是自己封装的网络请求方法
		const promise = Vue.http.get(jsSDKAuth + "?url=" + encodeURIComponent(authUrl));
		promise.then(res => {
            //此处请根据各自的服务器返回数据文档进行操作
			if (res.data.code == 200) {
				//分享链接授权签名信息
				const sign = res.data.data;
				signMap.set(authUrl, sign);
				this._wxConfigJSSDK(sign);
			}
		});
		promise.catch((err) => {
			console.log(err.response);
		})
	},

    //将签名信息更新到微信的SDK中
	_wxConfigJSSDK(shareSign) {
		wx.config({
			debug: false,
			appId: shareSign.appId,
			timestamp: shareSign.timestamp,
			nonceStr: shareSign.nonceStr,
			signature: shareSign.signature,
			jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
		})
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
		wx.ready(function() {
		    const {title,desc,link,imgUrl} = wxShareConfig;
			wx.onMenuShareAppMessage({
			    title,
				desc,
				link,
				imgUrl,
				success: function() {
					console.log("分享成功");
				},
				fail: function() {
					console.log("分享失败");
				},
				cancel: function() {
					console.log("取消分享");
				}
			})
			wx.onMenuShareTimeline({
				title,
				link,
				imgUrl,
				success: function() {
					console.log("分享成功");
				},
				cancel: function() {
				    console.log("取消分享");
				}
			})
			
		});
				  
		// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。	
		wx.error(function(res) {
			console.log("分享失败: error", res);
		});
		
	}
}
//导出工具类
export default wxShare;
//将工具类添加到Vue静态方法方便调用
Vue.prototype.$wxShare = wxShare;

3.调用方式

1)mian.js中引入:import './utils/wxShare';

2)页面中调用:

//页面加载完成后调用
activated() {
	var _this = this;
	_this.uuid = _this.$route.query.uuid;
	var shareUrl = global.BASE_SHARE_URL + 'grade?uuid=' + _this.uuid;
	this.$wxShare.updateWxShareConfig({
        title:'标题',
        desc: '简介',
        link: shareUrl
    });
}

 

  • 2
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
要在Vue2中接入微信公众号JSSDK,您需要按照以下步骤进行操作: 1. 在公众号后台配置JS接口安全域名,确保您的域名已经添加到了微信公众平台的安全域名列表中。 2. 安装使用`weixin-js-sdk`库,可以通过npm进行安装: ``` npm install weixin-js-sdk ``` 3. 在需要使用JSSDK的组件或页面中引入`weixin-js-sdk`库: ```javascript import wx from 'weixin-js-sdk'; ``` 4. 在组件或页面的`mounted`生命周期钩子函数中初始化JSSDK,并进行相关配置: ```javascript mounted() { this.initWeChatJSSDK(); }, methods: { initWeChatJSSDK() { // 异步请求后端接口获取微信配置信息 axios.get('/api/getWeChatConfig') .then(response => { const { appId, timestamp, nonceStr, signature } = response.data; wx.config({ debug: false, appId, timestamp, nonceStr, signature, jsApiList: ['chooseImage', 'scanQRCode'] // 需要使用的JSSDK接口 }); wx.ready(() => { // JSSDK配置成功后的回调函数 console.log('JSSDK配置成功'); }); wx.error((res) => { // JSSDK配置失败后的回调函数 console.error('JSSDK配置失败', res); }); }) .catch(error => { console.error('获取微信配置信息失败', error); }); } } ``` 5. 在需要使用JSSDK的地方调用对应的接口,比如选择图片接口`chooseImage`: ```javascript methods: { chooseImage() { wx.chooseImage({ count: 1, success: function (res) { // 选择图片成功后的处理逻辑 const localIds = res.localIds; // ... }, fail: function (error) { // 选择图片失败后的处理逻辑 console.error('选择图片失败', error); } }); } } ``` 以上是在Vue2中接入微信公众号JSSDK的基本步骤,您可以根据实际需求进行相应的配置和调用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无物勿吾

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值