uniapp实现微信H5的扫码以及微信支付功能

首先安装'weixin-js-sdk'：

npm install weixin-js-sdk

引入：

import wx from 'weixin-js-sdk'

页面onLoad中初始化js-sdk

onLoad(){
			// uni.request({
			// 	url:'',
			// 	method:'POST',
			// 	data:{},
			// 	success: (res) => {
					this.wxConfig() // 请求后端接口，需要传入res.appid,res.timestamp...
			// 	}
			// })
			
		},

代码：

<template>
	<view>
		<div @click="openScan">点击调起微信扫码</div>
		<div @click="wxPay">调起支付</div>
	</view>
</template>

<script>
    import wx from 'weixin-js-sdk'
	export default {
		data(){
			return{
				
			}
		},
		onLoad(){
			// uni.request({
			// 	url:'',
			// 	method:'POST',
			// 	data:{},
			// 	success: (res) => {
					this.wxConfig() // 请求后端接口，需要传入res.appid,res.timestamp...
			// 	}
			// })
			
		},
		methods:{
			// 调起微信扫码
			openScan(){
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						console.log('扫码结果',res.resultStr)
					},
					fail: function() {
						console.log('识别二维码失败')
					}
				});
			},
			// 微信支付传入下面的参数↓
			wxPay(){
				wx.chooseWXPay({
					debug: true,
					appId: appid, //公众号唯一标识
					timestamp: timestamp, //签名时间戳
					nonceStr: nonceStr, //签名随机串
					package: package,
					signType: 'RSA', //'RSA'或者'MD5'根据后端加密方式来
					paySign: paySign, //微信签名
					success: function(res) {
						// 支付成功的处理逻辑
					},
					complete: function(res) {
						
					}
				});
			},
			// 微信的js-sdk初始化
			wxConfig(appId, timestamp, nonceStr, signature) {
				wx.config({
					debug: false, // 开启调试模式,
					appId: appId, // 必填，企业号的唯一标识
					timestamp: timestamp, // 必填，生成签名的时间戳
					nonceStr: nonceStr, // 必填，生成签名的随机串
					signature: signature, // 必填，签名
					jsApiList: ["scanQRCode", "chooseWXPay"] // 必填，微信扫码，微信支付需要使用的JS接口列表
				});
				wx.ready(() => {
					console.log('加载完成')
				});
				wx.error(function(res) {
					console.log('请使用微信打开,或稍后再试')
				});
			}
		}
	}
</script>