【笔记】关于UNI-APP引入公众号H5页面微信支付

首先使用UNI官方uni.requestPayment(OBJECT)支付方法;

但是这个方法用于微信APP支付,并没有H5的,当引入的时候报错

此API未使用;

于是

封装微信支付的方法

1:引入WX的JDK环境

jweixin-module

可以使用npm下载

封装的代码页

const jweixin = require('jweixin-module');

export const wexinPay78 = (data) => {
	jweixin.config({
		debug: false,
		appId: data.appId,//与登录的APPID相同,详细请查询微信公众号平台
		timestamp: data.timeStamp,
		nonceStr: data.nonceStr,
		signature: data.paySign,
		package:data.package,
		jsApiList: ['chooseWXPay']

	});

	jweixin.ready(function() {
		jweixin.checkJsApi({
			jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
			success: function(res) {
				console.log('checkjsapi Success')
				console.log(res);
			},
			fail: function(res) {
				console.log('res')
				console.log(res);
			}
		});

        
		jweixin.chooseWXPay({
			timestamp: data.timeStamp, //这个字段是为字符串后端返回时需检查
			nonceStr: data.nonceStr,
			package: data.package,
			signType: 'RSA',
			paySign: data.paySign,
			success(res) {
				
				console.log("成功" + res)
			},
			fail(res) {
				console.log("失败" + res)
			}
		});
	});

	jweixin.error(function(res) {
		console.log("成功2" + res)
	});

}

封装完方法后:

在需要引入的页面使用便可,

在这里需要注意

微信支付平台需要授权页面链接。

微信支付平台=>产品中心

需要后台配置好商户号基本数据

而上面封装方法的data来由(部分)

后台需要传入的FormData

   let formData = {
                "body": goodinfo
                , "channel_name": self.channelName
                , "charset": "UTF-8"
                , "mch_create_ip": up.ip
                , "mch_id": self.mchId
                , "service": "unified.trade.online"
                , "order_type": "wechat"
                , "sign_type": "MD5"
                , "total_fee": Math.floor( cost*100).toString()
                , "version": "2.0"
                , "out_trade_no": ordernum
                , "nonce_str": ordernum
                , "access_type": "wechatJs"
                , "buyer_id": up.weixin
                , "is_split_amount":"1"
               // , notify_url:"http://dy1.778878.net/apipen/pay/pay_yunfu/getpayback"

整体逻辑是

后台向微信平台发送一个formdata 然后返回一个 XML文件,

然后把XML文件的需要的值取出来,然后调用封装好的微信支付方法即可

你可能感兴趣的:(微信,uni-app,小程序)