微信 jssdk 邏輯在 vue 中的運用

2022-09-18 14:12:17 字數 1905 閱讀 5032

import wx from 'weixin-js-sdk';

wx.config();

wx.ready(() => );

wx.error((err) => );

```# utils/

.├── common.js # 通用函式

└── lib

│   ├── auth.js

│   └── index.js

├── config # jssdk 初始化相關**

│   └── index.js

└── share # 分享介面相關**

└── index.js

```

import sdk from 'weixin-js-sdk';

sdk.config();

}

這樣就可以完成對jssdk的初始化,之後可以進行分享介面的初始化。最初的時候我想分享介面既然是可能對應每乙個url頁面(spa應用中的view),那麼就應該在view中使用mixin混入來書寫,所以產生了第一版實現。

// example.vue

export default ;

}}

// wechatmixin.js

import from '@/utils/lib/wechat/share';

// 獲取 wechat 分享介面配置

function getwechatshareconfig(vm) = vm.$options;

if (wechatshareconfig)

}const wechatsharemixin = );

}}};

export default wechatsharemixin;

// utils/lib/wechat/share

import from '@/utils/lib/wechat/helper'; // 簽名介面

import from '@/utils/lib/wechat/config';

import sdk from 'weixin-js-sdk';

// 介面清單

// 訊息分享

const = config;

}// 朋友圈分享

function onmenusharetimeline(config) = config;

sdk.onmenusharetimeline();

}export function share(wechatshareconfig) );

sdk.ready(() => );

});}

// router.js

//...

routes: [}}

}]//...

// 初始化分享介面

function initwechatshare (config)

}router.beforeeach((to, from, next) => = to.meta && to.meta.wechat;

const link = window.location.href;

if (!shareconfig) next();

initwechatshare();

switchtitle(shareconfig.title); // 切換標題

next();

});

這樣一來,會顯得.vue清爽很多,不會有太多業務邏輯之外的**。

微信 jssdk 邏輯在 vue 中的運用

import wx from weixin js sdk wx.config wx.ready wx.error err import sdk from weixin js sdk sdk.config 這樣就可以完成對jssdk的初始化,之後可以進行分享介面的初始化。最初的時候我想分享介面既然是可...

在 Vue 中實現企業微信 JS SDK 的呼叫

專案的準備工作直接上 第一部分 export function initwxconfig const getticket newpromise resolve,reject then res let signstr for let item in params signstr signstr.sub...

vue專案中微信jssdk在ios簽名失敗

1.使用hash路由 使用hash路由時安卓ios都是沒問題的,這也是官方的建議。2.history路由裡使用 簡單暴力使用a標籤去跳轉簽名的頁面,也就是說a b,在b頁面做簽名的話,在a頁面的跳轉方式不用vue路由跳轉,改用a標籤跳轉,這個時候獲取到的url是可以簽名的。但是因為我們使用的是a標籤...