HBuilderx打包APP解决支付问题

最近有个小的支付项目想要做成APP，由于很简单所以我研究了下H5打包成App，我使用的是Hbuilderx这个IDE进行的打包其中让我费劲的主要是支付这块。下面详细说下步骤及一些问题和解决方法。

1.打开HBuilderx新建项目选择5+APP，然后输入你的项目名称；

2.创建项目成功后将你的项目填入到项目中即可；

3.然后点击运行中的原生APP-云打包进行打包；

4.选择打包的一些设置，证书我选的使用公共测试证书；

5.配置manifest.json； 可以配置一些图标启动图以及一些sdk什么的（由于我选择的H5支付所以这里没有配置sdk）

下面我们说下存在的一些问题及解决的方法：

1.打包好的app会存在点击返回键直接退出app的操作；

解决方案：写一个公共的js链接到每一个页面

document.addEventListener(plusready, function() {
    var webview = plus.webview.currentWebview();
	var first = null;
    plus.key.addEventListener(backbutton, function() {
		webview.canBack(function(e) {
		    if (e.canBack) {
				webview.back();
			} else {
				//webview.close(); //hide,quit
				//plus.runtime.quit();
				//首页返回键处理
				//处理逻辑：1秒内，连续两次按返回键，则退出应用；
				//首次按键，提示‘再按一次退出应用’
				if (!first) {
					first = new Date().getTime();
					// toast(双击返回键退出应用); //调用自己写的吐丝提示 函数
					console.log(再按一次退出应用);
					plus.nativeUI.toast("双击退出", {
						duration: short
					}); //通过H5+ API调用Android 上的toast 提示框
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if (new Date().getTime() - first < 1400) {
						plus.runtime.quit();
					}
				}
			}
		})
	}, false);
	/*沉浸式延伸的问题:状态栏的高度被忽略*/
	// plus.webview.currentWebview().setStyle({
	// 	statusbar:{background:#ff0000},top:0,bottom: 0
	// });
});

在这里我用的是H5支付（其实不推荐APP内调用H5支付这里我只是先研究下后期还是要接入app支付的）

由于刚开始没改任何代码用的是网站那一套支付所以刚开始就报错；这里我先说下后端应该专门写一个app内的H5支付的接口因为有些参数不一致和 WEB中的H5支付；

当然对后端来说这都不是事，重要的是前端的代码；

由于我是做后端开发的，前端所知有限，尤其是在网上查了很多解决方案；就是在webview中设置referer,这个问题差点弄到我想放弃，主要是我查了很多方法大部分都是原生嵌入或者有一些方法也只是告你原理没有现成的代码供我复制粘贴就很烦；弄得我是头皮发麻，最后耐住性子仔细分析了一下，其实不难只是心在躁动；下面附上代码：

//这段代码是支付请求接口中success中写的跳转支付的代码；
var url = data.url+&redirect_url=https%3a%2f%2fm.shangshebao.com%2fmy.html;
//window.location.href=url;
if(window.plus){  
	plusReady(url);  
}else{   
    document.addEventListener("plusready", plusReady, false);  
}


function plusReady(url){
//其实网上一开始就查到了这段代码，但是没有详细说明他在两个url上都写的一样的害的我以为填一样的其实
//填不同的
//plus.webview.create(https://icolud.com, test, {additionalHttpHeaders: 
//{Referer:https://icolud.com}});  	 
 plus.webview.create(url,pay{additionalHttpHeaders{Referer:你的授权支付域名}})
}

这样就解决了问题，当然在过程中还有很多其他的小的bug但是都很简单这两个问题都很有代表性所以写下来希望能帮助到有需要的人。