跨android和iOS平台的js和原生代码相互调用示例资源-CSDN下载

共3个文件

zip：1个

7z：1个

htm：1个

webview

android

ios

需积分: 11 197 浏览量 2015-10-24 19:29:52 上传评论收藏 702KB 7Z 举报

在移动应用开发中，跨平台开发是一个常见的需求，它允许开发者使用一套代码库来构建同时运行在Android和iOS设备上的应用程序。在这个场景下，JavaScript（JS）与原生代码（如Java for Android或Swift/Objective-C for iOS）的交互成为了一个关键的技术。本示例将探讨如何在Android和iOS平台上实现JS与原生代码的相互调用。 **1. JavaScript与原生代码的交互基础** - **WebView**: 在Android和iOS中，`WebView`组件是实现JS与原生代码交互的基础。`WebView`是一个可以加载和显示HTML内容的视图，它支持加载网页并执行其中的JavaScript代码。通过`WebView`，我们可以在应用程序中嵌入网页，进而实现JS与原生代码的通信。 - **JavaScriptCore**: iOS内置了JavaScriptCore框架，它是Safari浏览器的核心，支持在原生应用中执行JavaScript。而在Android中，虽然没有直接提供JavaScriptCore，但`WebView`已经包含了JavaScript引擎，同样支持运行JS代码。 **2. JS调用原生代码** - **`addJavascriptInterface()` (Android)**: 在Android中，我们可以使用`addJavascriptInterface()`方法将一个Java对象暴露给JavaScript。这个对象的方法会被映射到JavaScript中，从而让JavaScript可以直接调用这些方法。 ```java WebView webView = new WebView(this); webView.addJavascriptInterface(new MyObject(), "myObject"); ``` - **`WKUserContentController` (iOS)**: 在iOS中，我们需要创建一个`WKUserContentController`，设置其`WKUserScript`，然后将其添加到`WKWebView`的配置中。通过这种方式，我们可以在JavaScript中注入自定义函数，这些函数可以在原生代码中被实现。 ```swift let userContentController = WKUserContentController() userContentController.add(self, name: "myNativeFunction") let configuration = WKWebViewConfiguration() configuration.userContentController = userContentController let webView = WKWebView(frame: .zero, configuration: configuration) ``` **3. 原生代码调用JS** - **`loadUrl()` (Android)**: Android的`WebView`提供了`loadUrl()`方法，可以用来执行任意的JavaScript代码。 ```java webView.loadUrl("javascript:alert('Hello, Native!')"); ``` - **`evaluateJavaScript()` (iOS)**: iOS的`WKWebView`提供了`evaluateJavaScript()`方法，可以执行JavaScript并获取其结果。 ```swift webView.evaluateJavaScript("alert('Hello, Native!')") { (result, error) in // 处理结果或错误 } ``` **4. 示例代码** 在提供的`jswebview2.htm`中，可能包含一个简单的HTML页面，展示了如何调用JavaScript接口。在`JSWebViewDemo`项目中，可以看到Android和iOS的具体实现，包括如何设置`WebView`，以及如何定义和调用原生接口。通过`WebView`组件和适当的API，开发者可以轻松地在Android和iOS上实现在JS与原生代码之间的交互，使得跨平台应用的开发变得更加灵活和高效。这份示例代码将帮助开发者更好地理解这一过程，并在实际项目中加以应用。

资源推荐

资源详情

资源评论

收起资源包目录

JSWebViewDemo 20151023.7z （3个子文件）

JSWebViewDemo.7z 671KB

jswebview2.htm 5KB

JSWebViewDemo.zip 31KB

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>JS WebView Demo</title> <script language="JavaScript" type="text/javascript"> var ua = navigator.userAgent.toLowerCase(); if (/iphone|ipad|ipod/.test(ua)) { alert("iphone"); } else if (/android/.test(ua)) { alert("android"); } else{ alert("pc"); } function callByNative(){ alert("欢迎 " + document.all.username.value + "!"); } function qichaload(){ if (/iphone|ipad|ipod/.test(ua)) { document.location = 'QiCha.load("http://www.baidu.com")'; } else if (/android/.test(ua)) { QiCha.load("http://www.baidu.com"); } } function qichaback(){ if (/iphone|ipad|ipod/.test(ua)) { document.location = "QiCha.back"; } else if (/android/.test(ua)) { QiCha.back(); } } </script> </head> <body> <div align="center"> <div style="text-align: center; width: 200px;"> <table cellpadding="5" cellspacing="5" border="0" align="center"> <tr> <td align="left"><label for="u01">用户名:</label></td> </tr> <tr> <td><input type="text" name="username" size="25" maxlength="50" id="u01" value="admin"></td> </tr> <tr> <td align="left"><label for="p01">密码:</label></td> </tr> <tr> <td><input type="password" name="password" size="25" maxlength="50" value="admin" id="p01"></td> </tr> <tr> <td align="center"><input type="button" value="callByNative" onclick="javascript:callByNative();"></td> </tr> <tr> <td align="center"><input type="button" value="Qicha.back" onclick="javascript:qichaback();"></td> </tr> <tr> <td align="center"><input type="button" value="Qicha.load(url)" onclick="javascript:qichaload();"></td> </tr> <tr> <td align="center">JS WebView Demo, 版本: 0.0.1 </td> </tr> </table> </div> </div> </body> </html>

评论收藏

内容反馈