JavaScript如何调用Native iOS/Android 方法

daydream 发布于2019-08-14 16:49 / 415人阅读

摘要：三调用方法与不同之处在于，接收中文英文参数，无需操作。例如，我想要获取用户，本着驼峰命名规范，我们将函数名称统一定义为。在调试时，发现接收到的函数方法为，导致。

写在前面的话：本文面向web前端工程师，iOS 或 Android 请移步这里stackoverflow。关于app开发模式，这里不再赘述。

一、判断机型

js 调用 Native iOS/Android function 需要使用不同的方法，所以首先要做的是判断用户机型，代码如下：

var u = navigator.userAgent.toLowerCase();
var isApple = /iphone|ipad|ipod|ios/i.test(u);
var isAndroid = /android/i.test(u);

二、调用 Native iOS 方法

通过 js 改变 window.location 值, 来实现调用 iOS function ，这个操作并不是跳转，而是触发了一个即发即弃 (a fire and forget) 事件。代码如下：

//一个参数
window.location = "color://" + color;

//两个参数
window.location = "myscheme://param1/" + value1 + "/param2/" + value2;

iOS 端接收参数需要进行 url 编码处理，可以使用 encodeURIComponent 函数处理。

ps:关于URI和URL
URI(Uniform Resource Identifier) 统一资源标识符
URL(Uniform Resource Locator) 统一资源定位符
URI包含URL和URN，如果URI标识一个人，URL好比这个人的住址，URN则是名字。

三、调用 Native Andriod 方法

与 iOS 不同之处在于，Andriod 接收中文英文参数，无需 encode 操作。实现代码如下：

if(window.AndroidBridge) {
    window.AndroidBridge.changeNavbarBackground(color);
}

四、关于函数名称约定

三方会根据业务需求定义一个通用的函数名称，这个函数名称通常是由web前端工程师定义的。例如，我想要获取用户id，本着驼峰命名规范，我们将函数名称统一定义为 getId() 。在 iOS 调试时，发现iOS接收到的函数方法为 getid() ，导致bug。

ok，问题解决了，若还有其他问题，欢迎给我留言。如果对你有帮助，记得在下方点个推荐吧~~

GPU云服务器云服务器调用JavaScript方法 php中如何调用方法方法调用调用静态方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/66255.html

JavaScript如何调用Native iOS/Android 方法

摘要：三调用方法与不同之处在于，接收中文英文参数，无需操作。例如，我想要获取用户，本着驼峰命名规范，我们将函数名称统一定义为。在调试时，发现接收到的函数方法为，导致。写在前面的话：本文面向web前端工程师，iOS 或 Android 请移步这里stackoverflow。关于app开发模式，这里不再赘述。一、判断机型 js 调用 Native iOS/Android function 需...

chenatu 2019-08-22 10:43 评论0 收藏0
JavaScript如何调用Native iOS/Android 方法

摘要：三调用方法与不同之处在于，接收中文英文参数，无需操作。例如，我想要获取用户，本着驼峰命名规范，我们将函数名称统一定义为。在调试时，发现接收到的函数方法为，导致。写在前面的话：本文面向web前端工程师，iOS 或 Android 请移步这里stackoverflow。关于app开发模式，这里不再赘述。一、判断机型 js 调用 Native iOS/Android function 需...

zengdongbao 2019-08-01 16:00 评论0 收藏0
跨平台技术演进

摘要：接下来，我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年，年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。前言大家好，我是simbawu ，@BooheeFE Team Leader，关于这篇文章，有问题欢迎来这里讨论。随着移动互联网的普及和快速发展，手机成了互联网行业最大的流量分发入口。以及随着5G...

魏宪会 2019-08-30 15:43 评论0 收藏0
跨平台技术演进

摘要：接下来，我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年，年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。前言大家好，我是simbawu ，@BooheeFE Team Leader，关于这篇文章，有问题欢迎来这里讨论。随着移动互联网的普及和快速发展，手机成了互联网行业最大的流量分发入口。以及随着5G...

MasonEast 2019-08-26 13:39 评论0 收藏0