這篇文章帶給大家的內容是關於微信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中文網其他相關文章！
