微信公众号引入使用微信JS-SDK
-
一定要确定JS安全域名已经配置,不然会报错 导致config 配置不成功
-
引入JS-SDK
npm install weixin-js-sdk --save
-
挂载引入JS-SDK
全局挂载
import wx from 'weixin-js-sdk' Vue.prototype.$wx = wx
局部引入(单个使用页面引入)
data(){ return { wx:null // 建议在data中声明一个全局变量, 可在当前页面中一次声明多次使用 } } onLoad(){ this.wx = require('weixin-js-sdk'); }
-
配置wx.config
onLoad(){ // 这里使用的是全局设置的变量 this.wx = require('weixin-js-sdk'); // 配置config之前需要把当前页面地址传给后台,获取config中需要的参数 // 当前页面地址一定是要动态获取 var localUrl = location.href.split('#')[0] uni.request({ url:' http://www.baidu.con', // 请求后台的地址 data:{ pageUrl:localUrl , // 向后台传递的url 注意url 传递不正确配置config时会出现签名错误 }, header: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' }, method: 'POST', sslVerify: true, success:(res)=>{ // 获取到后台返回的配置参数之后进行配置 this.wx.config({ debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来 appId: res.data.appId, // 必填,公众号的唯一标识 timestamp: res.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.signature,// 必填,签名 jsApiList: ['getLocation', 'scanQRCode'] // 必填,需要使用的 JS 接口列表 }); // 配置成功执行 this.wx.ready(()=>{ // 需要直接加载的api 需要在这里调用 不然会报错 需要条件触发的api 可在其他函数中自行调用 }) // 配置失败调用 this.wx.error((err)=>{ // 微信config 配置是失败后执行,可在此打印查看错误报告 console.log(err) }) } }) }
-
使用JS-SDK中的api
// 页面加载调用需要在his.wx.ready() 中调用, 同上面所诉 methods:{ // 在其他函数中使用 // 点击按钮获取当前位置的经纬度 // 注意页面中所有使用的spi 都需要在配置config的时候配置 jsApiList: ['getLocation', 'scanQRCode'] LocationFun(){ var _this = this this.wx.getLocation({ type: 'wgs84', success:(res)=>{ console.log('获取到的经纬度',res) // 在这个函数中再次使用api是一定要注意this指向问题 最好的解决方法就是在触发时声明保存this _this.wx.scanQRCode({ needResult: 1, scanType: ["qrCode", "barCode"], success:(res2)=>{ console.log('扫码获取到的数据',res2) } }) } }) } } ```.
补充说明
- ios 端使用的时候会出现配置失败的情况
- 原因是为啥 ios 的路由地址和 android 获取到的地址是有区别,就是因为这个才导致配置失败
ios引入jssdk配置失败解决方法
- App.vue
// 首先判断一下区分一下 ios 和 android
// 如果是ios就是把第一次进来的路由地址保存到本地
// 后面配置jssdk的时候拿出来使用
onLaunch: function () {
if (uni.getSystemInfoSync().platform == "ios") {
uni.setStorageSync('url', window.location.href)
}
}
- 需要配置jssdk的页面中拿出使用
// 首先判断一下区分一下 ios 和 android
if(uni.getSystemInfoSync().platform == "android") {
// android执行
// android正常执行获取路由就行
pageUrl = location.href.split('#')[0] || window.location.href
}else {
// ios执行
// 拿出在App.vue中存到本地的地址使用
pageUrl = uni.getStorageSync('url') // 注意替换成自己的域名地址
}
// pageUrl 就是上面代码中传给后台获取配置参数的地址