記錄下vue中使用微信接口,後續用到一種功能就更新一種,養成寫日記的習慣。
大神們有更好的寫法的話還請分享分享~
微信接口依賴(wx-js-sdk)
安裝微信js-sdk:
npm install weixin-js-sdk -S
可以增加公共sdk.js文件用於配置config校驗
import wx from 'weixin-js-sdk'//微信sdk依賴
import axios from 'axios'
const jsApiList = ["hideOptionMenu",'hideMenuItems']//要用到的微信API列表
function getJSSDK(url) {
axios.post('後臺獲取簽名接口',{
params:{
// url:encodeURIComponent(url) //和後臺定義路徑參數是否要編碼
url:url
}
).then(res => {
wx.config({
debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時纔會打印。
appId: res.appId, // 必填,公衆號的唯一標識
timestamp: res.timestamp, // 必填,生成簽名的時間戳
nonceStr: res.noncestr, // 必填,生成簽名的隨機串
signature: res.signature, // 必填,簽名
jsApiList: jsApiList // 必填,需要使用的JS接口列表
})
wx.error(function (res) {
// alert("微信驗證失敗");
});
})
}
export default {
// 暴露JSSDK方法
getJSSDK: getJSSDK
}
使用
在需要的頁面中引入
import sdk from '../../commonJS/sdk'; //引入sdk.js
import wx from 'weixin-js-sdk';
在mounted
中執行或者調用封裝的方法
sdk.getJSSDK('#之前的路徑地址')
wx.ready(function () {
wx.hideOptionMenu();//隱藏右上角按鈕裏面的功能按鈕
/*wx.hideMenuItems({
menuList: [
"menuItem:share:qq",
"menuItem:favorite",
"menuItem:share:QZone",
"menuItem:share:email"
] // 指定要隱藏的菜單項,只能隱藏“傳播類”和“保護類”按鈕,所有menu項見附錄3
});*/
//分享給朋友(即將廢棄)
/*wx.onMenuShareAppMessage({
title: 'shareTitle',
desc: 'shareDesc',
link: 'shareLink',
imgUrl:'shareImg',
trigger: function trigger(res) { },
success: function success(res) {
// alert('已分享');
},
cancel: function cancel(res) {
// alert('已取消');
},
fail: function fail(res) {
// alert(JSON.stringify(res));
}
});*/
})
關於即將廢棄接口以及其他接口說明,詳細 官網文檔:js-sdk說明文檔
可以使用 微信開發者工具 查看相關的權限信息
待更新~