vue-cli 中使用微信公衆號接口 jssdk

官方提供的JS接口列表連接:

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

第一步：下載包 weixin-js-sdk

npm i weixin-js-sdk 
或者
yarn add weixin-js-sdk

第二步：在main.js中引入

import wx from 'weixin-js-sdk'

第三步：掛載到Vue上

Vue.prototype.$wx = wx

第四步：在App.vue中初始化配置，這裏的 appId、timestamp、nonceStr、signature都是由後臺生成的，返回給前端後填寫。

//請求後臺接口獲取參數( appId timestamp nonceStr signature)
this.$wx.config({
       debug: false, //生產環境須要關閉debug模式

       appId:appId, //appId經過微信服務號後臺查看

       timestamp:timestamp, //生成簽名的時間戳

       nonceStr:nonceStr, //生成簽名的隨機字符串

       signature:signature, //簽名

       jsApiList: [
                //須要調用的JS接口列表
           "checkJsApi",
           "onMenuShareTimeline", //分享給好友
           "onMenuShareAppMessage", //分享到朋友圈 
           "chooseImage", //拍照
           "uploadImage" //上傳照片
       ]
});