微信jssdk邏輯在vue中的運(yùn)用詳解
微信 jssdk 在 vue 中的簡(jiǎn)單使用
import wx from 'weixin-js-sdk'; wx.config({ debug: true, appId: '', timestamp: , nonceStr: '', signature: '', jsApiList: [] }); wx.ready(() => { // do something... }); wx.error((err) => { // do something... });
以上是微信官方給出的示例代碼,但是對(duì)于實(shí)際項(xiàng)目使用,還需要進(jìn)一步對(duì)代碼進(jìn)行封裝。本文基于 vue 進(jìn)行示范,其余類框架同理。
在微信公眾平臺(tái)的官方文檔中已經(jīng)指出,由于安全性考慮,需要將簽名邏輯放在后端處理,所以簽名原理不在此贅述,主要講講如何使用后端返回后的簽名調(diào)用 jssdk。在邏輯層面,由于 wx.config 方法是調(diào)用任何接口前所必須的,所以我們可以盡可能將其抽離出來(lái)單獨(dú)放置。
# utils/ . ├── common.js # 通用函數(shù) └── lib └── wechat # 微信相關(guān)代碼 ├── auth # 微信用戶登陸獲取信息相關(guān)代碼 │ ├── auth.js │ └── index.js ├── config # jssdk 初始化相關(guān)代碼 │ └── index.js ├── helper.js # 微信相關(guān)操作 └── share # 分享接口相關(guān)代碼 └── index.js
import sdk from 'weixin-js-sdk'; export function initSdk({ appid, timestamp, noncestr, signature, jsApiList }) { // 從后端獲取 sdk.config({ debug: process.env.VUE_APP_ENV !== 'production', appId: appid, timestamp: timestamp, nonceStr: noncestr, signature: signature, jsApiList: jsApiList }); }
這樣就可以完成對(duì) jssdk 的初始化,之后可以進(jìn)行分享接口的初始化。最初的時(shí)候我想分享接口既然是可能對(duì)應(yīng)每一個(gè) url 頁(yè)面(SPA 應(yīng)用中的 view),那么就應(yīng)該在 view 中使用 mixin 混入來(lái)書寫,所以產(chǎn)生了第一版實(shí)現(xiàn)。
// example.vue export default { name: 'example', wechatShareConfig() { return { title: 'example', desc: 'example desc', imgUrl: 'http://xxx/example.png', link: window.location.href.split('#')[0] }; } }
// wechatMixin.js import { share } from '@/utils/lib/wechat/share'; // 獲取 wechat 分享接口配置 function getWechatShareConfig(vm) { const { wechatShareConfig } = vm.$options; if (wechatShareConfig) { return typeof wechatShareConfig === 'function' ? wechatShareConfig.call(vm) : wechatShareConfig; } } const wechatShareMixin = { created() { const wechatShareConfig = getWechatShareConfig(this); if (wechatShareConfig) { share({ ...wechatShareConfig }); } } }; export default wechatShareMixin;
// utils/lib/wechat/share import { getTicket } from '@/utils/lib/wechat/helper'; // 簽名接口 import { initSdk } from '@/utils/lib/wechat/config'; import sdk from 'weixin-js-sdk'; // 接口清單 const JS_API_LIST = ['onMenuShareAppMessage', 'onMenuShareTimeline']; // 消息分享 function onMenuShareAppMessage(config) { const { title, desc, link, imgUrl } = config; sdk.onMenuShareAppMessage({ title, desc, link, imgUrl }); } // 朋友圈分享 function onMenuShareTimeline(config) { const { title, link, imgUrl } = config; sdk.onMenuShareTimeline({ title, link, imgUrl }); } export function share(wechatShareConfig) { if (!wechatShareConfig.link) return false; // 簽名驗(yàn)證 getTicket(wechatShareConfig.link).then(res => { // 初始化 `jssdk` initSdk({ appid: res.appid, timestamp: res.timestamp, noncestr: res.noncestr, signature: res.signature, jsApiList: JS_API_LIST }); sdk.ready(() => { // 初始化目標(biāo)接口 onMenuShareAppMessage(wechatShareConfig); onMenuShareTimeline(wechatShareConfig); }); }); }
寫完之后乍一看似乎沒(méi)什么毛病,但是每個(gè) view 文件夾下的 .vue 都有一份微信配置顯得很是臃腫,所以第二版實(shí)現(xiàn)則是將 jssdk 初始化放在 vue-router 的 beforeEach 鉤子中進(jìn)行,這樣可以實(shí)現(xiàn)分享配置的統(tǒng)一配置,更加直觀一些。
// router.js //... routes: [ { path: '/', component: Example, meta: { wechat: { share: { title: 'example', desc: 'example desc', imgUrl: 'https://xxx/example.png' } } } } ] //... // 初始化分享接口 function initWechatShare (config) { if (config) { share(config); } } router.beforeEach((to, from, next) => { const { shareConfig } = to.meta && to.meta.wechat; const link = window.location.href; if (!shareConfig) next(); initWechatShare({ ...shareConfig, link }); switchTitle(shareConfig.title); // 切換標(biāo)題 next(); });
這樣一來(lái),會(huì)顯得 .vue 清爽很多,不會(huì)有太多業(yè)務(wù)邏輯之外的代碼。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3中unplugin-auto-import自動(dòng)引入示例代碼
unplugin-auto-import 這個(gè)插件是為了解決在開(kāi)發(fā)中的導(dǎo)入問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue3中unplugin-auto-import自動(dòng)引入的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02vue中實(shí)現(xiàn)點(diǎn)擊變成全屏及縮放功能
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊變成全屏及縮放功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08Vue 實(shí)現(xiàn)可視化拖拽頁(yè)面編輯器
這篇文章主要介紹了Vue 實(shí)現(xiàn)可視化拖拽頁(yè)面編輯器的方法,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2021-02-02element-ui 表格數(shù)據(jù)時(shí)間格式化的方法
這篇文章主要介紹了element-ui 表格數(shù)據(jù)時(shí)間格式化的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08解決vue中修改export default中腳本報(bào)一大堆錯(cuò)的問(wèn)題
今天小編就為大家分享一篇解決vue中修改export default中腳本報(bào)一大堆錯(cuò)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件實(shí)例代碼
頁(yè)面中會(huì)有很多時(shí)候需要彈窗提示,我們可以寫一個(gè)彈窗組件,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12