Vue调用微信sdk,实现获取地理位置经纬度，支付等

在vue项目中引入jssdk，微信为了方便用户使用，将官方的jssdk发布到了npm上，有一个叫weixin-js-sdk的，但我们需要使用的不是这个，网上很多在vue中引用的是这个，但是这个是为commonjs发布的版本，只能通过require引入，很多人发现在vue中引入import wx from ‘weixin-js-sdk’，console.log(wx)会出现undefined，实际为了方便es6使用，官方发布了一个weixin-jsapi，这个才是我们能在vue中引用的jssdk。

1在vue中安装  weixin-jsapi 

npm install weixin-jsapi --save-dev  或者  cnpm install weixin-jsapi

2 until文件夹下创建WXUntil.js

import wx from "weixin-jsapi";


import { getJSSDK } from '@/api/wx/index';//获取appid信息的接口,以后台人员接口为准
import { payorders } from "@/api/appointment/index";//一个更具订单id获取appid的接口


const wxUtils = () => {
  return new Promise((resolve, reject) => {
    getJSSDK().then(async data => {
      await wx.config({
        debug: false, // TODO: 测试阶段使用
        appId: data.appid,
        timestamp: data.timestamp,
        nonceStr: data.nonceStr,
        signature: data.signature,
        jsApiList: [
          'getLocation',
          'hideMenuItems'
        ]
      });
      wxReady(resolve)
    }).catch(error => {
      reject();
      console.log(error);
    })
  })
}
// 微信jssdk加载完成
const wxReady = resolve => {  //不让分享
  wx.ready(() => {
    wx.hideMenuItems({
      menuList: [
        'menuItem:share:timeline', // 分享给朋友圈
        'menuItem:share:qq', // 分享到QQ
        'menuItem:share:weiboApp', // 分享到Weibo
        'menuItem:favorite', // 收藏
        'menuItem:share:QZone', // 分享到 QQ 空间
        'menuItem:copyUrl', // 复制链接
        'menuItem:openWithQQBrowser', // 在QQ浏览器中打开
        'menuItem:openWithSafari', // 在Safari中打开
        'menuItem:share:email', // 邮件
        'menuItem:readMode', // 阅读模式
        'menuItem:originPage' // 原网页
      ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
    });
    resolve();
  });
};
// 微信支付
const WXinvoke = (orderId, resolve) => {  //orderId 订单ID
  payorders({ orderId: orderId }).then(res => {
    wx.invoke(
      'getBrandWCPayRequest', {
        "appId": res.appId, // 公众号名称，由商户传入
        "timeStamp": res.timestamp, // 时间戳，自1970年以来的秒数
        "nonceStr": res.nonceStr, // 随机串
        "package": res.package,
        "signType": res.signType, // 微信签名方式：
        "paySign": res.signature // 微信签名
      },
      function (res) {
        setTimeout(function () {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            resolve()
          }
        }, 500);
      }
    );
  })


}

// 获取地理位置
const getLocation = () => {
  return new Promise((resolve, reject) => {
    wx.getLocation({
      type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
      success: response => {
        resolve(response);
      },
      fail: err => {
        reject(err);
      }
    });
  });
};
export { getLocation, WXinvoke };
export default wxUtils;

3调用方式

import {WXinvoke} from "@/utils/wxUtils"

以支付为例子

buyOrderFn({orderId}={}){//付款
    WXinvoke(orderId,()=>{
        console.log("支付成功")
    })
},

获取地理位置

import {getLocation} from "@/utils/wxUtils"

async getLocationFn(){
    let data=await getLocation()
    console.log(data) //获取地址信息
}