iOS 解決微信h5支付無(wú)法直接返回APP的問(wèn)題

于公司的業(yè)務(wù)需要，為了節(jié)省申請(qǐng)開(kāi)通微信支付的時(shí)間和人力，公司決定使用微信h5支付。這樣即節(jié)省了時(shí)間，同時(shí)以后所有的APP都能使用h5支付，既方便又快捷。

但是真正做的時(shí)候問(wèn)題來(lái)了，當(dāng)你支付成功之后或者是取消支付的時(shí)候會(huì)跳轉(zhuǎn)到Safari瀏覽器，這就很尷尬了，完全無(wú)用戶體驗(yàn)啊。當(dāng)時(shí)看著Android可以直接返回到APP，心里瞬間不爽了。開(kāi)始埋怨蘋(píng)果公司了，但是由于公司的業(yè)務(wù)必須要做h5，沒(méi)辦法開(kāi)始找辦法解決。

下面開(kāi)始我的坎坷之路了：

首先你在Xcode中，選擇你的工程設(shè)置項(xiàng)，選中“TARGETS”一欄，在“info”標(biāo)簽欄的“LSApplicationQueriesSchemes“添加weixin

然后你通過(guò)統(tǒng)一下單后臺(tái)會(huì)從微信拿到這么個(gè)鏈接https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmwebprepay_id=wx20180115115052bedf091fba0369993002&package=2975002856給你

拿到這個(gè)鏈接之后我們還無(wú)法直接加載webView，如果直接加載的話他會(huì)提示

進(jìn)入微信查了一下，發(fā)現(xiàn)需要設(shè)置Referer這個(gè)請(qǐng)求頭的參數(shù)，當(dāng)然微信也給出了例子微信h5支付其他常見(jiàn)錯(cuò)誤。針對(duì)于這個(gè)問(wèn)題在網(wǎng)上搜索了一下發(fā)現(xiàn)有專門(mén)針對(duì)于微信h5支付設(shè)置Referer的文章iOSwebView設(shè)置Referer,在這里我給大家貼一下代碼吧！

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

NSDictionary *headers=[request allHTTPHeaderFields];

BOOL hasReferer=[headers objectForKey:@"Referer"] !=nil;

if(hasReferer) {

// .. is this my referer?

returnYES;

} else{

// relaunch with a modified request

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

dispatch_async(dispatch_get_main_queue(), ^{

NSURL *url=[request URL];

NSMutableURLRequest* request=[NSMutableURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:60.0];

[request setHTTPMethod:@"GET"];

[request setValue:@"http://www.xxx.com"forHTTPHeaderField: @"Referer"];

[self.myWebView loadRequest:request];

});

returnNO;

}

這個(gè)http://www.xxx.com就是你們商戶申請(qǐng)H5時(shí)提交的授權(quán)域名.

走到這一步，你就可以加載webView進(jìn)行支付了，但是問(wèn)題來(lái)了，不論是支付成功還是取消支付之后他都會(huì)跳轉(zhuǎn)到Safari瀏覽器，而且打開(kāi)的內(nèi)容是就是你設(shè)置Referer時(shí)的授權(quán)域名http://www.xxx.com，這個(gè)家伙就是我們的公司的主頁(yè)。

那么，怎么辦呢，最后我們經(jīng)過(guò)協(xié)商，只要能支付，不管支付成功或者取消支付，只要停留在微信界面就可以了，然后讓用戶點(diǎn)擊右上角手動(dòng)返回APP，這個(gè)是沒(méi)有辦法的辦法了。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

