文档章节

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
博文 61
码字总数 83903
作品 0
哈尔滨
私信 提问
Hybrid 实战:如何完整下载一个 wap 页面

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

halohily
2018/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
你得知道这3个最基础的App技术框架

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

优设网 - 信籽
2015/12/05
0
0
DCloud发布gostream.js,一行代码把wap流量转App流量

Wap流量转化太低,流量主伤不起   随着移动App的兴起,越来越多的网站开始把自身的wap站流量导向自己的App,但是传统的导流方法还是比较老套,比如在网站的首页挂个“下载客户端”的按钮,...

糊涂熊
2016/03/30
0
0
Charles抓包—App资源代理

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

圆儿圈圈
2018/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7重置密码、单用户模式、救援模式、ls命令、chmod命令

在工作当中如果我们错误的配置了文件使服务器不能正常启动或者忘记密码不能登录系统,如何解决这些问题呢?重装系统是可以实现的,但是往往不能轻易重装系统的,下面用忘记密码作为例子讲解如...

李超小牛子
今天
3
0
Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
5
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
3
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
3
0
大数据教程(11.8)Hive1.2.2简介&初体验

上一篇文章分析了Hive1.2.2的安装,本节博主将分享Hive的体验&Hive服务端和客户端的使用方法。 一、Hive与hadoop直接的关系 Hive利用HDFS存储数据,利用MapReduce查询数据。 二、Hive与传统数...

em_aaron
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部