每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用历史的路由模式,配置微信分享又遇到了很多问题,最后终于解决了,现将解决的过程分享一下。
<>强技术要点
Vue、历史
<强>常见问题及说明
调试模式下报假
这个没得说,就是调用wx.config方法的参数错误造成的,请确认以下事项:
<李>是否成功绑定了域名(域名校验文件要能被访问到)
<李>使用最新的js-sdk文件,因为微信会改部分api李
<李>配置方法的参数是否传正确了(拼写错误,大小写…)
<李>需要使用的方法是否写在了jsApiList中李
<李>获取签名的url需要decodeURIComponent李
<李>后台的生成签名的加密方法需要对照官方文档
<强>调试返回好,分享不成功
<李>确保代码拼写正确李
<李>分享链接域名或路径必须与当前页面对应的公众号JS安全域名一致李
<李>接口调用需要放在wx.ready方法中李
<强>单页项目(SPA)中的一些要点
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web应用程序可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web应用程序的页面会导致签名失败,此问题会在Android6.2中修复)。
上面那段话摘自官方文档
开发者需要注意的事项:
<李> android和ios需要分开处理李
<李>需要在页url面变化的时候重新调用wx.config方法,android获取签名的url就传window.location.href李
<李> Vue项目在切换页面时,IOS中浏览器的url并不会改变,依旧是第一次进入页面的地址,所以IOS获取签名的url需要传第一次进入的页面url李
路由器/index.js
……
从“@进口{wechatAuth}/共同/wechatConfig.js”;
……
const路由器=new路由器({
模式:“历史”,
基地:process.env.BASE_URL,
路线:[
{
路径:“/?
名称:“家”,
元:{
标题:“首页”,
showTabbar:没错,
allowShare:真
},
},
{
路径:“/购物车”,
名称:“购物车”,
元:{
标题:“购物车”,
showTabbar:真
},
组件:()=比;导入(“。/视图/车/index.vue”)
}
……
]
});
路由器。afterEach((,)=比;{
让authUrl=" $ {window.location.origin} $ {to.fullPath} ';
让allowShare=! ! to.meta.allowShare;
如果(! ! window.__wxjs_is_wkwebview) {//IOS
如果窗口。entryUrl==" | |窗口。entryUrl==未定义){
窗口。entryUrl=authUrl;//将后面的参数去除
}
wechatAuth (authUrl ios, allowShare);
其他}{//安卓
setTimeout(函数(){
wechatAuth (authUrl,“android”, allowShare);
},500);
}
});
之前
代码要点:
<李>元中的allowShare用于判断页面是否可分享李
<李> window.__wxjs_is_wkwebview可用来判断是否是微信IOS浏览器李
<李> entryUrl是项目第一次进入的页面的地址,将其缓存在窗口对象上李
<李>为什么安卓的时候要增加一个延时器,因为安卓会存在一些情况,就是即便签名成功,但是还是会唤不起功能,这个貌似是一个比较稳妥的解决办法
wechatConfig.js
进口http“. ./api/http”;
从“. ./商店/进口商店商店”;
设备,出口const wechatAuth=异步(authUrl allowShare)=比;{
让shareConfig={
标题:“xx一站式服务平台”,
描述:“xxxx”,
链接:allowShare & # 63;authUrl: window.location.origin,
imgUrl: window.location。起源+”/share.png”
}；
让authRes=等待http。get ("/pfront/wxauth/jsconfig”, {
参数:{
url: decodeURIComponent(设备==" ios " & # 63;窗口。entryUrl authUrl):
}
});
如果(authRes,,authRes。代码==101){
wx.config ({//调试:没错,
appId: authRes.data.appId,
时间戳:authRes.data.timestamp,
nonceStr: authRes.data.nonceStr,
签名:authRes.data.signature,
jsApiList:(“updateAppMessageShareData”、“updateTimelineShareData”,“onMenuShareAppMessage”、“onMenuShareTimeline”)
});
wx.ready(()=比;{
wx.updateAppMessageShareData ({
标题:shareConfig.title,
描述:shareConfig.desc,
链接:shareConfig.link,
imgUrl: shareConfig.imgUrl,
成功:函数(){//设置成功//shareSuccessCallback ();
}
});
wx.updateTimelineShareData ({
标题:shareConfig.title,
链接:shareConfig.link,
imgUrl: shareConfig.imgUrl,
成功:函数(){//设置成功//shareSuccessCallback ();
}
});
wx.onMenuShareTimeline ({
标题:shareConfig.title,
链接:shareConfig.link,
imgUrl: shareConfig.imgUrl,
成功:函数(){
shareSuccessCallback ();
}
});
wx.onMenuShareAppMessage ({
标题:shareConfig.title,
描述:shareConfig.desc,
链接:shareConfig.link,
imgUrl: shareConfig.imgUrl,
成功:函数(){
shareSuccessCallback ();
}
});
});
}
}；
函数shareSuccessCallback () {
如果(! store.state.user.uid) {
返回错误;
}
store.state.cs.stream ({
开斋节:“共享”,
tpc:“所有”,
数据:{
uid: store.state.user.uid,
truename: store.state.user。truename | |”“
}
});
http。get ("/pfront/会员/share_score”, {
参数:{
uid: store.state.user.uid
}
});
}
