最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼

 更新時(shí)間:2020年05月28日 11:23:13   作者:_release  
這篇文章主要介紹了Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

今天做了個(gè)分享功能,反正挺詭異的,下面就來(lái)說(shuō)一說(shuō)步驟

后端使用egg.js,代碼如下:

'use strict';

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

class AccessToken extends Subscription {
 static get schedule() {
  return {
   interval: '2h',//2小時(shí)獲取一次
   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;//初始化時(shí)獲得的ticket
  const nonceStr = Math.random()
   .toString(36)
   .substr(2, 15);
  const timestamp = parseInt(new Date().getTime() / 1000);//秒為單位的時(shí)間戳
  let url = this.ctx.query.link; //前端的頁(yè)面地址
  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項(xiàng)目中public目錄下的index.html中引入

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

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

//如果不創(chuàng)建meta標(biāo)簽分享出去的就會(huì)沒(méi)有描述
var oMeta = document.createElement('meta');
oMeta.content = '隨意的內(nèi)容';//這里隨便寫(xiě)
oMeta.name = 'keywords';
document.getElementsByTagName('head')[0].appendChild(oMeta);
var oMeta1 = document.createElement('meta');
oMeta1.content = '隨意的內(nèi)容';//這里隨便寫(xiě)
oMeta1.name = 'description';
document.getElementsByTagName('head')[0].appendChild(oMeta1);

3.initJSSDK方法體:

function initJSSDK() {
  let wechaturl = window.location.href.split('#')[0];//單頁(yè)應(yīng)用就獲取#前面的東西
   let link = encodeURIComponent(wechaturl);
   const jssdk = await getJSSDK(link); //給后端接口傳過(guò)去當(dāng)前頁(yè)面的地址,注意這個(gè)地址要配置在js安全域名里
   wx.ready(() => {
    let shareData = {
     title: this.detail.title,
     desc: this.detail.summary,
     link: location.href, //必須是js安全域名下的地址(分享出去的沒(méi)有圖片顯示請(qǐng)檢查這里的link參數(shù))
     imgUrl: window.wechatImg,//隨意地址的圖片都行,最好是jpg的,經(jīng)測(cè)試無(wú)圖片大小約束
     success: function () {
      console.log(1);
     },
     cancel: function () {
      console.log(2);
     }
    };
    wx.onMenuShareAppMessage(shareData);//分享給好友
    wx.onMenuShareQQ(shareData);//分享給手機(jī)QQ
    wx.onMenuShareQZone(shareData);//分享到QQ空間
    wx.onMenuShareTimeline(shareData);//分享到朋友圈
   });
   wx.error(function (res) {
    console.log(res);
   });
   wx.config({
    debug: true,
    appId: jssdk.appId, // 必填,公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: jssdk.timestamp, // 必填,生成簽名的時(shí)間戳,精確到秒(后端返回)
    nonceStr: jssdk.nonceStr, // 必填,生成簽名的隨機(jī)串(后端返回)
    signature: jssdk.signature, // 必填,簽名(后端返回)
    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone']
   });
}

常見(jiàn)問(wèn)題

無(wú)效的簽名:可能是前端encode地址過(guò)去后,后端忘記解碼了,也有可能是因?yàn)榍岸说刂穫麇e(cuò)了或者沒(méi)有encode就傳過(guò)去了,后端簽名算法出錯(cuò)的機(jī)率比較小.

還有可能是后端的ticket失效了(這個(gè)在開(kāi)發(fā)過(guò)程中機(jī)率比較小)

無(wú)效的domain:前端給后端傳的地址可能沒(méi)有配置在js安全域名中

jssdk版本就用上面的1.4版本,同樣的代碼用了新版的就直接不行了,也沒(méi)有任何報(bào)錯(cuò)。

暫時(shí)沒(méi)有發(fā)現(xiàn)網(wǎng)上所說(shuō)的蘋(píng)果會(huì)出現(xiàn)問(wèn)題。經(jīng)測(cè)試都是好的

到此這篇關(guān)于Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼的文章就介紹到這了,更多相關(guān)Vue公眾號(hào)網(wǎng)頁(yè)分享內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論

德安县| 册亨县| 水城县| 洪洞县| 桐庐县| 贺兰县| 革吉县| 天门市| 搜索| 珠海市| 彰武县| 镇远县| 五常市| 剑河县| 建德市| 江北区| 苏尼特左旗| 肇州县| 南部县| 织金县| 靖边县| 祁门县| 长汀县| 蒙阴县| 苍山县| 建宁县| 莱芜市| 平度市| 安阳市| 呼玛县| 奎屯市| 家居| 巴青县| 栾川县| 赞皇县| 乌鲁木齐县| 绥宁县| 凉山| 江永县| 渭南市| 乾安县|