文档章节

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

啊哼哼
 啊哼哼
发布于 2017/07/07 15:34
字数 620
阅读 14
收藏 0
点赞 0
评论 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]];

 

© 著作权归作者所有

共有 人打赏支持
啊哼哼
粉丝 7
博文 56
码字总数 76453
作品 0
哈尔滨
浅谈Native、Web App、Hybrid、RN 和 Weex优劣

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

木羽zwwill ⋅ 2017/09/19 ⋅ 0

手机网页应用的交互设计

谈 HTML5为提高手机网页的体验提供了诸多的可能性,交互效果越来越接近原生App,故而成为Web App,有望将APP功能引向浏览器,让移动平台的竞争由系统平台转向了浏览器之间。 Web App比起原生...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

App开发需要了解的基本技术

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

duduo丶 ⋅ 2016/05/09 ⋅ 0

你得知道这3个最基础的App技术框架

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

优设网 - 信籽 ⋅ 2015/12/05 ⋅ 0

appcan是什么

背景 手机操作系统很多如Android,iOS,Windows Phone,Symbian……,要想克服不同手机平台的差异,实现应用的统一覆盖异常困难.开发人员稀缺,成本太高,进度太慢,无线网络太复杂,门槛障碍太...

为梦而来 ⋅ 2013/08/26 ⋅ 0

你得知道这3个最基础的APP技术框架

出处:优设网 作者:信籽 链接:http://www.uisdc.com/3-basic-app-technical-framework 信籽(手淘设计师):不知道大家有没有遇到过这种情景,当你做好一个设计方案,满心欢喜地给开发讲解...

数通畅联 ⋅ 2015/12/15 ⋅ 0

手机软件的信息架构

手机与用户交互的过程,其实是信息的交互,手机和用户都在输出和输入信息,触摸屏和按键只是用户输入信息的方式 Web信息架构包括组织系统、标签系统、导航系统和搜索系统,这些对大量数据的处...

junwong ⋅ 2012/02/29 ⋅ 0

从Web到WAP移植的设计原则

从Web端直接移植为WAP2.0形式,突出的矛盾是信息架构不适应小屏幕设备,垂直页面的冗长和WAP2.0表现形式的限制。 提升小屏幕浏览的体验,在设计中应包含以下几个核心任务: 控制信息的维度 ...

小编辑 ⋅ 2010/07/22 ⋅ 5

求解疑/建议:关于Android、组态软件、根据URL解析出标题/正文内容 等的问题

求解疑/建议:关于Android、组态软件、根据URL解析出标题/正文内容 等的问题 因为这关系到我能否有机会继续升读本科继续学习(我现在是专科),盼各位前辈多多指点! 简易安卓客户端新闻发布...

wkl17 ⋅ 2014/03/31 ⋅ 1

史上最 IOS 风的 Wap 主题-CoreThink 专用 Wap 主题 1.3.0 发布

基于Framework7的手机Wap版主题,该版本具有IOS原生APP的交互体验,可配合官方的APP源码,实现一键打包分发出IOS和安卓版本的APP,将开发成本及程序升级成本降到最低。 特性: IOS原生体验 ...

lyunweb ⋅ 2016/04/06 ⋅ 5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

来自一个优秀Java工程师的简历

写在前面: 鉴于前几天的一份前端简历,虽然带着很多不看好的声音,但却帮助了很多正在求职路上的人,不管评论怎么说,我还是决定要贴出一份后端的简历。 XXX ID:357912485 目前正在找工作 ...

颖伙虫 ⋅ 22分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部