最近入職的公司主要做微信端的h5，所以在所難免要引用sdk。雖然官方文檔寫(xiě)的還算清楚，但是還是有坑。

1.在index.html中 引入微信sdk

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2.在assets/js 下新建文件 wx.js

export default { wxShowMenu: function (that,sign='') {  let url = window.location.href.split('#')[0]  that.$http.post('/xxx', //請(qǐng)求你們公司后臺(tái)的接口 獲取相關(guān)的配置   that.$getSingQuery({    appKey: 'xxx',    url   }))   .then(res => {    var getMsg = res.data.data;    // console.log('微信配置----------')    // console.log(res.data)    wx.config({     debug: false, //生產(chǎn)環(huán)境需要關(guān)閉debug模式  測(cè)試環(huán)境下可以設(shè)置為true 可以在開(kāi)發(fā)者工具中查看問(wèn)題     appId: getMsg.appid, //appId通過(guò)微信服務(wù)號(hào)后臺(tái)查看     timestamp: getMsg.timestamp, //生成簽名的時(shí)間戳     nonceStr: getMsg.noncestr, //生成簽名的隨機(jī)字符串     signature: getMsg.sign, //簽名     jsApiList: [ //需要調(diào)用的JS接口列表      'updateAppMessageShareData', //自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容（1.4.0） 新接口      'updateTimelineShareData', //自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內(nèi)容（1.4.0） 老接口      'onMenuShareTimeline', //分享到朋友圈 老接口      'onMenuShareAppMessage',//分享給盆友 老接口      'getLocation' //獲取定位     ]    });    wx.error(function (res) {     // alert(JSON.stringify(res))     console.log(res)     // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。    });    wx.ready(function () {     if(sign=='location'){ //由于 獲取定位往往是頁(yè)面一加載 就提示獲取地理位置 所以可以直接在寫(xiě)在 wx.ready      wx.getLocation({       type: 'wgs84', // 默認(rèn)為wgs84的gps坐標(biāo)，如果要返回直接給openLocation用的火星坐標(biāo)，可傳入'gcj02'       success: function (res) {        var latitude = res.latitude; // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90        var longitude = res.longitude; // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。        var speed = res.speed; // 速度，以米/每秒計(jì)        var accuracy = res.accuracy; // 位置精度        that.latitude=res.latitude;        that.longitude=res.longitude;        that.geocodeRegeo()//逆地理編碼 調(diào)用你vue實(shí)例里的方法        do something...       }      });     }    });   })   .catch(error => {    alert(error)    console.log(error)   }) }}

3.在main.js 將WXConfig綁在vue原型上 這樣哪個(gè)頁(yè)面需要初始化 直接通過(guò)原型就可以拿到

import WXConfig from './assets/js/wx' //微信分享Vue.prototype.WXConfig = WXConfig