[翻译]Nativescript 中 Web 视图与 Android/IOS 的双向通信
English document From http://shripalsoni.com/blog/nativescript-webview-native-bi-directional-communication/
Nativescript 中 Web 视图与 Android/IOS 的双向通信
Nativescript 提供跨平台的 web 视图 ui 元素。它为在我们的页面中显示 web 视图内容提供了服务。
但是, 如果您希望将一些数据发送到 web 视图或从 web 视图获取一些数据, 则需要为此编写特定于平台的代码。因此, 与其在每个应用程序中编写所有这样的代码, 不如有一个插件。对？
我已经创建了nativescript web 视图接口插件以实现此目的。您可以克隆演示应用程序, 以便快速入门使用此插件。
演示应用的输出如下所示:
Android
Ios
在这个演示应用程序中, 我们在 web 视图中有语言下拉列表, 我们可以在下拉菜单中添加新的语言和查询语言, 从本机侧面。每当选定内容发生更改时, 下拉列表也会向本机发出事件。
让我们理解一下, 这是如何工作的。
步骤 1: 插件的初始化
首先, 我们需要按照https://www.npmjs.com/package/nativescript-webview-interface#installation)中的指令安装插件.
一旦安装了插件, 让我们添加web-view元素到我们的页面。
main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
....
<web-view id="webView" src="~/www/index.html"></web-view>
....
</Page>
现在, 初始化插件, 在我们的main-page.ts文件。(在这里, 我使用的是文稿, 但您可以在https://github.com/shripalsoni04/nativescript-webview-interface-demo中查看 javascript 中的相关代码。)
main-page.ts
import {webViewInterfaceDemoVM} from './main-view-model';
var webViewInterfaceModule = require('nativescript-webview-interface');
var oLangWebViewInterface;
export function pageLoaded(args){
page = args.object;
page.bindingContext = webViewInterfaceDemoVM;
setupWebViewInterface(page)
}
/**
* Initializes webViewInterface for communication between webview and android/ios
*/
function setupWebViewInterface(page: Page){
var webView = page.getViewById('webView');
oLangWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView);
}
检查代码main-view-model供参考。
假设我们按照上面提到的安装说明复制了 web 视图的插件文件, 让我们将插件文件导入到我们的index.html
www/index.html
<!doctype html>
<html>
<body>
<select id="knownLanguage">
<option value="-1">----Select Language----</option>
</select>
<script src="./lib/nativescript-webview-interface.js"></script>
<script src="./index.js"></script>
</body>
</html>
一旦插件文件在 html 文件中导入, 我们就可以访问所有必要的 API, 从 web 视图与本机应用程序进行通信, 在window.nsWebViewInterface全局对象。
www/index.js
(function(){
// oWebViewInterface provides necessary APIs for communication to native app.
var oWebViewInterface = window.nsWebViewInterface;
var languageDD = document.getElementById('knownLanguage');
function init(){
}
init();
})()
步骤 2: 从本机应用程序的下拉列表中加载语言
现在, 我们要加载在其中加载的一些默认语言的下拉列表。在加载 web 视图后, 我们可以通过使用默认语言向 web 视图发出事件来执行此项设置。
main-page.ts
function setupWebViewInterface(page: Page){
...
// loading languages in dropdown, on load of webView.
webView.on(WebView.loadFinishedEvent, (args: LoadEventData) => {
if (!args.error) {
loadLanguagesInWebView();
}
});
...
}
/**
* Sends intial list of languages to webView, once it is loaded
*/
function loadLanguagesInWebView(){
oLangWebViewInterface.emit('loadLanguages', webViewInterfaceDemoVM.lstLanguages);
}
让我们来处理loadLanguagesweb 视图中的事件。
www/index.js
function init(){
...
addNativeMsgListener();
...
}
/**
* Registers handlers for native events.
*/
function addNativeMsgListener() {
oWebViewInterface.on('loadLanguages', function (arrLanguages) {
for (var i = 0; i < arrLanguages.length; i++) {
addLanguageOption(arrLanguages[i]);
}
});
}
/**
* Adds language to dropdown options
*/
function addLanguageOption(language){
var option = document.createElement('Option');
option.text = language;
option.value = language;
languageDD.appendChild(option);
}
步骤 3: 在下拉菜单中更改语言时通知本机应用程序
要让本机应用程序知道, 每当在下拉列表中更改语言时, 我们需要从 web 视图中从选择更改中发出事件。
www/index.js
function init(){
...
languageDD.onchange = function(){
sendSelectedValue(languageDD.value);
}
...
/**
* Sends selected value to native app by emitting an event
*/
function sendSelectedValue(selectedLanguage){
oWebViewInterface.emit('languageSelection', selectedLanguage);
}
}
我们需要在本机方面处理此事件, 以便对语言更改进行任何操作。
main-page.ts
function setupWebViewInterface(page: Page){
...
listenLangWebViewEvents();
...
}
/**
* Handles any event/command emitted by language webview.
*/
function listenLangWebViewEvents(){
// handles language selectionChange event.
oLangWebViewInterface.on('languageSelection', (selectedLanguage) => {
webViewInterfaceDemoVM.selectedLanguage = selectedLanguage;
});
}
步骤 4: 从本机的下拉列表中添加新语言
要在本机应用程序的下拉选项中添加新语言, 我们可以直接调用在 web 视图中处理此操作的 JS 函数。
main-page.xml
<GridLayout rows="50" columns="*, 70">
<TextField id="txtLanguage" col="0" hint="Language" />
<Button col="1" text="Add" tap="addLanguage" />
</GridLayout>
main-page.ts
/**
* Adds language to webView dropdown
*/
export function addLanguage(){
var txtField = <TextField>page.getViewById('txtLanguage');
oLangWebViewInterface.callJSFunction('addNewLanguage', [txtField.text]);
}
在这里, 我们打电话给addNewLanguageweb 视图的功能, 直接从本机应用程序. 请注意, 我们要传递给的参数addNewLanguage功能必须是数组格式。
由于我们不期望在 web 视图中的语言添加操作有任何返回值, 所以我们不需要将任何回调函数赋给callJSFunctionApi。
让我们创建addNewLanguage在 web 视图中的函数来处理此操作。
www/index.js
function init(){
...
defineNativeInterfaceFunctions();
...
}
/**
* Defines global functions which will be called from andorid/ios
*/
function defineNativeInterfaceFunctions(){
/**
* Handles new language addition initiated by native app
*/
window.addNewLanguage = function(language){
addLanguageOption(language);
languageDD.value = language;
languageDD.onchange();
};
}
步骤 5: 从 web 视图查询数据
现在, 我们希望从 web 视图中获取当前选定语言的值。我们可以通过将 JS 函数调用到 web 视图来做到这一点。
main-page.ts
/**
* Fetches currently selected language of dropdown in webView.
*/
export function getSelectedLanguage(){
oLangWebViewInterface.callJSFunction('getSelectedLanguage', null, (oSelectedLang) => {
alert(`Selected Language is ${oSelectedLang.text}`);
});
}
www/index.js
function defineNativeInterfaceFunctions(){
...
window.getSelectedLanguage = function(){
var selectedLangOpt = languageDD.options[languageDD.selectedIndex];
return {id: selectedLangOpt.value, text: selectedLangOpt.text};
};
...
}
步骤 6: 从 JS 功能调用的 web 视图返回延迟结果
根据 javscript 的异步性质, 有时我们不能在 web 视图中立即返回 js 函数的调用, 因此在这种情况下, 我们可以在 js 函数调用上返回一个承诺。
因此, 每当承诺得到解决, 在本机应用程序端注册的回调函数将用承诺的解析值来调用。
main-page.ts
/**
* Fetches currently selected language of dropdown in webview.
* The result will come after 2s. This function is written to show the support of deferred result.
*/
export function getSelectedLanguageDeferred(){
oLangWebViewInterface.callJSFunction('getSelectedLanguageDeferred', null, (oSelectedLang) => {
alert(`Deferred Selected Language is ${oSelectedLang.text}`);
});
}
www/index.js
function defineNativeInterfaceFunctions(){
...
window.getSelectedLanguageDeferred = function(){
var selectedLangOpt = languageDD.options[languageDD.selectedIndex];
return new Promise(function(resolve) {
setTimeout(function(){
resolve({id: selectedLangOpt.value, text: selectedLangOpt.text});
}, 2000);
});
};
...
}
我知道这是非常琐碎的应用程序, 但我发现这个应用程序是正确的解释所有的方案, 可以处理 nativescript-webivew 接口插件。
我还创建了一个服务于有效用例的应用程序。我将在将来发布它。
[翻译]Nativescript 中 Web 视图与 Android/IOS 的双向通信的更多相关文章
- 改变mvc web api 支持android ,ios ，ajax等方式跨域调用
公司一个移动后端的项目用到了 webapi 项目搭建到外网环境共app开发者调用测试接口时遇到了一个问题 接口不允许跨域调用 .查阅资料明白 同源策略原则根据请求报头值 Origin 与回应报头值 A ...
- 在webView 中使用JS 调用 Android / IOS的函数 Function
最近做一个项目,混合了NativeCode 和 HTML,为了便于JS 调用App的一些方法,统一封装一个Js方法,记录如下 Android 端首先要再WebView中允许JS的调用 WebView ...
- 仿各种APP将文章DOM转JSON并在APP中以列表显示（android、ios、php已开源）
背景 一直以来都想实现类似新闻客户端.鲜城等文章型app的正文显示,即在web editor下编辑后存为json,在app中解析json并显示正文. 网上搜过,没找到轮子.都是给的思路,然后告知是公司 ...
- iOS中web app调试(mac)
原文 iOS中web app调试(mac).md 目录 一.真机联调配置 二.mac上Safari配置及真机联调 三.iOS模拟器使用 四.在iOS模拟器中安装app 近期公司vue项目开发,目的是一 ...
- iOS中web与Js的交互
问题 感觉到uni-app框架有pit,公司强推该框架的小哥识趣的闭嘴,考虑到全盘替换周期跟成本挺大,基于uni-app能打包成H5,采用webview+js的原生方式集成 基本结构:原生壳 + we ...
- 浅谈iOS中的视图优化
引言: 让我们来思考几个问题,你开发过的产品,它还有可以优化的地方吗?能增加它的帧率吗?能减少多余的CPU计算吗?是不是存在多余的GPU渲染?业务这点工作量对于越来越强大的设备面前显得微不足道,但作为 ...
- Swift - iOS中各种视图控制器（View Controller）的介绍
在iOS中,不同的视图控制器负责不同的功能,采用不同的风格向用户呈现信息.下面对各个视图控制器做个总结: 1,标准视图控制器 - View Controller 这个控制器只是用来呈现内容.通常会用来 ...
- react-native中更改android/ios的入口文件
android 1.android /app/build.gradle project.ext.react = [ entryFile: "index.android.js" ] ...
- SSM整合 完美支持RESTful(Jsp和客户端<android ios...>)
一 RESTful简介 RESTful是一种网络应用程序的设计风格和开发方式 它结构清晰 符合标准 易于理解 扩展方便 REST 即Representational State Transfer的缩写 ...
随机推荐
- intellij idea使用技巧
1 小窗口脱离了主窗口的解决办法 只要将floating mode和windowed mode取消掉就可以了,当选择上了floating mode和windowed mode之后会打一个勾,再次点击勾 ...
- PECL的安装和使用
下载并安装pear脚本 cd /usr/local/php/bin/ curl -o go-pear.php http://pear.php.net/go-pear.phar ./php go-pea ...
- JAVA中int与String类型的相互转换
Java的int和String类型间互相转换,小功能但是经常用到,下面是几种实现的方法: 字符串类型String转换成整数int 1. int i = Integer.parseInt([String ...
- 【题解】 P1373 小a和uim之大逃离
题解 P1373 小a和uim之大逃离 传送门 一道dp好题 乍看此题,感觉要这样设计: \(dp(x)(y)(mod_{a})(mod_{uim})(0/1)\) , 但是我上午考试就MLE了,赶紧 ...
- oracle 数据库运维知识
1.在数据库中连接用某个用户连接数据库报错: Product: DbVisualizer Pro 9.1.1 Build: #2063 (2013/10/01 12:27) Java VM: Java ...
- Android Weekly Notes Issue #321
Android Weekly Issue #321 August 5th, 2018. Android Weekly Issue #321 本期内容包括: 开源项目Plaid的改版; 使用Tensor ...
- <JAVA8新增内容>关于匿名内部集合和lambda表达式
要想说清楚JAVA中的Lambda表达式,必须想讲一下匿名内部类来帮助理解本质. 一.匿名内部类 匿名内部类适合创建那种只需要一次使用的类,例如前面介绍命令模式时所需要的Command对象,匿名内部类 ...
- 吴恩达机器学习笔记（六） —— 支持向量机SVM
主要内容: 一.损失函数 二.决策边界 三.Kernel 四.使用SVM (有关SVM数学解释:机器学习笔记(八)震惊!支持向量机(SVM)居然是这种机) 一.损失函数 二.决策边界 对于: 当C非常 ...
- 检测 iOS 系统网络权限被关闭
背景 一直都有用户反馈无法正常联网的问题,经过定位,发现很大一部分用户是因为网络权限被系统关闭,经过资料搜集和排除发现根本原因是: 第一次打开 app 不能访问网络,无任何提示 第一次打开 app 直 ...
- 分享知识-快乐自己： Oracle数据库实例、用户、表、表空间之间关系
数据库: Oracle数据库是数据的物理存储.这就包括(数据文件ORA或者DBF.控制文件.联机日志.参数文件). 其实Oracle数据库的概念和其它数据库不一样,这里的数据库是一个操作系统只有一个库 ...