返回顶部
首页 > 资讯 > 移动开发 >JS调用Android、Ios原生控件
  • 622
分享到

JS调用Android、Ios原生控件

IOSjsAndroid 2022-06-06 11:06:18 622人浏览 八月长安
摘要

在上一篇博客(详解js与APP原生控件交互)中已经和大家聊了,关于JS与Android、iOS原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android、io

在上一篇博客(详解js与APP原生控件交互)中已经和大家聊了,关于JS与AndroidiOS原生控件之间相互通信的详细代码实现,今天我们一起聊一下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用户的使用体验,并且处理函数不会影响到方法的调用。

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


--结束END--

本文标题: JS调用Android、Ios原生控件

本文链接: https://lsjlt.com/news/28403.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS调用Android、Ios原生控件
    在上一篇博客(详解JS与APP原生控件交互)中已经和大家聊了,关于JS与Android、Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android、Io...
    99+
    2022-06-06
    IOS js Android
  • 原生js实现上传图片控件
    本文实例为大家分享了js实现上传图片控件的具体代码,供大家参考,具体内容如下 一、修改原生 input 样式 html 结构 <div class="card"> ...
    99+
    2024-04-02
  • 原生JS实现分页点击控件
    这是一个面试题,要求使用原生JS实现一个分页点击控件,供大家参考,具体内容如下 1、点击首页、上一页、下一页和末页要实现相应的数字编号变红。 2、在页数1 不能够点击首页和上一页。 ...
    99+
    2024-04-02
  • iOS使用原生AVCapture系列
    概述: 可用于音频、二维码、拍照、录制视频 (均可自定义界面) 常见的输出信号: AVCaptureAudioDataOutput 音频输出 AVCaptureFileO...
    99+
    2022-06-02
    iOS AVCapture
  • Android实现IOS相机滑动控件
    IOS相比于Android,动画效果是一方面优势,IOS相机切换时滑动的动画很不错,看着是有一个3D的效果,而且变化感觉很自然。Android也可以通过Graphics下面的C...
    99+
    2022-06-06
    IOS Android
  • Android高仿IOS 滚轮选择控件
    最近根据项目需要,整理了一个相对比较全面的 WheelView 使用控件,借用之前看到的一句话来说,就是站在巨人肩膀上,进行了一些小调整。 这里先贴上效果图 一般常用的时间...
    99+
    2022-06-06
    选择 IOS Android
  • 原生js+jquery+ajax请求以及jsonp如何调用
    这篇文章主要为大家展示了“原生js+jquery+ajax请求以及jsonp如何调用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“原生js+jquery+aja...
    99+
    2024-04-02
  • 原生Js实现日历挂件
    本文实例为大家分享了js实现日历挂件的具体代码,供大家参考,具体内容如下 Css code #date { width: 220px; padding-bottom: ...
    99+
    2024-04-02
  • 原生JS实现文件上传
    本文实例为大家分享了JS实现文件上传的具体代码,供大家参考,具体内容如下 一、目的: 实现上传图片功能 二、效果: 三、思路: 用input标签自带的上传,先隐藏掉,给上传按钮添加...
    99+
    2024-04-02
  • Android控件PopupWindow模仿ios底部弹窗
    前言 在H5火热的时代,许多框架都出了底部弹窗的控件,在H5被称为弹出菜单ActionSheet,今天我们也来模仿一个ios的底部弹窗,取材于苹果QQ的选择头像功能。 正文 ...
    99+
    2022-06-06
    弹窗 popupwindow IOS Android
  • 怎么用原生JS实现文件上传
    本篇内容主要讲解“怎么用原生JS实现文件上传”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用原生JS实现文件上传”吧!一、目的:实现上传图片功能二、效果:三、思路:用input标签自带的上传...
    99+
    2023-07-02
  • dedecms广告生成JS文件和JS调用-DEDE广告优化
    最近发现DEDE调用广告占用CPU过高,所以还是改为了js调用,不得不舍弃到期自动下架的功能了。(JS也能实现过期自动更换广告功能,期待高手开发) 原调用方式: 方法1:<script src='/plus/ad_...
    99+
    2022-06-12
    dedecms 生成JS
  • js原生瀑布流插件制作
    本文实例为大家分享了js原生瀑布流插件制作的具体代码,供大家参考,具体内容如下 先看效果 和普通的瀑布流是一样的,在调用时制需要传入容器,图片以及图片宽度即可直接生成瀑布流 话不多...
    99+
    2024-04-02
  • js原生轮播图插件制作
    本文实例为大家分享了js原生轮播图插件制作的具体代码,供大家参考,具体内容如下 调用时也只需要写一个DIV即可 调用的js部分配置内容: 传入轮播图需显示的位置(div) 传入图...
    99+
    2024-04-02
  • Android NDK 生成以及调用so 文件
    1.使用NDK来生成so文件: hello-jni.c 函数名Java +包名+函数名字 2.修改Android.mk文件 LOCAL_SRC_FILES :=hello-j...
    99+
    2022-06-06
    ndk Android
  • uniapp全屏弹窗,覆盖原生控件导航栏和tabbar,全局调用
    uniapp全屏弹窗,覆盖原生控件导航栏和tabbar,全局调用 在uniapp中popup弹窗及对话框的遮罩层是覆盖不了原生的导航栏和tab栏的,在tabbar页中使用弹出框会非常的违和,接下来告诉...
    99+
    2023-09-10
    前端 uni-app ios
  • 原生Js如何实现日历挂件
    本篇内容主要讲解“原生Js如何实现日历挂件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“原生Js如何实现日历挂件”吧!JS是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释...
    99+
    2023-06-14
  • Android中js和原生交互的示例代码
    本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下:加载webview的类public class MainActivity extends Activity { @Override protected void ...
    99+
    2023-05-30
    android js 交互
  • uniapp原生插件开发调用第三方SDK
    uniapp安卓官方SDKhttps://nativesupport.dcloud.net.cn/AppDocs/download/android.html 官方uni原生插件开发教程(android)网址:https://natives...
    99+
    2023-08-31
    uni-app android android studio 前端 Powered by 金山文档
  • 我对学习delphiTeacher的《delphi调用及封装Android原生控件》的学习和研究点滴体会之二
    我对学习delphiTeacher的《delphi调用及封装Android原生控件》的 学习和研究点滴体会之二         摘要:         本文为3月21日晚学习了...
    99+
    2022-06-06
    Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作