于公司的业务需要,为了节省申请开通微信支付的时间和人力,公司决定使用微信h5支付。这样即节省了时间,同时以后所有的APP都能使用h5支付,既方便又快捷。
但是真正做的时候问题来了,当你支付成功之后或者是取消支付的时候会跳转到Safari浏览器,这就很尴尬了,完全无用户体验啊。当时看着Android可以直接返回到APP,心里瞬间不爽了。开始埋怨苹果公司了,但是由于公司的业务必须要做h5,没办法开始找办法解决。
下面开始我的坎坷之路了:
首先你在Xcode中,选择你的工程设置项,选中“TARGETS”一栏,在“info”标签栏的“LSApplicationQueriesSchemes“添加weixin
然后你通过统一下单后台会从微信拿到这么个链接https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmwebprepay_id=wx20180115115052bedf091fba0369993002&package=2975002856给你
拿到这个链接之后我们还无法直接加载webView,如果直接加载的话他会提示
进入微信查了一下,发现需要设置Referer这个请求头的参数,当然微信也给出了例子微信h5支付其他常见错误。针对于这个问题在网上搜索了一下发现有专门针对于微信h5支付设置Referer的文章iOSwebView设置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;
}
}
这个http://www.xxx.com就是你们商户申请H5时提交的授权域名.
走到这一步,你就可以加载webView进行支付了,但是问题来了,不论是支付成功还是取消支付之后他都会跳转到Safari浏览器,而且打开的内容是就是你设置Referer时的授权域名http://www.xxx.com,这个家伙就是我们的公司的主页。
那么,怎么办呢,最后我们经过协商,只要能支付,不管支付成功或者取消支付,只要停留在微信界面就可以了,然后让用户点击右上角手动返回APP,这个是没有办法的办法了。
1
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
通过webView的代理方法来获取到这个链接,然后进行支付,发现还是一样的会跳转到Safari浏览器,当时瞬间懵逼了,怎么会这个样子呢,不信邪的我又让Android那个哥们拦截一个链接给我,尝试一下不会跳转浏览器,我又试了一下自己的拦截的链接还是会跳转到Safari浏览器。我突然明白了这个是我设置了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进行支付都是不行的,他都会跳转到Safari。
我当时想要不用TFHpple解析HTML内容吧,但是仔细一想不行的,因为头部没有Referer,无法解析。最后实在没办法了,都准备放弃了,突然想到了设置scheme,既然我可以Safari可以打开APP,那么我这肯定也能做的。于是我又信心满满的开始我的实验了。
首先要设置scheme,假如scheme设置xxxx,那么你在Safari输入xxxx://就可以打开APP了。做到这就全部明白了,只要设置好Referer和我的scheme对应就行了,然后我开始实验:
Referer设置:http://www.xxx.com ?scheme设置:http://www.xxx.com发现不行
我突然间发现是不是只要是带有h5的授权的域名就可以呢,于是我把公司的一个链接设置成Referer之后我发现我还是能支付的,我擦,突然之间发现了一个新的大陆啊,太激动了,然后为了确保准确性进行了各种尝试,发现只要带有域名的都可以,然后我又进行了一个尝试:就是把http://去掉直接把Referer设置成:www.xxx.com,然后也是能支付的。这样就全部OK了,我把Referer设置成:www.xxx.com://这个样式的然后把scheme设置成:www.xxx.com这样的话支付成功或者取消支付都可以直接返回到APP了。
所以h5支付最终返回APP的解决方案是:把Referer设置成:www.xxx.com://?scheme设置成:www.xxx.com就可以直接返回APP了。
当然目前还没有解决多个APP同时使用同一个授权域名时,怎么返回APP的问题,多个APP使用h5支付的话会导致返回错乱的问题,如果哪位大神知道解决办法的话可以告诉我一下,谢谢!
同样你如果有多个APP被同一家客户使用的话,客户也同意用户点击左上角手动返回的话你可以这样设置Referer: ?www.xxx.com/test://,这样的话你支付成功会直接停留在微信,不会造成返回APP错乱的问题。
过20天的维护升级,国家政务服务平台系统已恢复正常啦(试运行)!
国家政务服务平台
住建部官网首页
企业行政审批
个人行政审批
一建、造价、监理、勘察设计类可以操作上报了,需要提醒的是:请各工程师朋友更新完善一下您手机政务APP的个人信息。
需更新完善的内容包括:
1、基本信息:国籍、民族、性别、学历
2、地址信息:户籍、居住地址、工作单位、注册单位
3、业务信息:邮箱、社保卡号、社保卡发卡地,如果是变更注册,社保卡最好是用上家注册单位的社保号
同时网页版入口也有更新,请点击新链接:http://zwfw.mohurd.gov.cn:8070/zjblogincheck/qjd/index.html?checktype=1(复制链接到浏览器打开哦!)
记得点赞收藏转发,让身边更多的人看到!
拉菜单的属性
length 表示选项<option>的个数
selected 布尔值,表示选项<option>是否被选中
SelectedIndex 被选中的选项序号,如果没有被选中则为-1,对于多选下拉菜单而言,返回被选中的第一个选项序号。从0开始计数
text 选项的文本(它是option专有的属性)
value 选项的value值
type 下拉菜单的类型。单选返回select-one,多选返回select-multiple
options 获取选项的数组,列如oSelectBox.options[2]表示下拉菜单oSelectBox中的第3项
访问选中项
下拉菜单(单选):
<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; //获取选中项
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">双鱼</option>
</select>
</p>
<input type="button" onclick="checkSingle()" value="查看选项" />
</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();
//遍历整个下拉菜单
for(var i=0;i<oSelectBox.options.length;i++)
if(oSelectBox.options[i].selected) //如果被选中
aChoices.push(oSelectBox.options[i].text); //压入到数组中,可以用于单选的情况;
alert("您选了:" + aChoices.join()); //输出结果
}
</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">双鱼</option>
</select>
</p>
<input type="button" onclick="checkMultiple()" value="查看选项" />
</form>
</body>
</html>
通用的访问下拉菜单选中项的方法:
<script language="javascript">
function getSelectValue(Box){ //Box参数select标签的ID值
var oForm=document.forms["myForm1"];
var oSelectBox=oForm.elements[Box]; //根据参数相应的选择下拉菜单
if(oSelectBox.type=="select-one"){ //判断是单选还是多选
var iChoice=oSelectBox.selectedIndex; //获取选中项
alert("单选,您选中了" + oSelectBox.options[iChoice].text);
}else{
var aChoices=new Array();
//遍历整个下拉菜单
for(var i=0;i<oSelectBox.options.length;i++)
if(oSelectBox.options[i].selected) //如果被选中
aChoices.push(oSelectBox.options[i].text); //压入到数组中
alert("多选,您选了:" + aChoices.join()); //输出结果
}
}
</script>
函数使用方法:
<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">双鱼</option>
</select>
<input type="button" onclick="getSelectValue('constellation1')" value="查看选项" />
添加、替换、删除选项
通过构造函数Option()直接添加value、text等信息,相当方便
var oOption=new Option(text,value,defaultSelected,selected)
defaultSelected为布尔型值:1(true)设置下拉式表单默认值,
selected为布尔值:1(true)表示被选中
最后两项默认值为0,如果不希望添加的选项被默认选中则可以忽略,添加选项时通常将<select>列表的第length项直接设置为新的选项,即在末尾增加。
添加选项:
<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){ //添加选项,参数为<select>标签的ID值
var oForm=document.forms["myForm1"];
var oBox=oForm.elements[Box];
var oOption=new Option("乒乓球","Pingpang");
oBox.options[oBox.options.length]=oOption; //在菜单末尾添加选项
}
</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>
替换选项
如果下拉菜单中的序号为已经存在了的选项,添加时则会自动替换原有的选项
oBox.options[iNum]=oOption;//替换iNum个选项
<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 ReplaceOption(Box,iNum){ //替换选项,参数Box为<select>的ID值,iNum为替换的选项序号;
var oForm=document.forms["myForm1"];
var oBox=oForm.elements[Box];
var oOption=new Option("乒乓球","Pingpang");
oBox.options[iNum]=oOption; //替换第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="ReplaceOption('ball',1);" />
</form>
</body>
</html>
添加选项到具体位置
<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中虽然在正确的位置插入了选项,但内容却没有显示出来(bug问题)
兼容性更好的代码,使用方法与以上相同;
<script language="javascript">
function AddOption(Box,iNum){
var oForm=document.forms["myForm1"];
var oBox=oForm.elements[Box];
var oOption=new Option("乒乓球","Pingpang");
//兼容IE7,先添加选项到最后,再移动
oBox.options[oBox.options.length]=oOption;
oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>
注意:IE9已经解决了bug问题
删除下拉菜单的选项:
删除下拉菜单中的某个选项时相对最简单的,只需要将这个选项设置为null即可
bBox.options[iNum]=null;
*请认真填写需求信息,我们会在24小时内与您取得联系。