Vue微信公众号网页分享的示例代码

2023-07-24 02:12:04 338

前言

今天做了个分享功能，反正挺诡异的，下面就来说一说步骤

后端使用egg.js,代码如下：

'usestrict';

constSubscription=require('egg').Subscription;

classAccessTokenextendsSubscription{
staticgetschedule(){
return{
interval:'2h',//2小时获取一次
type:'all',
};
}

asyncsubscribe(){
constconfig=this.ctx.app.config.wechat_config;
consturl='https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET'.replace('APPID',config.appId)
.replace('APPSECRET',config.appSecret);
constres=awaitthis.ctx.curl(url,{
dataType:'json',
});
console.log(res);//accesstoken
if(res.data.errcode){
return;
}
console.log('token'+res.data.access_token);
constjsUrl='https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi'.replace('ACCESS_TOKEN',res.data.access_token);
constjsRes=awaitthis.ctx.curl(jsUrl,{
dataType:'json',
});
console.log('ticket'+jsRes.data.ticket);//ticket
this.ctx.app.ticket=jsRes.data.ticket;
this.ctx.app.access_token=res.data.access_token;
}
}

module.exports=AccessToken;

asyncgetJSsdk(){
constappId=this.ctx.app.config.wechat_config.appId;//appid
constticket=this.ctx.app.ticket;//初始化时获得的ticket
constnonceStr=Math.random()
.toString(36)
.substr(2,15);
consttimestamp=parseInt(newDate().getTime()/1000);//秒为单位的时间戳
leturl=this.ctx.query.link;//前端的页面地址
url=decodeURIComponent(url);//解码
conststring='jsapi_ticket='+ticket+'&noncestr='+nonceStr+'×tamp='+timestamp+'&url='+url;
consthash=crypto.createHash('sha1');
hash.update(string);
constsignature=hash.digest('hex');//生成签名
this.ctx.body={
status:true,
message:'获取成功',
data
};
};

步骤

1.在vue项目中public目录下的index.html中引入

2.在想分享的组件的mounted中加入如下代码:

//如果不创建meta标签分享出去的就会没有描述
varoMeta=document.createElement('meta');
oMeta.content='随意的内容';//这里随便写
oMeta.name='keywords';
document.getElementsByTagName('head')[0].appendChild(oMeta);
varoMeta1=document.createElement('meta');
oMeta1.content='随意的内容';//这里随便写
oMeta1.name='description';
document.getElementsByTagName('head')[0].appendChild(oMeta1);

3.initJSSDK方法体：

functioninitJSSDK(){
letwechaturl=window.location.href.split('#')[0];//单页应用就获取#前面的东西
letlink=encodeURIComponent(wechaturl);
constjssdk=awaitgetJSSDK(link);//给后端接口传过去当前页面的地址，注意这个地址要配置在js安全域名里
wx.ready(()=>{
letshareData={
title:this.detail.title,
desc:this.detail.summary,
link:location.href,//必须是js安全域名下的地址(分享出去的没有图片显示请检查这里的link参数)
imgUrl:window.wechatImg,//随意地址的图片都行，最好是jpg的，经测试无图片大小约束
success:function(){
console.log(1);
},
cancel:function(){
console.log(2);
}
};
wx.onMenuShareAppMessage(shareData);//分享给好友
wx.onMenuShareQQ(shareData);//分享给手机QQ
wx.onMenuShareQZone(shareData);//分享到QQ空间
wx.onMenuShareTimeline(shareData);//分享到朋友圈
});
wx.error(function(res){
console.log(res);
});
wx.config({
debug:true,
appId:jssdk.appId,//必填，公众号的唯一标识
timestamp:jssdk.timestamp,//必填，生成签名的时间戳，精确到秒(后端返回)
nonceStr:jssdk.nonceStr,//必填，生成签名的随机串(后端返回)
signature:jssdk.signature,//必填，签名(后端返回)
jsApiList:['onMenuShareAppMessage','onMenuShareTimeline','onMenuShareQQ','onMenuShareQZone']
});
}

常见问题

无效的签名:可能是前端encode地址过去后，后端忘记解码了，也有可能是因为前端地址传错了或者没有encode就传过去了，后端签名算法出错的机率比较小.

还有可能是后端的ticket失效了(这个在开发过程中机率比较小)

无效的domain：前端给后端传的地址可能没有配置在js安全域名中

jssdk版本就用上面的1.4版本，同样的代码用了新版的就直接不行了，也没有任何报错。

暂时没有发现网上所说的苹果会出现问题。经测试都是好的

到此这篇关于Vue微信公众号网页分享的示例代码的文章就介绍到这了,更多相关Vue公众号网页分享内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

Vue微信公众号网页分享的示例代码

热门推荐

随机推荐