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

微信公众号引入使用微信JS-SDK

微信公众号引入使用微信JS-SDK

补充说明

ios引入jssdk配置失败解决方法

猜你喜欢