如何在vue中使用微信jssdk邏輯-創(chuàng)新互聯(lián)

這篇文章主要為大家詳細(xì)介紹了如何在vue中使用微信jssdk邏輯，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，發(fā)現(xiàn)的小伙伴們可以參考一下：

創(chuàng)新互聯(lián)2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元肥城做網(wǎng)站,已為上家服務(wù),為肥城各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

JS是什么

JS是JavaScript的簡(jiǎn)稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果，讓網(wǎ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)用任何接口前所必須的，所以我們可以盡可能將其抽離出來單獨(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 頁面（SPA 應(yīng)用中的 view），那么就應(yīng)該在 view 中使用 mixin 混入來書寫，所以產(chǎn)生了第一版實(shí)現(xiàn)。

// example.vue
export default {
 name: 'example',

 wechatShareConfig() {
  return {
   title: 'example',
   desc: 'example desc',
   imgUrl: 'https://cache.yisu.com/upload/information/20200622/114/32657.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);
  });
 });
}

寫完之后乍一看似乎沒什么毛病，但是每個(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://cache.yisu.com/upload/information/20200622/114/32665.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();
});

以上就是創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司小編為大家收集整理的如何在vue中使用微信jssdk邏輯，如何覺得創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司網(wǎng)站的內(nèi)容還不錯(cuò)，歡迎將創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司網(wǎng)站推薦給身邊好友。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享名稱：如何在vue中使用微信jssdk邏輯-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://muchs.cn/article42/cdsihc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、微信小程序、外貿(mào)建站、定制開發(fā)、網(wǎng)站設(shè)計(jì)、Google

聲明：本網(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í)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容