【菜鸡记录】h5发起微信支付

h5发起微信支付需要下载微信的sdk，即jweixin。

第一步：下载jweixin-module。可以去官网下载。我参考了这位大佬的。vue中使用jweixin-module-CSDN博客

# jweixin-module

微信JS-SDK

## 安装

### NPM

```shell
npm install jweixin-module --save
```

### UMD

```http
https://unpkg.com/jweixin-module/out/index.js
```

## 使用

```js
var jweixin = require('jweixin-module')
jweixin.ready(function(){
    // TODO
});
```

## 完整API

>[微信JS-SDK说明文档](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)

第二步，引入（在script中引入）

// #ifdef H5
	const jweixin = require("jweixin-module")
	// #endif

第三步：调接口：

onConfirm() {
				let para = {};
				if (this.$isWechat()) {
					para = {
							pay_type: 2,
							car_no: this.itemdata.plateNumber
						},
						tradeCreate(para).then((res) => {
							if (res.code == 200) {
								this.payInfo = res.data,
									this.configData.appId = res.data.appId,
									this.configData.timestamp = res.data.timeStamp,
									this.configData.nonceStr = res.data.nonceStr,
									this.configData.signature = res.data.paySign,
									this.configData.package = res.data.packageValue,
									this.configData.sign = res.data.signType,
									setTimeout(() => {
										this.wechatPay(this.configData)
									}, 40)

							} else if (res.code == 9) {
								this.$toast('优惠券抵扣成功')
							} else {
								this.$toast(res.msg)
							}
						})
				} else if (this.$isZfb()) {
					para = {
						pay_type: 1,
						car_no: this.str
					};
					tradeCreate(para).then((res) => {
						if (res.code == 200) {
							this.tradePay(res.data)
						} else if (res.code == 9) {
							this.$toast('优惠券抵扣成功')

						} else {
							this.$toast(res.msg)
						}
					})
				}
			},

第四步：调微信支付api

wechatPay(config) {
				let $this = this
				// #ifdef H5
				jweixin.config({
					debug: false,
					appId: config.appId,
					timestamp: config.timestamp,
					nonceStr: config.nonceStr,
					signatrue: config.signature,
					jsApiList: ['chooseWXPay']
				})
				jweixin.ready(function() {
					jweixin.chooseWXPay({
						timestamp: config
							.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: config.nonceStr, // 支付签名随机串，不长于 32 位
						package: config.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
						signType: config.sign, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: config.signature, // 支付签名
						success: function(response) {
							
						
						},
						cancel: function(re) {
							// $this.$vux.toast.show({
							// 	text: '支付已取消',
							// 	type: 'cancel'
							// })
						}
					})
				})
				// #endif
			},

第五步：小票页面（由于“点金计划”，导致没有配置该要求的项目，商户支付完成后直接返回微信，而不是一直在应用内。）。

 服务商平台公告