VUE 使用 JSSDK 实现分享
最近在学习微信公众平台的开发所以也碰到了一些问题，单单是在Vue里引入JSSDK都有坑
先引入JSSDK
npm install weixin-jsapi --save
npm install weixin-js-sdk --save
封装成一个share.js方便调用
import wx from 'weixin-jsapi'
import Vue from 'vue'
/**
*
* @param {*} url location.href
* @param {*} data {title : '',desc : ''} title分享显示标题 desc分享显示内容
*/
function share (url , data) {
let baseUrl = encodeURIComponent(url.split('#')[0]) // 当前打开页面的URL # 之前的
const parmas = new URLSearchParams()
parmas.append('redirectedUrl', baseUrl)
Vue.prototype.$http({ // 使用了axios
method: 'post',
url: '/testReq', // 后台接口
data: parmas
})
.then(res => {
let Data = res.data.config // 后台数据
wx.config({
debug: false, // 开启调试模式,开发时可以开启(开启后会alert出信息)
appId: Data.appid, // 必填，公众号的唯一标识由接口返回
timestamp: Data.timestamp, // 必填，生成签名的时间戳 由接口返回
nonceStr: Data.nonceStr, // 必填，生成签名的随机串 由接口返回
signature: Data.signature, // 必填，签名 由接口返回
jsApiList: ['onMenuShareAppMessage'] // 此处填你所用到的方法
})
wx.ready(() => {
wx.onMenuShareAppMessage({
title: data.title, // 分享标题
desc: data.desc, // 分享描述
link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl:
'http://imageqiniuyun.lvxiaoluo.com/0845e322-77a0-4abd-a7bd-37cbe26d3e27.png', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
alert('分享成功')
},
cancel: function () {
alert('取消分享')
}
})
})
})
.catch(err => {
console.log(err)
})
}
export {share}
后面我碰到了一个报错是 "errMsg": "invalid signature"
可以对着JSSDK文档查看后台的签名算法是否正确
没错的话可以把数据输出到控制台检验
校验signature是否和网页上的一致
最后发现出问题的是那个url 前端给的时候需要使用encodeURIComponent封装
后台接收到之后再decode
传的URL必需是调用JSSDK接口的页面路径
