vue中使用wx-js-sdk相關

記錄下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說明文檔
可以使用 微信開發者工具 查看相關的權限信息

待更新~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章