uniapp h5内嵌公众号实现微信登录

官方文档参考

UNI-APP 开发微信公众号（H5）JSSDK 的使用方式 - DCloud问答

模块化登录

在 uni-app 中可以使用模块方式引用微信 js-sdk ，可以避免与 uni-app 内置 wx 全局对象冲突的问题。

安装

npm install jweixin-module --save

使用

需要在微信登录前调用getSign()方法

 var jWeixin = require('jweixin-module')

 // 配置微信config
 function getSign() {
 	// 获取微信签名
 	uni.request({
 		url: '',//后端获取签名的请求地址
 		method: '',//请求方式
 		data: {
 			url: encodeURIComponent(location.href.split('#')[0])
 		},
 		success: (wxres) => {
 			jWeixin.config({
 				debug: false, // 开启调试模式,
 				appId: wxres.data.data.appId, // 必填，公众号的唯一标识
 				timestamp: wxres.data.data.timestamp, // 必填，生成签名的时间戳
 				nonceStr: wxres.data.data.nonceStr, // 必填，生成签名的随机串
 				signature: wxres.data.data.signature, // 必填，签名
 				jsApiList: ["scanQRCode", "chooseWXPay",'hideToolbar']
 			});
 			jWeixin.ready(function(res) {
 				console.log('微信config配置成功res', res)
 			})
 		}
 	})
 }

 // 微信扫一扫
 function toggle() {
 	return new Promise((resolve, reject) => {
 		jWeixin.scanQRCode({
 			needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
 			scanType: ["qrCode"],
 			success: function(res) {
 				resolve(res.resultStr) // 当needResult 为 1 时，扫码返回的结果
 			},
 			fail: function(err) {
 				reject(err)
 			}
 		});
 	});
 }

 // 微信支付
 function payment() {
 	let paymentcon = JSON.parse(uni.getStorageSync('payment'))
 	jWeixin.chooseWXPay({
 		timestamp: paymentcon.timeStamp, // 支付签名时间戳
 		nonceStr: paymentcon.nonceStr, // 支付签名随机串，不长于 32 位
 		package: paymentcon.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
 		signType: paymentcon.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
 		paySign: paymentcon.paySign, // 支付签名
 		success: function(res) {
 			console.log(res, '支付成功')
 			// 支付成功后的回调函数
 		}
 	});
 }
 export {
 	getSign,
 	toggle,
 	payment
 }

登录页

//html部分
<view class="wx">
	<image src="../../static/WeChatcopy.png" @click="getWeChatCode"></image>
	<view class="">微信一键登录</view>
</view>


//js部分
// 看地址中有没有code参数,如果没有code参数的话则请求微信官方的接口并获取包含code的回调链接
getWeChatCode() {
	if (!this.checked) {
		uni.showToast({
			icon: 'none',
			title: "请您阅读并同意用户协议与隐私政策"
		})
		return
	}
	//用于退出登录回来不会再调一次授权登录
	uni.setStorageSync('wechat_login_tag', 'true');

	const appID = ''; //公众号appID
	const callBack = ''; //回调地址 就是你的完整地址登录页
	let links = '';//域名

	//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
	window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
	appID + '&redirect_uri=' + encodeURIComponent(callBack) +
	'&response_type=code&scope=snsapi_userinfo&state=' + encodeURIComponent(links) +         
    '#wechat_redirect'
},

回到登录成功后需要跳转的页面

//js部分
onLoad(o) {
    // 拿到微信登录的code
	let code = this.getUrlCode('code')
	if (code) {
		this.handleToLogin(code)
	}
},



methods:{
	handleToLogin(code) {
        //调用接口登录接口
		wxLogin({
			code
		}).then(res => {
			if (res.data.code == 1) {
				uni.setStorageSync('token', res.data.data.token)
				uni.redirectTo({
					url: `/pages/my/index?res=${JSON.stringify(res.data.data)}`
				})
                      //接口为405时验证手机号
			} else if (res.data.code == 405) {
				uni.navigateTo({
					url: `/pages/login/phoneLogin?open_id=${res.data.data.open_id}`
				})
			}
         })
	},
	// 正则匹配请求地址中的参数函数
	getUrlCode(code) {
		return decodeURIComponent((new RegExp('[?|&]' + code + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||[, ''])[1].replace(/\+/g, '%20')) || null
	},
}