這篇文章主要介紹微信jssdk邏輯在vue中的使用案例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

只為您設(shè)計(jì)更接底氣、較有營(yíng)銷力的好網(wǎng)站，將營(yíng)銷策劃與網(wǎng)頁(yè)設(shè)計(jì)互相結(jié)合的專業(yè)機(jī)構(gòu)，成都全網(wǎng)營(yíng)銷公司中較早掌握HTML5建站技術(shù)的機(jī)構(gòu)。一個(gè)好的品牌網(wǎng)站設(shè)計(jì)，不能只是一張名片，茫茫網(wǎng)海，想要快速吸引到您客戶的眼球，必須全方位的展現(xiàn)出企業(yè)突出的優(yōu)勢(shì)，以求達(dá)到主動(dòng)營(yíng)銷的效果，最終促成成交！

微信 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: '/file/tupian/20230213/404.html',
      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: '/file/tupian/20230213/404.html'
        }
      }
    }
  }
]
//...

// 初始化分享接口
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ù)邏輯之外的代碼。

以上是微信jssdk邏輯在vue中的使用案例的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

文章題目：微信jssdk邏輯在vue中的使用案例-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://www.rwnh.cn/article2/epgic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、網(wǎng)站內(nèi)鏈、標(biāo)簽優(yōu)化、小程序開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)