重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
在ios中,用H5编写了可以打电话的页面。 点击“拨打”按钮后可以进行跳转到打电话的页面(跳转这一块应该是和浏览器有关),跳转之后拨打完电话能够回到之前打电话的页面。
成都创新互联成立于2013年,我们提供高端网站建设、成都网站制作、成都网站设计、网站定制、营销型网站建设、小程序制作、微信公众号开发、营销推广服务,提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地,为成都纸箱企业提供源源不断的流量和订单咨询。
1.UIWebView
方法1:NSString *location =[webViewstringByEvaluatingJavaScriptFromString:@"document.location"];
方法2:NSLog(@"webView location = '%@'", webView.request.URL.absoluteString);
以上两种一定要放在页面成功加载之后才可以的!
2.WKWebview
#pragma mark 在发送请求之前,决定是否跳转
开发了个h5的页面,嵌入到ios项目中,其中用到了input标签点击可以选择文件,但是发现弹起的系统弹窗是英文的。
这里不是H5的问题,而是IOS项目需要配置语言,IOS端项目语言默认是英语,需要修改为中文
在info设置中,如下所示是默认的
把$(DEVELOPMENT_LANGUAGE)修改为China即可
如果不行,需要添加语言,在project - info - Localizations中添加简体中文
如下图所示:
成功效果图
1、发起下单请求( 调用统一下单接口 )注:交易类型trade_type=MWEB
2、统一下单接口返回支付相关参数给商户后台,如支付跳转url(参数名“mweb_url”),商户通过mweb_url调起微信支付中间页。如: ;package=600759311redirect_url=http%3a%2f%2
3、中间页进行H5权限的校验,安全性检查( 具体错误见微信官方文档 )
4、如果权限校验成功,微信支付中间页会发起支付请求。请求完毕跳到回调页面(由redirect_url决定)。APP需要在webView中监听这个请求,打开微信进行支付。如: weixin://wap/pay?prepayid%3Dwx2718114258281033efb8751f1574826586package=2965581453noncestr=1545905512sign=cb0f6dbd067549a04aada9c3eef09aac
5、微信支付完毕跳回APP。
HTTP Referer是header的一部分,当浏览器向web服务器发起请求的时,一般会带上Referer,告诉服务器我是从哪个页面链接过来。微信中间页会对Referer进行校验,非安全域名将不能正常加载。
redirect_url是微信中间页唤起微信支付之后,页面重定向的地址。中间页唤起微信支付后会跳转到指定的redirect_url。并且微信APP在支付完成时,也是通过redirect_url回调结果,redirect_url一般是一个页面地址,所以微信支付完成会打开Safari浏览器。本文通过修改redirect_url,实现微信支付完毕跳回当前APP。
需要将微信H5支付的安全域名配置成scheme,微信支付完成会通过这个scheme跳转回APP。
再shouldStartLoadWithRequest:方法里面拦截微信中间页(以“ ”开头的请求),截取redirect_url,如果redirect_url已经被替换成scheme不拦截,如果没有被替换,拦截请求,保存当前的redirect_url。创建一个新的微信中间页请求,将redirect_url替换成“安全域名://”(微信支付完毕会通过openURL打开当前APP,如果不替换redirect_url,微信支付完毕会打开Safari浏览器。)。设置“Referer”为安全域名(微信会校验Referer,不是安全域名会加载失败),重新load请求。
微信中间页加载成功后,会收到一个打开微信的请求,用openURL:打开这个url实现跳转到微信支付。
微信中间页跳转到微信时,会将页面从定向到redirect_url,由于redirect_url被我们修改为scheme,所以需要拦截这个非法的scheme请求,替换成记录下的redirect_url。
以UIWebView为例
还有一篇文章讲的是H5支付封装,H5支付不仅可以在网页上使用,原生也可以调用。具体内容见: iOS-H5支付(微信、支付宝)原生封装
这种方法是利用拦截webView响应的url,对url进行处理,同时把需要执行的方法名和参数都放入url中,实现app和H5之前的方法交互:
这个属性是WKWebView才有的属性,主要是通过WKScriptMessageHandler的代理方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 进行交互。
注意:
这两个方法是成对出现的,每次调用了add就必须调用remove。
1.建立 WebViewJavaScriptBridge 和 WebView 之间的关系。
_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
2.方法调用
1)oc调js方法(通过data可以传值,通过 response可以接受js那边的返回值 )
2)js调oc方法(可以通过data给oc方法传值,使用responseCallback将值再返回给js)
最后:iOS调用H5方法
UIWebView: NSString *result = [webView stringByEvaluatingJavaScriptFromString:@"javascript:add(3,5);"];
WKWebView: [self.webView evaluateJavaScript:@"show()" completionHandler:^(id _Nullable response, NSError * _Nullable error) { //TODO }];
H5,即是html5,是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式。
heml5:超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
好吧,我碰到的是路径原因导致的,直接拖H5文件到工程中或者把H5文件放入工程文件然后再拖到项目左侧工程列表一栏都会导致路径错误, 正确的做法是把H5文件放入工程文件,然后使用addFilesTo项目左侧工程列表一栏。 花了小半天才搞清楚原因,也提醒了我加入工程文件时一定要操作规范。