说明:参数 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
})