微信小程序支付

个人理解微信小程序支付和微信支付二者所需的参数基本一致，一个是直接唤起微信支付程序，另一个是需要在小程序页面中转。

1、在H5投保页面区分当前环境是否在小程序。订单生成后走不同的支付方法

saveProposal(data).then(res => {
    this.visible.loading = false;
	if(res.code == 200){
		let proposalNo = res.data.proposalNo
		if(/miniProgram/i.test(userAgent)){ //判断是否是小程序
            //小程序支付
			appletPay({
				data : {openid : data.openid,proposalNo:proposalNo},
				success_url : encodeURIComponent(`${window.location.origin}${This.$config.success}?id=${proposalNo}&code=${productCode}`),
				cancel_url : encodeURIComponent(`${window.location.origin}${This.$config.cancel}/${proposalNo}`)							
			})
		}else{
            //微信支付
			pay({
				data : {openid : data.openid,proposalNo:proposalNo},
				success(res){
					window.location.href = `${This.$config.success}/1?id=${proposalNo}&code=${productCode}`
				},
				cancel(res){
					window.location.href = `${This.$config.cancel}/${proposalNo}`
				},
				fail(res){
					This.$toast('支付失败');
				}
			})
		}
					
	}else{
		this.$toast(res.message)
	}
})

2、通过后端支付接口获取支付所需要的参数 ，成功后跳转到小程序微信支付中间页面 

//小程序支付
export function appletPay(opts){
	let {data,success_url,cancel_url,fail} = opts;
    //根据后端需要设置支付类型为小程序支付
	data.payType = 'weixinspay'
    //调用后端支付接口，获取微信支付参数。包括appid,签名方式等
	getWxPay(data).then(res =>{
		if(res.code == 200){
			let data = encodeURIComponent(JSON.stringify(res.content))
			wx.miniProgram.navigateTo({
				url : `/pages/pay/index?data=${data}&success_url=${success_url}&cancel_url=${cancel_url}`
			})
		}else{
			Toast(res.message)
		}
	})
}

3、在小程序中pay/index.js中获取拿到的支付参数，唤起微信支付 

// pages/pay/index.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        /*
        * options.data            支付参数
        * options.success_url     支付成功回调地址
        * options.cancel_url      取消支付回调地址
        */
        const data = JSON.parse(decodeURIComponent(options.data) || "{}");  //支付的参数
        wx.requestPayment(
            {
            "timeStamp":data.timeStamp,
            "nonceStr": data.nonceStr,
            "package": data['package_'],
            "signType": "MD5",
            "paySign": data.paySign,
            "success":function(res){   
                if(res.errMsg == 'requestPayment:ok'){
                    wx.redirectTo({
                        url: `/pages/success/index?weburl=${options.success_url}`
                    })
                    console.log('requestPayment:ok',options.success_url)
                }
            },
            "fail":function(res){
                if(res.errMsg == 'requestPayment:fail cancel'){
                    wx.redirectTo({
                        url:  `/pages/cancel/index?weburl=${options.cancel_url}`
                    })
                    console.log('requestPayment:fail cancel',options.cancel_url)
                }
            },
            "complete":function(res){}
            })
    }
})

4、支付成功或支付失败后跳转的页面，如果是小程序自己的页面直接跳转。如果是外部引入公共的成功或失败页面，则需要在小程序中通过中间页的形式，跳转至相应页面

//通过小程序中间页跳转
// "/pages/success/index"小程序中间页，weburl为实际跳转地址
wx.redirectTo({
    url: `/pages/success/index?weburl=${options.success_url}`
})

在小程序成功页面中监听传入的跳转地址，通过web-view跳转至目标页面

<!--pages/success/index.wxml-->
<web-view src="{{url}}"></web-view>

// pages/success/index.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        url:''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        if(options.weburl){
            const weburl = decodeURIComponent(options.weburl)
            this.setData({
                url:weburl
            })
        }
    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        wx.reLaunch({
            url: `/pages/index/index`
        })
    }
})

关于微信支付之后 会有专门的文章介绍