欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信jssdk邏輯在vue中的運用詳解

 更新時間:2018年11月14日 09:38:56   作者:Trevor  
這篇文章主要介紹了微信jssdk邏輯在vue中的運用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

微信 jssdk 在 vue 中的簡單使用

import wx from 'weixin-js-sdk';

wx.config({
 debug: true,
 appId: '',
 timestamp: ,
 nonceStr: '',
 signature: '',
 jsApiList: []
});

wx.ready(() => {
 // do something...
});

wx.error((err) => {
 // do something...
});

以上是微信官方給出的示例代碼,但是對于實際項目使用,還需要進一步對代碼進行封裝。本文基于 vue 進行示范,其余類框架同理。

在微信公眾平臺的官方文檔中已經(jīng)指出,由于安全性考慮,需要將簽名邏輯放在后端處理,所以簽名原理不在此贅述,主要講講如何使用后端返回后的簽名調(diào)用 jssdk。在邏輯層面,由于 wx.config 方法是調(diào)用任何接口前所必須的,所以我們可以盡可能將其抽離出來單獨放置。

# 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
 });
}

這樣就可以完成對 jssdk 的初始化,之后可以進行分享接口的初始化。最初的時候我想分享接口既然是可能對應(yīng)每一個 url 頁面(SPA 應(yīng)用中的 view),那么就應(yīng)該在 view 中使用 mixin 混入來書寫,所以產(chǎn)生了第一版實現(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;

 // 簽名驗證
 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(() => {
   // 初始化目標接口
   onMenuShareAppMessage(wechatShareConfig);
   onMenuShareTimeline(wechatShareConfig);
  });
 });
}

寫完之后乍一看似乎沒什么毛病,但是每個 view 文件夾下的 .vue 都有一份微信配置顯得很是臃腫,所以第二版實現(xiàn)則是將 jssdk 初始化放在 vue-router 的 beforeEach 鉤子中進行,這樣可以實現(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); // 切換標題
 next();
});

這樣一來,會顯得 .vue 清爽很多,不會有太多業(yè)務(wù)邏輯之外的代碼。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3中unplugin-auto-import自動引入示例代碼

    vue3中unplugin-auto-import自動引入示例代碼

    unplugin-auto-import 這個插件是為了解決在開發(fā)中的導(dǎo)入問題,下面這篇文章主要給大家介紹了關(guān)于vue3中unplugin-auto-import自動引入的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • vue中實現(xiàn)點擊變成全屏及縮放功能

    vue中實現(xiàn)點擊變成全屏及縮放功能

    這篇文章主要介紹了vue中實現(xiàn)點擊變成全屏及縮放功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • Vue 實現(xiàn)可視化拖拽頁面編輯器

    Vue 實現(xiàn)可視化拖拽頁面編輯器

    這篇文章主要介紹了Vue 實現(xiàn)可視化拖拽頁面編輯器的方法,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2021-02-02
  • vue項目如何刪除無用的依賴詳解

    vue項目如何刪除無用的依賴詳解

    vue是目前非常流行的前端開發(fā)框架,隨著技術(shù)的不斷更新,我們也需要更新我們的vue項目,這篇文章主要給大家介紹了關(guān)于vue項目如何刪除無用的依賴的相關(guān)資料,需要的朋友可以參考下
    2024-09-09
  • vant實現(xiàn)購物車功能

    vant實現(xiàn)購物車功能

    這篇文章主要為大家詳細介紹了vant實現(xiàn)購物車功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • element-ui 表格數(shù)據(jù)時間格式化的方法

    element-ui 表格數(shù)據(jù)時間格式化的方法

    這篇文章主要介紹了element-ui 表格數(shù)據(jù)時間格式化的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • Vue之過濾器詳解

    Vue之過濾器詳解

    這篇文章主要為大家介紹了Vue之過濾器,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助,希望能夠給你帶來幫助
    2021-11-11
  • 解決vue中修改export default中腳本報一大堆錯的問題

    解決vue中修改export default中腳本報一大堆錯的問題

    今天小編就為大家分享一篇解決vue中修改export default中腳本報一大堆錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析

    vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析

    這篇文章主要介紹了vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • vue實現(xiàn)自定義"模態(tài)彈窗"組件實例代碼

    vue實現(xiàn)自定義"模態(tài)彈窗"組件實例代碼

    頁面中會有很多時候需要彈窗提示,我們可以寫一個彈窗組件,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)自定義"模態(tài)彈窗"組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2021-12-12

最新評論