之前做公众号开发的时候,需求编辑每个页面的分享功能,项目是vue开发的,vue-router用的是hash模式,网上看了很多相关的文章、博客,大致的观点就是每个路由都要进行微信授权,也就是wx.config()操作;
单独路由授权操作
如果只是单独的路由调用,授权时完全没有问题的,代码如下
复制代码
ajax({
url : "",//后端获取相关签名接口
data : {
url : encodeURIComponent(location.href.split("#")[0])//此处传递页面url是因为服务器端使用了代理模式,无法获取请求页面的url,如果没有代理存在,url的获取可以交由后端完成
},
success:res =>{
wx.config({
debug : false, //开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId : res.data.appId, // 必填,公众号的唯一标识
timestamp : res.data.timestamp, // 必填,生成签名的时间戳
nonceStr : res.data.nonceStr, // 必填,生成签名的随机串
signature : res.data.signature,// 必填,签名
jsApiList : [] // 必填,需要使用的JS接口列表
});
}
})
复制代码
所有路由都需要授权
但是如果所有路由都需要授权时,比如分享接口,项目的所有页面都必须支持;这时候就会存在着代码的复用问题,一开始是想着既然所有路由都要配置,我直接在APP.vue里面的watch $route监听路由变化时执行授权操作,但是结果行不通,折腾了半天只能放弃;
后面有想过直接把授权操作放到每个路由的mounted生命周期里面,应该也能实现效果,但是这里存在一个问题,每一次路由的变化都会执行一次ajax请求,所以体验和性能方面可能会比较差;在许多文章和博客里面也都是这样做的;
既然微信官方文档里面说的hash部分的变化不影响页面的授权,我在想vue-router用的是hash模式,那么整个项目除了域名,后面的路由部分应该都算是hash,所以干脆把授权操作放到了index.html里面,直接在index.html里面引入sdk文件,然后进行授权操作,结果授权是通过的; 然后在需要使用的路由页面中调用api接口
mounted(){
//由于index.html里面引入了sdk文件,相当于window上面挂载了以个wx对象,所以此处的wx不需要再引入其他文件
wx.ready(()=>{
let shareData={
title:"分享标题",
desc:"分享内容描述",
link : "", // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl : "", // 分享图标
success : function(){
// 设置成功
}
}
wx.updateAppMessageShareData(shareData);
wx.updateTimelineShareData(shareData);
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareTimeline(shareData);
})
}
复制代码
代码丢到服务器上去了,效果也确实实现了,而且只有一次授权,所有路由都有效果,至于有什么弊端,还请各位大神给点意见,这个问题我也一直没有想明白,既然能一次解决,为什么所有的文章、博客都在说每个路由都要进行一次授权