Vue如何实现微信公众号网页分享

这篇文章主要讲解了Vue如何实现微信公众号网页分享，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

创新互联建站长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为顺昌企业提供专业的成都网站制作、做网站，顺昌网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

前言

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

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

'use strict';

const Subscription = require('egg').Subscription;

class AccessToken extends Subscription {
 static get schedule() {
  return {
   interval: '2h',//2小时获取一次
   type: 'all',
  };
 }

 async subscribe() {
  const config = this.ctx.app.config.wechat_config;
  const url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET'.replace('APPID', config.appId)
   .replace('APPSECRET', config.appSecret);
  const res = await this.ctx.curl(url, {
   dataType: 'json',
  });
  console.log(res);//accesstoken
  if (res.data.errcode) {
   return;
  }
  console.log('token ' + res.data.access_token);
  const jsUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi'.replace('ACCESS_TOKEN', res.data.access_token);
  const jsRes = await this.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;

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

步骤

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

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

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

3.initJSSDK方法体：

function initJSSDK() {
  let wechaturl = window.location.href.split('#')[0];//单页应用就获取#前面的东西
   let link = encodeURIComponent(wechaturl);
   const jssdk = await getJSSDK(link); //给后端接口传过去当前页面的地址，注意这个地址要配置在js安全域名里
   wx.ready(() => {
    let shareData = {
     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如何实现微信公众号网页分享
新闻来源：http://cqcxhl.com/article/piodjj.html

重庆分公司，新征程启航

Vue如何实现微信公众号网页分享

其他资讯