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) //获取地址信息
}

 

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值