文档章节

mui集成微信H5支付(返回白屏问题已经解决)

银装素裹
 银装素裹
发布于 07/17 22:46
字数 1393
阅读 378
收藏 0
mui

一.项目需求

因为公司人员缺少,没有专门开发安卓和ios的人员,为了项目尽早上线采用了混合APP开发的方式,我选择了MUI混合开发框架,项目中需要在用户购买VIP会员的时候进行支付,所以需要在项目中解决这个问题,由于开发平台的支付没有申请下来,所以暂时先使用微信公众号H5支付.

二.在购买vip页面请求服务端接口获取H5支付的微信链接地址mweb_url

<!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的跳转问题(重点)

这里一般会遇到这些问题:

问题1.跳转mweb_url链接后出现商家参数有误的问题(解决办法:没有设置好头信息里面的referer参数,或者referer参数填写的连接不是微信商户平台注册的安全域名)

问题2:能跳转到微信的支付页面,但是返回后出现页面空白,或者支付成功后点击完成出现页面空白的问题,解决的方案是:

把当前页面当做mweb_url支付页面的父级页面,不要用open的方式打开支付连接,而是以子页面的形式添加本页面中,且设置好子页面的显示样式就可以完美解决这个问题,完整的解决代码如下:

<!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>

 

© 著作权归作者所有

共有 人打赏支持
银装素裹
粉丝 1
博文 45
码字总数 23817
作品 0
广州
程序员
私信 提问
重磅:揭秘H5流量为什么不如App值钱?

3月1日,Google在其北京办公室举行Google for publishers论坛 。活动吸引了数百位广告主、流量主和开发者参加。DCloud创始人王安在会上分享的H5流量为什么低廉以及如何提升H5流量价值等问题,...

糊涂熊
2016/03/30
0
0
请在微信外付订单,微信外怎么打开订单

一、 普通用户遇到请在微信外付订单的解决方法 有些人在使用智能手机, 或者pad购物时, 会遇到“请在微信外打开订单,进行支付”的提示, 解决的方法很简单, 你只要不在微信里打开那个网页...

towtotow
02/22
0
0
微信h5支付开发指南

前言 H5支付是基于公众号基础开发的一种非微信内浏览器支付方式(需要单独申请支付权限),可以满足在微信外的手机H5页面进行微信支付的需求。同时,由于H5链接传播十分方便、来源不易追踪,...

Tolonger
2017/11/29
0
0
微信小程序:web-view嵌套H5实现微信支付功能解决方案及填坑

最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了。今天不加班,开始为这段时间做的东西进行下经验总结。 这段时间因为公司需要,接触了一些.Ne...

ThinkinLiu
10/20
0
0
由覆盖mui.back()方法引起的闪屏

今天遇到了页面闪屏的一个问题,在网上看到各种优化白屏,闪屏的方法,都不管用,要闪屏的代码如下: 我想让该页面在返回时跳转到“homeView ”,但是发现一个很奇怪的现象,应用启动后,第一...

杜太神
2016/09/14
565
0

没有更多内容

加载失败,请刷新页面

加载更多

ubuntu16.04 LNMP搭建 php7.1

sudo apt-get update sudo apt-get install mysql-server mysql-client sudo apt-add-repository ppa:ondrej/php sudo apt-get update sudo apt-get install php7.1 php7.1-fpm php7.1-cgi p......

一千零一夜个为什么
13分钟前
0
0
阿里云高级技术专家带你全面了解云主机性能评测

钱超,花名西邪,阿里云高级技术专家,超12年老阿里,是云主机性能领域的知名专家。 在目前的云计算测评领域,很多性能测评存在营销的包装,容易引起误导:比如用瞬时性能引导读者得出结论,...

阿里云官方博客
21分钟前
1
0
Charles如何设置本地映射、和取消本地映射

适用情况: 遇到接口返回特别快的时候非常郁闷,还得求着接口开发改数据很浪费时间,于是在这种情况下可以使用charles做本地映射。 环境: charles版本:3.11.2 一:如何设置本地映射 1、选中...

SuShine
23分钟前
1
0
python爬虫之定位网页元素的三种方式

python爬虫之定位网页元素的三种方式 2018年08月02日 13:30:02 Barry__ 阅读数:1373 标签: python 更多 个人分类: python 版权声明:本文为博主原创文章,转载请注明出处 https://blog.c...

linjin200
27分钟前
1
0
AES加密算法的详细介绍与实现

#include <stdio.h>#include <stdlib.h>#include <string.h>#include "aes.h"/** * S盒 */static const int S[16][16] = { 0x63, 0x7c, 0x77, 0x7b, 0xf2, 0x6b, 0x6f, 0xc......

青春无极限
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部