通過(guò)webView的代理方法來(lái)獲取到這個(gè)鏈接，然后進(jìn)行支付，發(fā)現(xiàn)還是一樣的會(huì)跳轉(zhuǎn)到Safari瀏覽器，當(dāng)時(shí)瞬間懵逼了，怎么會(huì)這個(gè)樣子呢，不信邪的我又讓Android那個(gè)哥們攔截一個(gè)鏈接給我，嘗試一下不會(huì)跳轉(zhuǎn)瀏覽器，我又試了一下自己的攔截的鏈接還是會(huì)跳轉(zhuǎn)到Safari瀏覽器。我突然明白了這個(gè)是我設(shè)置了Referer，不管是用https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb？prepay_id=wx20180115115052bedf091fba0369993002&package=2975002856還是攔截的weixin://wap/pay?prepayid%3Dwx201801151450335872c8f41a0452242290&package=122735683&noncestr=1515999038&sign=0b3590852e847b336e6f0187a0f56ab1進(jìn)行支付都是不行的，他都會(huì)跳轉(zhuǎn)到Safari。

我當(dāng)時(shí)想要不用TFHpple解析HTML內(nèi)容吧，但是仔細(xì)一想不行的，因?yàn)轭^部沒(méi)有Referer，無(wú)法解析。最后實(shí)在沒(méi)辦法了，都準(zhǔn)備放棄了，突然想到了設(shè)置scheme，既然我可以Safari可以打開(kāi)APP，那么我這肯定也能做的。于是我又信心滿滿的開(kāi)始我的實(shí)驗(yàn)了。

首先要設(shè)置scheme，假如scheme設(shè)置xxxx,那么你在Safari輸入xxxx://就可以打開(kāi)APP了。做到這就全部明白了，只要設(shè)置好Referer和我的scheme對(duì)應(yīng)就行了，然后我開(kāi)始實(shí)驗(yàn)：

Referer設(shè)置：http://www.xxx.com ?scheme設(shè)置：http://www.xxx.com發(fā)現(xiàn)不行

我突然間發(fā)現(xiàn)是不是只要是帶有h5的授權(quán)的域名就可以呢，于是我把公司的一個(gè)鏈接設(shè)置成Referer之后我發(fā)現(xiàn)我還是能支付的，我擦，突然之間發(fā)現(xiàn)了一個(gè)新的大陸啊，太激動(dòng)了，然后為了確保準(zhǔn)確性進(jìn)行了各種嘗試，發(fā)現(xiàn)只要帶有域名的都可以，然后我又進(jìn)行了一個(gè)嘗試：就是把http://去掉直接把Referer設(shè)置成：www.xxx.com，然后也是能支付的。這樣就全部OK了，我把Referer設(shè)置成：www.xxx.com://這個(gè)樣式的然后把scheme設(shè)置成：www.xxx.com這樣的話支付成功或者取消支付都可以直接返回到APP了。

所以h5支付最終返回APP的解決方案是：把Referer設(shè)置成：www.xxx.com://?scheme設(shè)置成：www.xxx.com就可以直接返回APP了。

當(dāng)然目前還沒(méi)有解決多個(gè)APP同時(shí)使用同一個(gè)授權(quán)域名時(shí)，怎么返回APP的問(wèn)題，多個(gè)APP使用h5支付的話會(huì)導(dǎo)致返回錯(cuò)亂的問(wèn)題，如果哪位大神知道解決辦法的話可以告訴我一下，謝謝！

同樣你如果有多個(gè)APP被同一家客戶使用的話，客戶也同意用戶點(diǎn)擊左上角手動(dòng)返回的話你可以這樣設(shè)置Referer: ?www.xxx.com/test://,這樣的話你支付成功會(huì)直接停留在微信，不會(huì)造成返回APP錯(cuò)亂的問(wèn)題。

過(guò)20天的維護(hù)升級(jí)，國(guó)家政務(wù)服務(wù)平臺(tái)系統(tǒng)已恢復(fù)正常啦（試運(yùn)行）！

國(guó)家政務(wù)服務(wù)平臺(tái)

住建部官網(wǎng)首頁(yè)

企業(yè)行政審批

個(gè)人行政審批

一建、造價(jià)、監(jiān)理、勘察設(shè)計(jì)類可以操作上報(bào)了，需要提醒的是：請(qǐng)各工程師朋友更新完善一下您手機(jī)政務(wù)APP的個(gè)人信息。

