文档章节

Hybrid结构手机客户端中wap页面与手机原生系统的交互方式

哼_哼
 哼_哼
发布于 2017/07/07 15:34
字数 620
阅读 24
收藏 0

在手机客户端开发中,总是有很多原因需要内嵌wap来完成一些效果或提高开发效率。

本文介绍一下内嵌的wap页怎样与原生系统功能进行交互。

 

Android

android使用WebView控件就可以很便捷的和wap页的JavaScript进行交互。

通常只需要以下几步。

  • WebView开启JavaScript脚本执行。
  • WebView设置供JavaScript调用的交互接口。
  • 客户端和网页端编写调用对方的代码。

开启JavaScript脚本执行

在创建WebView控件的时候我们需要,设置开启JavaScript脚本执行,并添加JavaScript交互接口。

*具体WebView的创建方式在这里不详述我也不是安卓程序员

WebSettings settings = myWebView.getSettings(); 
settings.setJavaScriptEnabled(true); 
myWebView.addJavascriptInterface(new JsInteration(), "control");

 

设置供JavaScript交互接口

在JavaScript接口类中,将所有的接口方法使用@JavascriptInterface进行注释

public class JsInteration 
{ 
  @JavascriptInterface 
  public void toastMessage(String message) {
     ......
  } 

  @JavascriptInterface 
  public void onSumResult(int result) { 
     ......
  } 
}

 

wap页调用客户端JavaScript接口

在wap页JavaScript使用JavaScriptInterface对象执行接口方法

JavaScriptInterface.toastMessage(‘message’);
JavaScriptInterface.onSumResult(100);

 

客户端调用wap页JavaScript方法

在客户端java代码中使用WebView的loadUrl方法来调用JavaScript方法。

webView.loadUrl(“javascript:methodName(parameterValues)”)

 

IOS

Objective-C语言调用JavaScript语言,是通过UIWebView的 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;的方法来实现的。该方法向UIWebView传递一段需要执行的JavaScript代码最后获取执行结果。

 

IOS编写拦截请求的方法

在webView的代理方法中去拦截自定义的协议Toyun://如果是此协议则据此判断JavaStript想要做的事情,调用原生应用的方法,这些都是提前约定好的,同时阻止此链接的跳转。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *url = request.URL.absoluteString;
    if ([url rangeOfString:@"toyun://"].location != NSNotFound) { 
        // url的协议头是Toyun
        NSLog(@"callCamera");
        return NO;
    }
    return YES;
}

 

wap调用客户端IOS接口

wap使用页面重定向,重定向地址的头填写和IOS端约定好的头,IOS会拦截请求并调用原生方法。

window.location.href = 'toyun://callCamera';

 

客户端调用wap页JavaScript方法

在OC中,所有表示JS中对象,都用JSValue来创建,通过objectForKeyedSubscript方法或者直接使用下标的方法获取JS对象,然后使用callWithArguments方法来执行函数

// 方法一.   JSValue *function = [self.context objectForKeyedSubscript:@"factorial"];
// 方法二.
JSValue * function = self.context[@"factorial"];
JSValue *result = [function callWithArguments:@[inputNumber]];
self.showLable.text = [NSString stringWithFormat:@"%@", [result toNumber]];

 

© 著作权归作者所有

共有 人打赏支持
下一篇: HTTP协议介绍
哼_哼
粉丝 9
博文 60
码字总数 81331
作品 0
哈尔滨
私信 提问
Hybrid 实战:如何完整下载一个 wap 页面

本文的读者需要有一定的 Hybrid 基础,相关的概念已经有很多优秀的文章进行过讲解,这里不再赘述。本文的重点在于如何基于 Hybrid 框架,在移动端(不限于具体平台)完成一个 wap 页面的完整...

halohily
09/23
0
0
浅谈Native、Web App、Hybrid、RN 和 Weex优劣

一句话概要 Native、Web App、Hybrid、React Native(后面以RN简称)、Weex 间的异同点,后期同步 小程序 和 PWA App常用开发模式【简介】 此处App为应用,application,并非我们通常讲的手机...

木羽zwwill
2017/09/19
0
0
App开发需要了解的基本技术

本文针对小白用户对App做一个简单的介绍,首先要了解App都有哪些类型,不同的类型适用于哪些需求,用户可以根据自己的需求选择不同的App开发。 一 App有哪些形式 WebApp:简单来说,Web App...

duduo丶
2016/05/09
242
0
你得知道这3个最基础的App技术框架

原文出处:优设网 - 信籽 不知道大家有没有遇到过这种情景,当你做好一个设计方案,满心欢喜地给开发讲解方案的思路和创意时,开发突然说一句:“这个方案实现不了”,这时你整个人都不好了,...

优设网 - 信籽
2015/12/05
0
0
Charles抓包—App资源代理

在开发Hybrid App的时候,会遇到因为native环境不同,出现的样式不对及代码bug。 因为需要写一点原生代码与native进行交互,而安卓和ios的交互方式不一样并且一定要在app中调试,所以会遇到反...

圆儿圈圈
10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里千万级高性能、高并发架构的经验之谈

架构以及我理解中架构的本质 在开始谈我对架构本质的理解之前,先谈谈对今天技术沙龙主题的个人见解,千万级规模的网站感觉数量级是非常大的,对这个数量级我们战略上 要重 视 它 , 战术上又...

别打我会飞
20分钟前
3
0
Adnroid架构的详细说明

armeabi armeabi是一个非常老的基于ARM的架构。从Android 4.4开始,CDD(compatibility definition)严格要求ARMv7读取CDD文档。 CDD是Google向设备制造商提供的每个Android版本的规范,它包...

CrazyManDF
22分钟前
3
0
微信小程序内嵌网页web-view

web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。 客户端 6.7.2 版本开始,navigationStyle: custom 对 <web-view> 组件无...

xiaogg
23分钟前
2
0
单例模式

第一种方式 public class SingletonA { public static final SingletonA INSTANCE = new SingletonA(); private SingletonA(){ //do something }} 第二种方式 public......

wuyiyi
23分钟前
2
0
git: Authentication failed for错误解决

如果push遇到在输入密码是输错后,就会报这个错误fatal: Authentication failed for 解决办法: git config --system --unset credential.helper 之后你在push就会提示输入名称和密码...

落雪飞声
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部