JS调用Android、Ios原生控件


Posted in Javascript onJanuary 06, 2017

在上一篇博客(详解JS与APP原生控件交互)中已经和大家聊了,关于JS与Android、Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android、Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时,提高代码质量,实现两者在网页端代码的统一。

首先我们先看一下Ios调用JS的方法实现:

//无参调用
function SwiftCallJs1(){}
//有参调用
function SwiftCallJs2(name, message){}

紧接着我们看一下Android调用JS的方法实现:

//无参调用
function AndroidCallJs1(){}
//有参调用
function AndroidCallJs2(data){}

从上面的代码中你是否发现,Android与Ios调用JS时,JS处理函数两者在无参调用时是相通的。有参调用不同点是Ios是一对一直接传递,Android则是字符串传递,当然我们可以通过在Android和Ios端统一传参使用JSON格式,JS支持JSON解析,从而实现两个平台在有参方法调用上的统一。

看完上面的Ios与Android调用JS,下面我们看一下JS调用Android与Ios原生通信的异同点。

首先我们看一下JS调用Android的方法实现:

//无参调用
function callNull(){
 android.CallNull(); 
}
//有参调用
function callMessage(){
 android.CallMessage("msg");
}
//有参调用--json
function callJson(){
 var json = "[{\"name\":\"满艺网\",\"url\":\"www.manyiaby.com\"}]";
 android.CallJson(json);
}

接下来我们看一下JS调用Ios的方法实现:

//一:无前缀调用
//无参调用
function test1(){
 Test1();
}
//有参调用
function test2(){
 Test2("满艺网","www.manyiaby.com");
}
//二:有前缀调用
//无参调用--带返回操作结果处理
function callSystem(){
 Ios.CallSystem();
}
//操作结果处理函数
function JSCallNullIosResult(){}
//有参调用
function callWithMsg(){
 Ios.CallWithMsg("满艺网","www.manyiaby.com");
}
//有参调用--json
function callWithJson(){
 var json = "{\"name\":\"满艺网\",\"url\":\"www.manyiaby.com\"}";
 Ios.CallWithJson(json);
}
//有参调用--带返回结果处理
function callWithJsonResult(){
 var json = "{\"name\":\"满艺网\",\"url\":\"www.manyiaby.com\"}";
 Ios.CallWithJsonResult(json);
}
function JSCallJsonIosResult(data){
 alert("name:"+data["name"]); 
}

看到这里你一定发现了不同点,1、Android没有不带前缀的方法调用,2、Android没有方法调用后的操作结果返回处理逻辑。对于第一点,就目前我所认识到的是原生没有通过具体的实现逻辑,不过这个点不影响我们的开发,因为Ios是支持前缀方法调用的。对于第二点,我的理解是对于返回处理函数,我们可以在开发的添加上去,从而提高Ios用户的使用体验,并且处理函数不会影响到方法的调用。

好了到这里就和大家聊完了,当然如果所述与您的理解有偏差,还望指点一二。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
JS正则匹配中文的方法示例
Jan 06 #Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 #Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 #Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 #Javascript
js实现前端分页页码管理
Jan 06 #Javascript
纯js实现倒计时功能
Jan 06 #Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 #Javascript
You might like
PHP数据流应用的一个简单实例
2012/09/14 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
PHP中header用法小结
2016/05/23 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
python数组过滤实现方法
2015/07/27 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
python 实现兔子生兔子示例
2019/11/21 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
python批量修改交换机密码的示例
2020/09/22 Python
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
总经理助理岗位职责
2013/11/08 职场文书
高中毕业自我鉴定
2013/12/16 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
升旗仪式主持词
2014/03/19 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
家长学校工作方案
2014/05/07 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
公司年底活动方案
2014/08/17 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
Python 多线程之threading 模块的使用
2021/04/14 Python