UNI-APP使用微信SDK(微信H5)

npm方式使用下方指令进行安装

npm install jweixin-module --save  
在项目中引用

为了方便使用,我单独出一个微信相关的 js 文件,进行相关的初始化等操作。
wechat.js 「该文件我放置在项目共用目录,可以根据自己情况选择」

//自己封装的 uni.request
import http from '@/common/api'
var jweixin = require('jweixin-module');


export default {
	/* 判断是否在微信中 */
	isWechat: function() {
		var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/micromessenger/i) == 'micromessenger') {
			//console.log('是微信客户端')  
			return true;
		} else {
			//console.log('不是微信客户端')  
			//以下是我项目中所需要的操作其他,可以自定义
			uni.showModal({
				title: '提示',
				content: '请在微信浏览器中打开',
				showCancel: false,
				success: function(res) {
					if (res.confirm) {
						// console.log('用户点击确定');
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
			return false;
		}
	},
	/* 获取sdk初始化配置 */
	initJssdk: function(callback) {
		//获取当前url然后传递给后台获取授权和签名信息  
		var url = encodeURIComponent(window.location.href.split('#')[0]); 

		http.get({
			url: 'getJsSdkInfo', //请求sdk配置接口地址  
			data: {
				url: url
			},
		}).then(res => {
			//返回需要的参数appId,timestamp,noncestr,signature等
			//注入config权限配置  
			const { data } = res.data;
			jweixin.config({
				debug: data.debug,
				appId: data.appId,
				timestamp: data.timestamp,
				nonceStr: data.nonceStr,
				signature: data.signature,
				jsApiList: [ //这里是需要用到的接口名称  
					'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
					'updateAppMessageShareData', //分享朋友
					'updateTimelineShareData', //分享朋友圈  
					'getLocation', //获取位置  
					'openLocation', //打开位置  
					'scanQRCode', //扫一扫接口  
					'chooseWXPay', //微信支付  
					'chooseImage', //拍照或从手机相册中选图接口  
					'previewImage', //预览图片接口  
					'uploadImage' //上传图片  
				]
			});
			if (callback) {
				callback(res.data);
			}
		});
	},
	//在需要定位页面调用  
	getlocation: function(callback) {
		if (!this.isWechat()) {
			//console.log('不是微信客户端')  
			return;
		}
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				jweixin.getLocation({
					type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'  
					success: function(res) {
						// console.log(res);  
						callback(res)
					},
					fail: function(res) {
						console.log(res)
					},
				});
			});
		});
	},
	//打开位置  
	openlocation: function(data, callback) {
		if (!this.isWechat()) {
			//console.log('不是微信客户端')  
			return;
		}
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				jweixin.openLocation({ //根据传入的坐标打开地图  
					latitude: data.latitude,
					longitude: data.longitude
				});
			});
		});
	},
	//选择图片  
	chooseImage: function(callback) {
		if (!this.isWechat()) {
			//console.log('不是微信客户端')  
			return;
		}
		//console.log(data);  
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				jweixin.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(rs) {
						callback(rs)
					}
				})
			});
		});
	},
	//微信支付  
	wxpay: function(data, callback) {
		if (!this.isWechat()) {
			//console.log('不是微信客户端')
			return;
		}
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				jweixin.chooseWXPay({
					timestamp: data.timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符  
					nonceStr: data.nonceStr, // 支付签名随机串,不长于 32 位  
					package: data.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)  
					signType: data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'  
					paySign: data.paysign, // 支付签名  
					success: function(res) {
						// console.log(res);  
						callback(res)
					},
					fail: function(res) {
						callback(res)
					},
				});
			});
		});
	},
	//微信扫码
	scanQRCode: function(callback) {
		if (!this.isWechat()) {
			//console.log('不是微信客户端')  
			return;
		}
		this.initJssdk(function(res) {
			jweixin.ready(function() {
				jweixin.scanQRCode({
					needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
					success: function(res) {
						// console.log(res);  
						callback(res);
					},
					fail: function(res) {
						callback(res)
					},
				});
			});
		});
	},
	//自定义分享  这里我统一调用了分享到朋友和朋友圈,可以自行定义
	share: function(callback) {
		if (!this.isWechat()) {
			//console.log('不是微信客户端')  
			return;
		}
		this.initJssdk(function(res) {
			jweixin.ready(function() {
			
				//我的分享配置由后台返回,可以自定义
				http.get({
					url: 'getShareInfo'
				}).then(res => {
					const { shareInfo } = res.data;
					jweixin.updateAppMessageShareData({ //分享给朋友
						title: shareInfo.title,
						desc: shareInfo.description,
						imgUrl: shareInfo.image,
						link: shareInfo.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						success: function() {
							// 用户确认分享后执行的回调函数
							callback(res);
						}
					});
					jweixin.updateTimelineShareData({ //分享到朋友圈
						title: shareInfo.title,
						desc: shareInfo.description,
						imgUrl: shareInfo.image,
						link: shareInfo.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						success: function() {
							// 用户确认分享后执行的回调函数
							callback(res);
						}
					});
				});
			});
		});
	}
}

配置

我是挂载到全局中使用的
在main.js中引入

import wechat from '@/common/wechat '
Vue.prototype.$wx = wechat
在项目中使用
<template>
	<button @click="scanQRCode">扫码</button>
</template>
<script>
	export default {
		data() {},
		methods:{
			scanQRCode(){
				this.$wx.scanQRCode(function(res) {
					//如果needResult设置为1  调用扫码在IOS中会有偶发的延迟问题,实测大约需要2000ms
					//这里我设置的延迟是2000ms
					setTimeout(function() {
						if (res.errMsg == "scanQRCode:ok") {
							//调用成功
							let result = res.resultStr;//扫码结果
						}
					},2000)
				});
			}
		}
	}
</script>
<style>
</style>
  • 1
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值