需更新完善的內(nèi)容包括：

1、基本信息：國(guó)籍、民族、性別、學(xué)歷

2、地址信息：戶籍、居住地址、工作單位、注冊(cè)單位

3、業(yè)務(wù)信息：郵箱、社保卡號(hào)、社保卡發(fā)卡地，如果是變更注冊(cè)，社保卡最好是用上家注冊(cè)單位的社保號(hào)

同時(shí)網(wǎng)頁(yè)版入口也有更新，請(qǐng)點(diǎn)擊新鏈接：http://zwfw.mohurd.gov.cn:8070/zjblogincheck/qjd/index.html?checktype=1（復(fù)制鏈接到瀏覽器打開(kāi)哦！）

記得點(diǎn)贊收藏轉(zhuǎn)發(fā)，讓身邊更多的人看到！

拉菜單的屬性

length 表示選項(xiàng)<option>的個(gè)數(shù)

selected 布爾值,表示選項(xiàng)<option>是否被選中

SelectedIndex 被選中的選項(xiàng)序號(hào),如果沒(méi)有被選中則為-1,對(duì)于多選下拉菜單而言,返回被選中的第一個(gè)選項(xiàng)序號(hào)。從0開(kāi)始計(jì)數(shù)

text 選項(xiàng)的文本(它是option專有的屬性)

value 選項(xiàng)的value值

type 下拉菜單的類型。單選返回select-one,多選返回select-multiple

options 獲取選項(xiàng)的數(shù)組，列如oSelectBox.options[2]表示下拉菜單oSelectBox中的第3項(xiàng)

訪問(wèn)選中項(xiàng)

下拉菜單(單選):

