Wechat applet uses WebView to embed H5 mall and complete the payment function

Demand causes

H5 is the mall of the public number, hoping to quickly online small program version, so the use of small program with its own Web-view component development. Because of the uni-app framework, for example;

The specific implementation

• 1. WebPage. Vue is created in the applet, and webPage is used to load the Web-view
• 2. In the template

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

• 3. In the script

export default {
	data() {
		return {
			webviewStyles: {},
			shopUrl: 'https://www.xxx.com'}}, onLoad(option) {console.log(option) // Enter the specified page of H5 mall through sharing and decode the URLifDecodeURIComponent (option.url) {this.shopurl = decodeURIComponent(option.url)}}, onShareAppMessage(options) {// webView h5页 内 存 Var url = encodeURIComponent(options.webviewurl) var shareObj = {title:'Share title',
			path: '/pages/webPage/webPage? url='+url,
			imageUrl: ' ',
			success: function(res){// Applets can no longer listen for share callbacks}, fail:function(){// invalid}, complete:function(){// invalid}}return shareObj
	},
}
Copy the code

• 4. In the H5 page, first judge the small program environment (note: Jweixin-1.3.2.js or above version needs to be introduced)

var ua = navigator.userAgent.toLowerCase()
if(ua.match(/MicroMessenger/i)=="micromessenger"Wx.miniprogram. GetEnv ((res)=>{//ios uA has no miniProgram, but MicroMessenger (indicating wechat browser) wx.miniprogram.if (res.miniprogram) {
            console.log("In a small program.")}else {
            console.log("Not in the applet.")}}}else {
    console.log('Not in wechat')}Copy the code

• 5. In the environment judged as a small program, pass in the specific parameters that can be marked as a small program when calling the order and payment interface (agreed by the front and back sides). Because wechat H5 payment and wechat public account payment cannot be carried out in the mini program environment, the parameters required by the mini program payment need to be returned by the back end. (Note that the appID of the back end must be the same as the appID of the small program)

• 6. Return the parameters to the applet in 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 // In addition to the required payment parameters, you can also add the subsequent call to the parameters, but note that wechat applet parameters have a length limit, check whether the length of params can be passed to const URL ='.. /webViewPay/webViewPay'+params;
 wx.miniProgram.navigateTo({
    url: url
 });
Copy the code

• 7. In the above code block, it can be found that the jump page becomes webViewPay, because the final use is small program payment, so it needs such a page to call the payment function, the following is the specific code of webViewPay

export default {
	data() {
		return{} }, onLoad(option) { console.log(option) this.goPay(option) }, methods: {wx.requestPayment({timeStamp: paydata.timestamp, nonceStr: paydata.timestamp) {wx.requestPayment({timeStamp: paydata.timestamp, nonceStr: paydata.timestamp) payData.nonceStr, package:'prepay_id=' + payData.prepay_id,
				signType: payData.signType,
				paySign: payData.paySign,
				success:function(res){console.log(res) // Jump to order success page // Note that the jump url also requires encodeURIComponent() encodinglet url = encodeURIComponent('Jump link')
					uni.navigateTo({
						url:'.. /webPag/webPag? url='+url
					})
				},
				fail:function(res){// Jump to order failure pagelet url = encodeURIComponent('Jump link')
					uni.navigateTo({
						url:'.. /webPag/webPag? url='+url
					})
				}
			})
		}
	}
}
Copy the code