Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
前言
今天做了個(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 + '×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項(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)容';//這里隨便寫 oMeta.name = 'keywords'; document.getElementsByTagName('head')[0].appendChild(oMeta); var oMeta1 = document.createElement('meta'); oMeta1.content = '隨意的內(nèi)容';//這里隨便寫 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ō)的蘋果會(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)文章希望大家以后多多支持腳本之家!
- 使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記(推薦)
- 使用vue編寫h5公眾號(hào)跳轉(zhuǎn)小程序的實(shí)現(xiàn)代碼
- Vue開(kāi)發(fā)Html5微信公眾號(hào)的步驟
- vue中使用微信公眾號(hào)js-sdk踩坑記錄
- vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)及遇到的坑
- Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(二)
- Vue.js 實(shí)現(xiàn)微信公眾號(hào)菜單編輯器功能(一)
- vue 做移動(dòng)端微信公眾號(hào)采坑經(jīng)驗(yàn)記錄
- 詳解Vue微信公眾號(hào)開(kāi)發(fā)踩坑全記錄
- 巧用Vue.js+Vuex制作專門收藏微信公眾號(hào)的app
- 如何使用vue開(kāi)發(fā)公眾號(hào)網(wǎng)頁(yè)
相關(guān)文章
詳解element-ui設(shè)置下拉選擇切換必填和非必填
這篇文章主要介紹了詳解element-ui設(shè)置下拉選擇切換必填和非必填,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格列表分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格列表分頁(yè)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06Vue-input框checkbox強(qiáng)制刷新問(wèn)題
這篇文章主要介紹了Vue-input框checkbox強(qiáng)制刷新問(wèn)題,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04vue el-table實(shí)現(xiàn)行內(nèi)編輯功能
這篇文章主要為大家詳細(xì)介紹了vue el-table實(shí)現(xiàn)行內(nèi)編輯功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12Vue 權(quán)限控制的兩種方法(路由驗(yàn)證)
這篇文章主要介紹了Vue 權(quán)限控制的兩種方法(路由驗(yàn)證),每種方法給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08vue實(shí)現(xiàn)表格增刪改查效果的實(shí)例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)增刪改查效果的實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07