<html>
<head>
<title>下拉菜單，單選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
-->
</style>
<script language="javascript">
function checkSingle(){
    var oForm=document.forms["myForm1"];
    var oSelectBox=oForm.constellation;
    var iChoice=oSelectBox.selectedIndex; //獲取選中項(xiàng)
    alert("您選中了" + oSelectBox.options[iChoice].text); //下拉菜單，單選
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚(yú)</option>
</select>
</p>
<input type="button" onclick="checkSingle()" value="查看選項(xiàng)" />
</form>
</body>
</html>

下拉菜單(多選):

<html>
<head>
<title>下拉菜單，多選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
p{
margin:0px; padding:2px;
}
-->
</style>
<script language="javascript">
function checkMultiple(){
var oForm=document.forms["myForm1"];
var oSelectBox=oForm.constellation;
var aChoices=new Array();
//遍歷整個(gè)下拉菜單
for(var i=0;i<oSelectBox.options.length;i++)
if(oSelectBox.options[i].selected) //如果被選中
aChoices.push(oSelectBox.options[i].text); //壓入到數(shù)組中,可以用于單選的情況;
alert("您選了：" + aChoices.join()); //輸出結(jié)果
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation" multiple="multiple" style="height:180px;">
<option value="Aries">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚(yú)</option>
</select>
</p>
<input type="button" onclick="checkMultiple()" value="查看選項(xiàng)" />
</form>
</body>
</html>

通用的訪問(wèn)下拉菜單選中項(xiàng)的方法:

<script language="javascript">
function getSelectValue(Box){ //Box參數(shù)select標(biāo)簽的ID值
    var oForm=document.forms["myForm1"];
    var oSelectBox=oForm.elements[Box]; //根據(jù)參數(shù)相應(yīng)的選擇下拉菜單
    if(oSelectBox.type=="select-one"){ //判斷是單選還是多選
    var iChoice=oSelectBox.selectedIndex; //獲取選中項(xiàng)
    alert("單選，您選中了" + oSelectBox.options[iChoice].text);
    }else{
    var aChoices=new Array();
    //遍歷整個(gè)下拉菜單
    for(var i=0;i<oSelectBox.options.length;i++)
    if(oSelectBox.options[i].selected) //如果被選中
    aChoices.push(oSelectBox.options[i].text); //壓入到數(shù)組中
    alert("多選，您選了：" + aChoices.join()); //輸出結(jié)果
    }
}
</script>

函數(shù)使用方法:

<select id="constellation1" name="constellation1">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚(yú)</option>
</select>
<input type="button" onclick="getSelectValue('constellation1')" value="查看選項(xiàng)" />

添加、替換、刪除選項(xiàng)

通過(guò)構(gòu)造函數(shù)Option()直接添加value、text等信息，相當(dāng)方便

var oOption=new Option(text,value,defaultSelected,selected)

defaultSelected為布爾型值:1(true)設(shè)置下拉式表單默認(rèn)值,

selected為布爾值:1(true)表示被選中

最后兩項(xiàng)默認(rèn)值為0,如果不希望添加的選項(xiàng)被默認(rèn)選中則可以忽略,添加選項(xiàng)時(shí)通常將<select>列表的第length項(xiàng)直接設(shè)置為新的選項(xiàng),即在末尾增加。

添加選項(xiàng)：

<html>
<head>
<title>添加選項(xiàng)</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box){ //添加選項(xiàng)，參數(shù)為<select>標(biāo)簽的ID值
    var oForm=document.forms["myForm1"];
    var oBox=oForm.elements[Box];
    var oOption=new Option("乒乓球","Pingpang");
    oBox.options[oBox.options.length]=oOption; //在菜單末尾添加選項(xiàng)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball');" />
</form>
</body>
</html>

替換選項(xiàng)

如果下拉菜單中的序號(hào)為已經(jīng)存在了的選項(xiàng),添加時(shí)則會(huì)自動(dòng)替換原有的選項(xiàng)

oBox.options[iNum]=oOption;//替換iNum個(gè)選項(xiàng)

<html>
<head>
<title>替換選項(xiàng)</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function ReplaceOption(Box,iNum){ //替換選項(xiàng),參數(shù)Box為<select>的ID值,iNum為替換的選項(xiàng)序號(hào);
var oForm=document.forms["myForm1"];
var oBox=oForm.elements[Box];
var oOption=new Option("乒乓球","Pingpang");
oBox.options[iNum]=oOption; //替換第iNum個(gè)選項(xiàng)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="籃球替換為乒乓球" onclick="ReplaceOption('ball',1);" />
</form>
</body>
</html>

添加選項(xiàng)到具體位置

<html>
<head>
<title>添加到具體位置</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box,iNum){
var oForm=document.forms["myForm1"];
var oBox=oForm.elements[Box];
var oOption=new Option("乒乓球","Pingpang");
oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball',1);" />
</form>
</body>
</html>

以上代碼IE7中雖然在正確的位置插入了選項(xiàng),但內(nèi)容卻沒(méi)有顯示出來(lái)(bug問(wèn)題)

兼容性更好的代碼,使用方法與以上相同;

<script language="javascript">
function AddOption(Box,iNum){
    var oForm=document.forms["myForm1"];
    var oBox=oForm.elements[Box];
    var oOption=new Option("乒乓球","Pingpang");
    //兼容IE7，先添加選項(xiàng)到最后，再移動(dòng)
    oBox.options[oBox.options.length]=oOption;
    oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>

注意：IE9已經(jīng)解決了bug問(wèn)題

刪除下拉菜單的選項(xiàng):

刪除下拉菜單中的某個(gè)選項(xiàng)時(shí)相對(duì)最簡(jiǎn)單的,只需要將這個(gè)選項(xiàng)設(shè)置為null即可

bBox.options[iNum]=null;

在線咨詢

上一篇：GWB平臺(tái)LOGO是這樣設(shè)計(jì)的
下一篇：蝦皮二面：MySQL支持哪些存儲(chǔ)引擎？MyISAM和

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

iOS 解決微信h5支付無(wú)法直接返回APP的問(wèn)題

您的項(xiàng)目需求