mui集成微信H5支付(返回白屏問題已經解決)

時間 2019-11-13

標籤 mui 集成微信 h5 支付返回問題已經解決简体版

原文原文鏈接

一.項目需求javascript

由於公司人員缺乏,沒有專門開發安卓和ios的人員,爲了項目儘早上線採用了混合APP開發的方式,我選擇了MUI混合開發框架,項目中須要在用戶購買VIP會員的時候進行支付,因此須要在項目中解決這個問題,因爲開發平臺的支付沒有申請下來,因此暫時先使用微信公衆號H5支付.css

二.在購買vip頁面請求服務端接口獲取H5支付的微信連接地址mweb_urlhtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>喜登對</title>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/rem.js"></script>
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/xxx.css" rel="stylesheet" />
</head>

<body>
    <div class="warp">
        <div class="header">
            <span class="goBack"></span>
            <p class="title">開通VIP</p>
        </div>
        <div class="payB">
            
            <div class="list">
                <ul id="vipList"></ul>
            </div>

            <div class="txt">
            	<p class="p1"><span class="fl"></span>升級爲VIP，快速找到另外一半<span class="fr"></span></p>
            	<div class="p2">
            		<p><i class="iconA"></i>交友成功率</p>
            		<p><i class="iconB"></i>收信次數</p>
            	</div>
            	<p class="p4"><span class="fl"></span>年費會員獨享<span class="fr"></span></p>
            	<div class="p3">
            		<p><i class="icon01"></i>置頂推薦一天</p>
            		<p><i class="icon02"></i>高級搜索</p>
            		<p><i class="icon03"></i>無限暢聊</p>
            		<p><i class="icon04"></i>優先推薦</p>
            		<p><i class="icon05"></i>優先審覈</p>
            		<p><i class="icon06"></i>隱身訪問</p>
            		<p><i class="icon07"></i>查看所有</p>
            		<p><i class="icon08"></i>在線狀態</p>
            	</div>
            </div>
            <div class="h"></div>
            <button id="buy">開通VIP</button>
        </div>
    </div>
</body>
<script src="js/me/base.js" type="text/javascript" charset="utf-8"></script>
<script>
	mui.init();	
	//點擊開通vip
	mui('body').on('tap','#buy',function(){
        //從服務端獲取微信公衆號H5支付參數 package_id:禮包id(此處省略了部分業務代碼)
		postVipApi(package_id)
	});
	
	//下訂單
	function postVipApi(package_id)
	{
		mui.ajax(API_URL + 'vip/order',{
			data:{
				'package_id':package_id,
				'trade_type':'MWEB',
				 'wap_url':'https://xidengdui.com'
			},
			type:'POST',
			dataType:'json',
			headers:{Authorization:"Bearer " + getAppToken()},
			timeout:20000,
			success:function(data){
                //獲取支付參數成功
				var payUrl = data.data.mweb_url;//這個是接口返回來的微信H5支付的鏈接地址
				//處理跳轉支付問題(重點)
			},
			error:function(xhr){
				mui.toast('網絡異常')
			}
		});
	}
</script>
</html>

三.處理微信H5支付鏈接mweb_url的跳轉問題(重點)java

這裏通常會遇到這些問題:ios

問題1.跳轉mweb_url連接後出現商家參數有誤的問題(解決辦法:沒有設置好頭信息裏面的referer參數,或者referer參數填寫的鏈接不是微信商戶平臺註冊的安全域名)web

問題2:能跳轉到微信的支付頁面,可是返回後出現頁面空白,或者支付成功後點擊完成出現頁面空白的問題,解決的方案是:ajax

把當前頁面當作mweb_url支付頁面的父級頁面,不要用open的方式打開支付鏈接,而是以子頁面的形式添加本頁面中,且設置好子頁面的顯示樣式就能夠完美解決這個問題,完整的解決代碼以下:json

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>喜登對</title>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/rem.js"></script>
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/xxx.css" rel="stylesheet" />
</head>

<body>
    <div class="warp">
        <div class="header">
            <span class="goBack"></span>
            <p class="title">開通VIP</p>
        </div>
        <div class="payB">
            
            <div class="list">
                <ul id="vipList"></ul>
            </div>

            <div class="txt">
            	<p class="p1"><span class="fl"></span>升級爲VIP，快速找到另外一半<span class="fr"></span></p>
            	<div class="p2">
            		<p><i class="iconA"></i>交友成功率</p>
            		<p><i class="iconB"></i>收信次數</p>
            	</div>
            	<p class="p4"><span class="fl"></span>年費會員獨享<span class="fr"></span></p>
            	<div class="p3">
            		<p><i class="icon01"></i>置頂推薦一天</p>
            		<p><i class="icon02"></i>高級搜索</p>
            		<p><i class="icon03"></i>無限暢聊</p>
            		<p><i class="icon04"></i>優先推薦</p>
            		<p><i class="icon05"></i>優先審覈</p>
            		<p><i class="icon06"></i>隱身訪問</p>
            		<p><i class="icon07"></i>查看所有</p>
            		<p><i class="icon08"></i>在線狀態</p>
            	</div>
            </div>
            <div class="h"></div>
            <button id="buy">開通VIP</button>
        </div>
    </div>
</body>
<script src="js/me/base.js" type="text/javascript" charset="utf-8"></script>
<script>
	mui.init();
	mui.plusReady(function(){
	var self = plus.webview.currentWebview();
	//選擇開通的vip
	mui('#vipList').on('tap','li',function(){
		var vip_id = this.getAttribute('vip-id');
		var cls = this.getAttribute('class');
		package_id = vip_id;
		if(cls.lastIndexOf('on')>0)return;
		mui('#vipList .on')[0].classList.remove('on');
		this.classList.add('on');		
	})
	
	//點擊開通vip
	mui('body').on('tap','#buy',function(){
		postVipApi(package_id)
	});
	
	//下訂單
	function postVipApi(package_id)
	{
		mui.ajax(API_URL + 'vip/order',{
			data:{
				'package_id':package_id,
				'trade_type':'MWEB',
				 'wap_url':'https://xidengdui.com'
			},
			type:'POST',
			dataType:'json',
			headers:{Authorization:"Bearer " + getAppToken()},
			timeout:20000,
			success:function(data){
				var payUrl = data.data.mweb_url;
				//處理跳轉支付問題,此處巧妙在第三個參數,經過設置這個內嵌頁面的樣式來解決白屏問題,由於微信支付頁面點擊返回或者支付結束點擊完成後都是默認返回喚起支付連接的頁面,也就是payView這個建立出來的內嵌頁面因此微信支付完成返回的頁面payView視圖上就會看不到了,達到了解決白屏的問題,其中additionalHttpHeaders:{referer:'http://xidengdui.com'}是解決出現商家參數有誤的問題
				var payView = plus.webview.create(payUrl, 'pay-url', {
					top: '1000px',bottom: '1000px',
					additionalHttpHeaders:{referer:'http://xidengdui.com'}
				});
				self.append(payView);
			},
			error:function(xhr){
				mui.toast('網絡異常')
			}
		});
	}

    });
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。