文档章节

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

哼_哼
 哼_哼
发布于 2017/07/07 15:34
字数 620
阅读 22
收藏 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]];

 

© 著作权归作者所有

共有 人打赏支持
哼_哼
粉丝 8
博文 57
码字总数 77252
作品 0
哈尔滨
Hybrid 实战:如何完整下载一个 wap 页面

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

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

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

数通畅联
2015/12/15
140
0

没有更多内容

加载失败,请刷新页面

加载更多

多线程

1. 多线程概念。并发和并行的概念。 多线程指的是一段时间内cpu同时执行多个线程。一个程序至少运行>=1个进程,进程就是运行中的程序,而一个进程至少运行>=1个线程,线程是操作系统能调度的...

鱼想吃肉
今天
0
0
HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
今天
3
0
redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
今天
2
0
php foreach

<?php// 数组的引用$a=array(1,2,3,4,5);foreach($a as $key=>&$value){$value=$value*2;}print_r($a);echo " $key -------------------$value\r\n";/** * ...

小张525
今天
3
0
12-利用思维导图梳理JavaSE-多线程

12-利用思维导图梳理JavaSE-多线程 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一...

飞鱼说编程
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部