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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
原生js无缝轮播插件使用详解
Mar 09 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
详解JSON.stringify()的5个秘密特性
May 26 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&mysql(六)
2006/10/09 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php一个找二层目录的小东东
2012/08/02 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
JS焦点图切换,上下翻转
2011/05/12 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
Python中多线程的创建及基本调用方法
2016/07/08 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python 决策树算法的实现
2020/10/09 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
linux面试题参考答案(7)
2014/07/24 面试题
学校门卫管理制度
2014/01/30 职场文书
课外科技活动总结
2014/08/27 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android