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 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
手机端转换rem适应
Apr 01 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
详解vue 组件注册
Nov 20 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
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
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
asp批量修改记录的代码
2008/06/25 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
python通过post提交数据的方法
2015/05/06 Python
Python OS模块常用函数说明
2015/05/23 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
儿科主治医生个人求职信
2013/09/23 职场文书
高校学生干部的自我评价分享
2013/11/04 职场文书
军训的自我鉴定
2013/12/10 职场文书
村干部培训方案
2014/05/02 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书