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 相关文章推荐
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 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
srcElement表格样式
2006/09/03 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
javascript时区函数介绍
2012/09/14 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
layui分页效果实现代码
2017/05/19 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
python实现按行分割文件
2019/07/22 Python
一行python实现树形结构的方法
2019/08/09 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
夜不归宿检讨书
2014/02/25 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
年终奖发放方案
2014/06/02 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
大学生团日活动总结
2015/05/06 职场文书
学校教学工作总结2015
2015/05/19 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
工作简报范文
2015/07/21 职场文书