微信支付基础使用

首先，微信支付是分为几个付款类型：

1.JSAPI： 从微信内部发起的支付，包括公众号以及在微信打开的h5页面

2.APP支付

3.H5： 外部浏览器发起的支付

4.Native支付： 通常是我们PC端扫码支付等

安装依赖

npm install weixin-js-sdk

要使用的页面引入

import wx from 'weixin-js-sdk'

判断环境

// 是从微信发起还是外部浏览器发起（h5）
let userAgent = navigator.userAgent.toLowerCase();
	let isWeChat = userAgent.indexOf('micromessenger') !== -1 &&  userAgent.indexOf('wxwork') == -1;
return isWeChat

微信发起

	let temp = {
		vxCode: '',
	}
	// 这里根据后台提供的接口去请求相关的支付参数，如appid
	const { data } = await getPay(temp)
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId: data.appId, // 必填，公众号的唯一标识
		timestamp: data.timestamp, // 必填，生成签名的时间戳
		nonceStr: data.nonceStr, // 必填，生成签名的随机串
		signature: data.signature, // 必填，签名
		jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
	})
	wx.ready(function() {
		wx.chooseWXPay({
			timestamp: data.timeStamp, // 时间戳
			nonceStr: data.nonceStr, // 随机数
			package: package,
			signType: data.signType, // 微信前面方式
			paySign: data.paySign, // 微信签名
			success: function() {
				Toast('支付成功')
				
			},
			cancel: function() {
				Toast('取消支付')

			},
			fail: function() {
				Toast('支付失败')
			}
		})
	})

h5发起则正常使用window.location.href进行页面跳转和支付后回跳（回跳部分有些坑，后续另外发个文补充）

PC端native发起则使用qrCode生成二维码让用户扫码支付，期间可以用定时器调起查询支付结果的接口，直至支付完成。

微信支付文档

开发指引 - JSAPI支付 | 微信支付商户文档中心

码几个图供自己后续能快速找到位置吧

再次吐槽这份文档……

有空再补充，最近忙……