场景
Vue获取JSSDK授权以便在微信浏览器,或者嵌在小程序里面做些小事情,如朋友/朋友圈分享,微信支付,图片上传下载等
步骤一 配置安全域名:
在微信公众平台对应的公众号设置里面配上相应的JS接口安全域名(开发者需要有对应的权限)
步骤二 引入JS文件:
在需要调用接口的页面引入JS文件,我直接使用npm包'jweixin-module'
(npm install --save jweixin-module
),
所有使用JSSDK的页面都要进行config配置,不过同一个URL只需要调用一次就可以了,如果有多个,则每次URL变化的时候调用一次即可.
# 在vue的main.js引入'jweixin-module', 全局调用wx接口
import wx from 'jweixin-module'
Vue.prototype.$wx = wx
步骤三 获取相应的配置信息:
传入需要配置的URL,通过后台获取到相应的信息,对应的配置上去即可. URL可以通过window.location.href.split('#')[0]获取,并且使用encodeURIComponent编码(因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败)
# 需要可以远程访问的URL
var url = encodeURIComponent(window.location.href.split('#')[0])
步骤四 通过config接口注入权限验证配置:
//需要配置的页面,也可以在APP.vue直接设置,别的框架在相应的位置即可
getJsConfig(url) {
http.getJsConfig({ url }).then(res => {
this.$wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,如果是在PC上打开的话会直接打印log。
appId: res.appId, // 必填,公众号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature, // 必填,签名
jsApiList: [
"updateAppMessageShareData", //分享给朋友
"updateTimelineShareData", //分享给朋友圈
] // 必填,需要使用的JS接口列表,可参考官方文档可授权的接口
});
});
}
步骤五 配置微信分享:
所有的接口都需要在config配置成功后调用,如果是交互式的出发相应接口库,可以不用放在ready方法中;如果是在页面一加载就调用的接口库方法就可以放在ready方法中,因为在config配置完成后就会去执行ready方法.
that.$wx.ready(() => {
that.$wx.updateAppMessageShareData({
title: '分享的标题',
desc: '分享描述',
link: '分享的链接', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '分享图标'
})
that.$wx.updateTimelineShareData({
title: '分享的标题',
link: '分享的链接',
imgUrl: '分享图标'
})
})
总结:
更多的接口和调用可以在微信开放文档里面查看,做相应的配置即可,总的来说不是很麻烦