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" //上传照片
       ]
});