vue微信公众号网页api封装

第一步安装微信sdk

https://www.npmjs.com/package/weixin-sdk-js

 npm i -S weixin-sdk-js

第二步新建weapi.js文件

import wx from 'weixin-js-sdk'
import * as api from '../api/interface'// 自己后台的api请求封装
export function sdk() {
        // 这里是因为有多个公众号所以用appcode做区分
       let appcode = VueCookies.get("appcode") ? VueCookies.get("appcode") : "510100";
       return new Promise(function(resolve, reject) {
           // 页面地址授权
           api.requestAll("get", "getJsApi", {'appcode': appcode,'url': location.href.split("#")[0]}).then(res => {
               store.commit("setApi")
               wx.config({
                   debug     : false,                 // 调试模式
                   appId     : res.data.appid,          // 必填，公众号的唯一标识
                   timestamp : res.data.timestamp,      // 必填，生成签名的时间戳
                   nonceStr  : res.data.nonceStr,       // 必填，生成签名的随机串
                   signature : res.data.signature,      // 必填，签名，见附录1
                   jsApiList : [
                       'checkJsApi',
                       'updateTimelineShareData',
                       'updateAppMessageShareData',
                       'hideAllNonBaseMenuItem',
                       'showAllNonBaseMenuItem',
                       'openLocation',  
                       'getLocation',
                   ]
               });
               wx.ready(function() {
                   resolve(wx)
               })
           })
       })
    },

第三步在mian.js中引入

import wxapi from './api/wxapi.js'
Vue.prototype.$wxapi = wxapi

使用

this.$wxapi.sdk().then(wx => {
    wx.hideAllNonBaseMenuItem();
    wx.getLocation({
        type: "gcj02",
        success: (res) => {
            this.initMarker = [res.longitude, res.latitude]
            this.mapCenter = [res.longitude, res.latitude]
            this.initMap()
        },
        cancel: (res) => {
            alert('用户拒绝授权');
       },
       fail: (res) => {
           alert(JSON.stringify(res));
       },
   });
})