在上一篇博客中已经和大家聊了,关于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用户的使用体验,并且处理函数不会影响到方法的调用。

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

JS调用Android、Ios原生控件的更多相关文章

  1. 在webView 中使用JS 调用 Android / IOS的函数 Function

    最近做一个项目,混合了NativeCode 和 HTML,为了便于JS 调用App的一些方法,统一封装一个Js方法,记录如下 Android 端首先要再WebView中允许JS的调用 WebView ...

  2. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  3. 带着问题写React Native原生控件--Android视频直播控件

    最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法: 现在条件:视频播放控件(开源的ijk ...

  4. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  5. [开源]在iOS上实现Android风格的控件Toast

    [开源]在iOS上实现Android风格的控件Toast iOS的风格和Apple其他产品一样,简单而粗暴.没有给人其他选择的余地,让你又爱又恨.同样的,Apple对待iOS平台的开发人员和对待大众消 ...

  6. android 仿ios开关控件

    ios一些控件还是挺美丽的,可是对android程序猿来说可能比較苦逼,由于ios一些看起来简单的效果对android来说可能就没那么简单了,可是没办法非常多产品都是拿ios的一些控件叫android ...

  7. 论如何在手机端web前端实现自定义原生控件的样式

    手机开发webapp的同学一定遇到过这样问题,如何为丑极了的手机元素应用自定义的样式.首先,要弄清楚为什么要定义手机原生控件的样式,就需要看看手机的那些原生框样式的丑陋摸样: android: ios ...

  8. js调用android本地java代码

    js调用android本地java代码 当在Android上使用WebView控件开发一个Web应用时,可以创建一个通过Javascript调用Android端java代码的接口.也就是可以通过Jav ...

  9. Android的WebView控件载入网页显示速度慢的究极解决方案

    Android的WebView控件载入网页显示速度慢的究极解决方案 [转载来源自http://hi.baidu.com/goldchocobo/] 秒(甚至更多)时间才会显示出来.研究了很久,搜遍了国 ...

随机推荐

  1. App开发:模拟服务器数据接口 - MockApi

    为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块.本篇文章就尝试为使用gradle的android项目设计实现Moc ...

  2. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  3. Spring Enable annotation – writing a custom Enable annotation

    原文地址:https://www.javacodegeeks.com/2015/04/spring-enable-annotation-writing-a-custom-enable-annotati ...

  4. 拼图小游戏之计算后样式与CSS动画的冲突

    先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...

  5. Entity Framework 延伸系列目录

    1.采用MiniProfiler监控EF与.NET MVC项目 2.采用EntityFramework.Extended 对EF进行扩展 3.EntityFramework执行存储过程中遇到的那些坑 ...

  6. The Zen of Python

    Beautiful is better than ugly. 优美总比丑陋好Explicit is better than implicit. 直率总比含蓄好Simple is better than ...

  7. iOS从零开始学习直播之2.采集

      直播的采集由采集的设备(摄像头.话筒)不同分为视频采集和音频采集,本篇文章会分别介绍. 1.采集步骤   1.创建捕捉会话(AVCaptureSession),iOS调用相机和话筒之前都需要创建捕 ...

  8. Mysql - 存储过程/自定义函数

    在数据库操作中, 尤其是碰到一些复杂一些的系统, 不可避免的, 会用到函数/自定义函数, 或者存储过程. 实际项目中, 自定义函数和存储过程是越少越好, 因为这个东西多了, 也是一个非常难以维护的地方 ...

  9. BZOJ 3626: [LNOI2014]LCA [树链剖分 离线|主席树]

    3626: [LNOI2014]LCA Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2050  Solved: 817[Submit][Status ...

  10. mono for android 自定义titleBar Actionbar 顶部导航栏 修改 样式 学习

    以前的我是没有做笔记的习惯的,学习了后觉得自己能记住,但是最近发现很多学的东西都忘记了,所有现在一有新的知识,就记下来吧. 最近又做一个mono for android 的项目 这次调整比较大,上次做 ...