天天看點

HBuilderx打包APP解決支付問題

       最近有個小的支付項目想要做成APP,由于很簡單是以我研究了下H5打包成App,我使用的是Hbuilderx這個IDE進行的打包其中讓我費勁的主要是支付這塊。下面詳細說下步驟及一些問題和解決方法。

1.打開HBuilderx建立項目選擇5+APP,然後輸入你的項目名稱;

HBuilderx打包APP解決支付問題

2.建立項目成功後将你的項目填入到項目中即可;

HBuilderx打包APP解決支付問題

3.然後點選運作中的原生APP-雲打包進行打包;

4.選擇打包的一些設定,證書我選的使用公共測試證書;

HBuilderx打包APP解決支付問題

5.配置manifest.json; 可以配置一些圖示啟動圖以及一些sdk什麼的(由于我選擇的H5支付是以這裡沒有配置sdk)

HBuilderx打包APP解決支付問題

下面我們說下存在的一些問題及解決的方法:

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
	// });
});
           

2,APP中的微信支付問題

   在這裡我用的是H5支付(其實不推薦APP内調用H5支付這裡我隻是先研究下後期還是要接入app支付的)

HBuilderx打包APP解決支付問題

由于剛開始沒改任何代碼用的是網站那一套支付是以剛開始就報錯;這裡我先說下後端應該專門寫一個app内的H5支付的接口因為有些參數不一緻和 WEB中的H5支付;

HBuilderx打包APP解決支付問題

當然對後端來說這都不是事,重要的是前端的代碼;

由于我是做後端開發的,前端所知有限,尤其是在網上查了很多解決方案;就是在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但是都很簡單這兩個問題都很有代表性是以寫下來希望能幫助到有需要的人。 

繼續閱讀