微信公众号引入使用微信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 就是上面代码中传给后台获取配置参数的地址