微信jssdk邏輯在vue中的使用方法介紹（程式碼範例）

這篇文章帶給大家的內容是關於微信jssdk邏輯在vue中的使用方法介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

微信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 進行示範，其餘類別框架同理。

在微信公眾平台的官方文件中已經指出，由於安全性考慮，需要將簽名邏輯放在後端處理，所以簽名原理不在此贅述，主要講講如何使用後端返回後的簽名呼叫 jssdk。在邏輯層面，由於 wx.config 方法是呼叫任何介面前所必須的，所以我們可以盡可能將其抽離出來單獨放置。

# utils/
.
├── common.js            # 通用函数
└── lib
    └── wechat           # 微信相关代码
        ├── auth         # 微信用户登陆获取信息相关代码
        │   ├── auth.js
        │   └── index.js
        ├── config       # jssdk 初始化相关代码
        │   └── index.js
        ├── helper.js    # 微信相关操作
        └── share        # 分享接口相关代码
            └── 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 的初始化，之後可以進行分享介面的初始化。最初的時候我想分享介面既然是可能對應每一個url 頁面（SPA 應用程式中的view），那麼就應該在view 中使用mixin 混入來書寫，所以產生了第一版實作。

// 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 都有一份微信配置顯得很臃腫，所以第二版實作則是將jssdk 初始化放在vue-router 的beforeEach 鉤子中進行，這樣可以實現分享配置的統一配置，更直觀一些。

// 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 清爽很多，不會有太多業務邏輯以外的程式碼。

以上是微信jssdk邏輯在vue中的使用方法介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！