h5开发中使用JS-SDK,已封装

说明:参数 oType: 是为了区分不同 JS接口列表里面的方法,传进去不同的值(自己定义),可以处理不同的方法,例如:当 oType 为 scan 时,调起微信的扫一扫功能;当 oType 为 location 时,可以获取当前的经纬度。当然,如果项目中只使用到一种JS接口,此参数可以不要。

1. 在项目的utils下创建一个 wxTools.js 文件 (自己想在哪创建就在哪创建)
2. 代码如下:
npm i weixin-js-sdk
import wx from 'weixin-js-sdk'
import { getWxNoncestr } from '@/api/api'  // 获取签名的接口
import { Toast } from 'vant'
export const wxJssdkTools = oType => {
  return new Promise(async (resolve, reject) => {
    let url = ``
    var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if (isIos) {
      url = location.href.split('?')[0]
      //   url = window.jsUrl
    } else {
      url = location.href.split('?')[0]
    }
    Toast.loading({
      duration: 0,
      message: '加载中...',
      forbidClick: true
    })
    const res = await getWxNoncestr({ url })
    Toast.clear()
    wx.config({
      debug: false, // 开启调试模式 true 开启, false 关闭
      appId: res.data.appId, // 必填,公众号的唯一标识
      timestamp: res.data.timestamp, // 必填,生成签名的时间戳
      nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
      signature: res.data.signature, // 必填,签名
      // 必填,需要使用的JS接口列表(根据自己的需求添加进去)
      jsApiList: ['scanQRCode', 'getLocation', 'chooseImage', 'previewImage'], 
      // 可选,需要使用的开放标签列表,例如['wx-open-launch-weapp']
      openTagList: ['wx-open-launch-weapp'] 
    })
    wx.ready(function() {
      // 获取扫码的结果
      if (oType === 'scan') {
        wx.scanQRCode({
          needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
          success: res => {
            resolve(res.resultStr)
          }
        })
      } else if (oType === 'location') {
        // 获取地理位置接口
        wx.getLocation({
          debug: false,
          type: 'wgs84', // 默认为wgs84的gps坐标,火星坐标,可传入'gcj02'
          success: (res) => {
            resolve(res)
          }
        })
      } else if (oType === 'open') {
        // 获取地理位置接口
        resolve('ok')
      }
    })
  })
}
3. 调用 (以获取当前经纬度为例)
 // 获取当前经纬度
 wxJssdkTools('location').then((res) => {
     console.log('当前经纬度', res)
     this.latitude = res.latitude
     this.longitude = res.longitude
 })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值