Vue微信公眾號網頁分享的示例程式碼

阿新 • • 發佈：2020-05-29

前言

今天做了個分享功能，反正挺詭異的，下面就來說一說步驟

後端使用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,});
  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 + '&timestamp=' + 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中引入

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

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公眾號網頁分享內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！