微信分享官方API
我是自己分开写的js文件 share.js

import wx from 'weixin-js-sdk'


export function getShareInfo(fxUrl) { //如果分享的内容会根据情况变化,那么这里可以传入分享标题及url
     //请求接口获得appId 签名 签名时间戳 还有签名的随机串
	this.$http.request({
			url: 'akt-web-auth/share-jssdk/get-share-info',
			data: {
				jsurl: fxUrl
			}
		})
		.then(res => {
			console.log(res.data);
			// localStorage.setItem("jsapi_ticket", res.jsapi_ticket);
			//拿到后端给的这些数据
			let appId = res.data.result.appId;
			let timestamp = res.data.result.timestamps;
			let nonceStr = res.data.result.nonceStr;
			let signature = res.data.result.sign;
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
				appId: appId, // 必填,公众号的唯一标识,填自己的!
				timestamp: timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
				nonceStr: nonceStr, // 必填,生成签名的随机串
				signature: signature, // 必填,签名,
				jsApiList: [
					'updateAppMessageShareData',
					'updateTimelineShareData'
				]
			})
			wx.ready(function(e) {
				//分享给朋友
				wx.updateAppMessageShareData({
					title: '偷偷告诉你,《安全生产考试真题》练3天就通过,马上开始真题练习', // 分享时的标题
					desc: '一比一国家题库真题,立刻点击了解……',
					link: 'http://akt.jianxiangtech.com/anktWeb', // 分享时的链接
					imgUrl: 'http://akt.jianxiangtech.com/aktImg/logo.png', // 分享时的图标
					success: function() {
						console.log("分享成功");
					},
					cancel: function() {
						console.log("取消分享");
					}
				});
				//分享给朋友圈
				wx.updateTimelineShareData({
					title: '偷偷告诉你,《安全生产考试真题》练3天就通过,马上开始真题练习',
					desc: '一比一国家题库真题,立刻点击了解……',
					link: 'http://akt.jianxiangtech.com/anktWeb',
					imgUrl: 'http://akt.jianxiangtech.com/aktImg/logo.png',
					success: function() {
						console.log("分享成功");
					},
					cancel: function() {
						console.log("取消分享");
					}
				});
			})
		})
}

我全局挂载了一下方法 在main.js里

import {getShareInfo} from '' //引用上面的share.js文件
Vue.prototype.$share = getShareInfo;

使用方法

//this.$share(获取当前页面的url地址传给后台,share.js文件中的fxUrl就是接收的这个参数)
this.$share(location.href.split('#')[0])

示例是这样的:
在这里插入图片描述
ps:如果你遇到安卓或者IOS签名不对

1、首先与后台确定签名是否是对的

2、确定授权方式进入首页有没有进行多次重定向(我就是遇到多次重定向导致IOS分享签名报错) 因为IOS的SPA是不会自动刷新的 安卓的SPA是会自动刷新的 而且就算你打印出来或者alert出来都是对的 但是签名就是无效或者错误

3、如果还是不对 检查自己传给后台的url是不是对的

我目前就遇到了这几个问题 如果想多传几个参数那就自己在fxUrl后面加参数传递就好

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