微信小程序使用webview内嵌h5商城，并完成支付功能

需求起因

H5是公众号的商城，希望能快速上线小程序版本，于是使用小程序自带的web-view组件开发。 因为使用了uni-app框架，以此举例;

具体实现

• 1.小程序中新建webPage.vue，作为承载web-view的页面
• 2.template中

<view>
	 <web-view :webview-styles="webviewStyles" :src="shopUrl"></web-view>
</view>

• 3.script中

export default {
	data() {
		return {
			webviewStyles: {},
			shopUrl: 'https://www.xxx.com' // 微信小程序中需要配置业务域名
		}
	},
	onLoad(option) {
		console.log(option)
		// 通过分享进入h5商城指定页，解码url
		if (option.url) {
			this.shopUrl = decodeURIComponent(option.url)
		}
	},
	onShareAppMessage(options) {
	    // webview中h5页面详细地址，如果不进行编码，从分享卡片中进入可能无法获取完整的url
		var url = encodeURIComponent(options.webViewUrl) 
		var shareObj = {
			title: '分享标题',
			path: '/pages/webPage/webPage?url='+url,
			imageUrl: '',
			success: function(res){
			    // 小程序已无法监听分享回调
			},
			fail: function(){
				// 已失效
			},
			complete: function(){
				// 已失效
			}
		}
		return shareObj
	},
}

• 4.在h5页面中，先要判断小程序环境 （注：需要引入jweixin-1.3.2.js或以上版本）

var ua = navigator.userAgent.toLowerCase()
if(ua.match(/MicroMessenger/i)=="micromessenger") {
    //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
    wx.miniProgram.getEnv((res)=>{
        if (res.miniprogram) {
            console.log("在小程序里")
        } else {
            console.log("不在小程序里")
        }
    })
}else {
    console.log('不在微信里')
}

• 5.在判断为小程序的环境中，调用下单支付接口时传入能标记为小程序的特定参数（前后台自行约定）。因为在小程序环境中无法进行微信H5支付和微信公众号支付，所以需要后端返回小程序支付所需要的参数。（后端注意appid一定要和小程序的appid一致）

• 6.在H5中将参数返回给小程序

 let params= '?timestamp='+res.data.timeStamp+'&nonceStr='+res.data.nonceStr
    +'&prepay_id='+res.data.prepay_id+'&signType='+res.data.signType+'&paySign='+res.data.paySign
 // 传入参数除了必须的支付参数，也可以自行添加后续回调用到的参数，但是要注意微信小程序的参数有长度限制，确认params长度是否能全部传入
 const url = '../webViewPay/webViewPay'+params;
 wx.miniProgram.navigateTo({
    url: url
 });

• 7.在上面的代码块中会发现跳转的页面变成了webViewPay，因为最终使用的是小程序支付，所以需要这样一个页面来调用支付功能,下面是webViewPay具体代码

export default {
	data() {
		return {}
	},
	onLoad(option) {
		console.log(option)
		this.goPay(option)
	},
	methods: {
		// webview跳入小程序进行支付
		goPay(payData) {
			wx.requestPayment({
				timeStamp: payData.timestamp,
				nonceStr: payData.nonceStr,
				package: 'prepay_id=' + payData.prepay_id,
				signType: payData.signType,
				paySign: payData.paySign,
				success:function(res){
					console.log(res)
					// 跳订单成功页面
					// 注意跳转的url也需要encodeURIComponent()编码
					let url = encodeURIComponent('跳转链接')
					uni.navigateTo({
						url:'../webPag/webPag?url='+url
					})
				},
				fail:function(res){
					// 跳转订单失败页
					let url = encodeURIComponent('跳转链接')
					uni.navigateTo({
						url:'../webPag/webPag?url='+url
					})
				}
			})
		}
	}
}