English document From http://shripalsoni.com/blog/nativescript-webview-native-bi-directional-communication/

Nativescript 中 Web 视图与 Android/IOS 的双向通信

shripal编写 在Nativescript

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

Xml
  1. <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  2. ....
  3. <web-view id="webView" src="~/www/index.html"></web-view>
  4. ....
  5. </Page>

现在, 初始化插件, 在我们的main-page.ts文件。(在这里, 我使用的是文稿, 但您可以在https://github.com/shripalsoni04/nativescript-webview-interface-demo中查看 javascript 中的相关代码。)

main-page.ts

文稿
  1. import {webViewInterfaceDemoVM} from './main-view-model';
  2. var webViewInterfaceModule = require('nativescript-webview-interface');
  3. var oLangWebViewInterface;
  4. export function pageLoaded(args){
  5. page = args.object;
  6. page.bindingContext = webViewInterfaceDemoVM;
  7. setupWebViewInterface(page)
  8. }
  9. /**
  10. * Initializes webViewInterface for communication between webview and android/ios
  11. */
  12. function setupWebViewInterface(page: Page){
  13. var webView = page.getViewById('webView');
  14. oLangWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView);
  15. }

检查代码main-view-model供参考。

假设我们按照上面提到的安装说明复制了 web 视图的插件文件, 让我们将插件文件导入到我们的index.html

www/index.html

Html
  1. <!doctype html>
  2. <html>
  3. <body>
  4. <select id="knownLanguage">
  5. <option value="-1">----Select Language----</option>
  6. </select>
  7. <script src="./lib/nativescript-webview-interface.js"></script>
  8. <script src="./index.js"></script>
  9. </body>
  10. </html>

一旦插件文件在 html 文件中导入, 我们就可以访问所有必要的 API, 从 web 视图与本机应用程序进行通信, 在window.nsWebViewInterface全局对象。

www/index.js

Javascript
  1. (function(){
  2. // oWebViewInterface provides necessary APIs for communication to native app.
  3. var oWebViewInterface = window.nsWebViewInterface;
  4. var languageDD = document.getElementById('knownLanguage');
  5. function init(){
  6. }
  7. init();
  8. })()

步骤 2: 从本机应用程序的下拉列表中加载语言

现在, 我们要加载在其中加载的一些默认语言的下拉列表。在加载 web 视图后, 我们可以通过使用默认语言向 web 视图发出事件来执行此项设置。

main-page.ts

文稿
  1. function setupWebViewInterface(page: Page){
  2. ...
  3. // loading languages in dropdown, on load of webView.
  4. webView.on(WebView.loadFinishedEvent, (args: LoadEventData) => {
  5. if (!args.error) {
  6. loadLanguagesInWebView();
  7. }
  8. });
  9. ...
  10. }
  11. /**
  12. * Sends intial list of languages to webView, once it is loaded
  13. */
  14. function loadLanguagesInWebView(){
  15. oLangWebViewInterface.emit('loadLanguages', webViewInterfaceDemoVM.lstLanguages);
  16. }

让我们来处理loadLanguagesweb 视图中的事件。

www/index.js

Javascript
  1. function init(){
  2. ...
  3. addNativeMsgListener();
  4. ...
  5. }
  6. /**
  7. * Registers handlers for native events.
  8. */
  9. function addNativeMsgListener() {
  10. oWebViewInterface.on('loadLanguages', function (arrLanguages) {
  11. for (var i = 0; i < arrLanguages.length; i++) {
  12. addLanguageOption(arrLanguages[i]);
  13. }
  14. });
  15. }
  16. /**
  17. * Adds language to dropdown options
  18. */
  19. function addLanguageOption(language){
  20. var option = document.createElement('Option');
  21. option.text = language;
  22. option.value = language;
  23. languageDD.appendChild(option);
  24. }

步骤 3: 在下拉菜单中更改语言时通知本机应用程序

要让本机应用程序知道, 每当在下拉列表中更改语言时, 我们需要从 web 视图中从选择更改中发出事件。

www/index.js

Javascript
  1. function init(){
  2. ...
  3. languageDD.onchange = function(){
  4. sendSelectedValue(languageDD.value);
  5. }
  6. ...
  7. /**
  8. * Sends selected value to native app by emitting an event
  9. */
  10. function sendSelectedValue(selectedLanguage){
  11. oWebViewInterface.emit('languageSelection', selectedLanguage);
  12. }
  13. }

我们需要在本机方面处理此事件, 以便对语言更改进行任何操作。

main-page.ts

文稿
  1. function setupWebViewInterface(page: Page){
  2. ...
  3. listenLangWebViewEvents();
  4. ...
  5. }
  6. /**
  7. * Handles any event/command emitted by language webview.
  8. */
  9. function listenLangWebViewEvents(){
  10. // handles language selectionChange event.
  11. oLangWebViewInterface.on('languageSelection', (selectedLanguage) => {
  12. webViewInterfaceDemoVM.selectedLanguage = selectedLanguage;
  13. });
  14. }

步骤 4: 从本机的下拉列表中添加新语言

要在本机应用程序的下拉选项中添加新语言, 我们可以直接调用在 web 视图中处理此操作的 JS 函数。

main-page.xml

Xml
  1. <GridLayout rows="50" columns="*, 70">
  2. <TextField id="txtLanguage" col="0" hint="Language" />
  3. <Button col="1" text="Add" tap="addLanguage" />
  4. </GridLayout>

main-page.ts

文稿
  1. /**
  2. * Adds language to webView dropdown
  3. */
  4. export function addLanguage(){
  5. var txtField = <TextField>page.getViewById('txtLanguage');
  6. oLangWebViewInterface.callJSFunction('addNewLanguage', [txtField.text]);
  7. }

在这里, 我们打电话给addNewLanguageweb 视图的功能, 直接从本机应用程序. 请注意, 我们要传递给的参数addNewLanguage功能必须是数组格式。
由于我们不期望在 web 视图中的语言添加操作有任何返回值, 所以我们不需要将任何回调函数赋给callJSFunctionApi。

让我们创建addNewLanguage在 web 视图中的函数来处理此操作。

www/index.js

Javascript
  1. function init(){
  2. ...
  3. defineNativeInterfaceFunctions();
  4. ...
  5. }
  6. /**
  7. * Defines global functions which will be called from andorid/ios
  8. */
  9. function defineNativeInterfaceFunctions(){
  10. /**
  11. * Handles new language addition initiated by native app
  12. */
  13. window.addNewLanguage = function(language){
  14. addLanguageOption(language);
  15. languageDD.value = language;
  16. languageDD.onchange();
  17. };
  18. }

步骤 5: 从 web 视图查询数据

现在, 我们希望从 web 视图中获取当前选定语言的值。我们可以通过将 JS 函数调用到 web 视图来做到这一点。

main-page.ts

文稿
  1. /**
  2. * Fetches currently selected language of dropdown in webView.
  3. */
  4. export function getSelectedLanguage(){
  5. oLangWebViewInterface.callJSFunction('getSelectedLanguage', null, (oSelectedLang) => {
  6. alert(`Selected Language is ${oSelectedLang.text}`);
  7. });
  8. }

www/index.js

Javascript
  1. function defineNativeInterfaceFunctions(){
  2. ...
  3. window.getSelectedLanguage = function(){
  4. var selectedLangOpt = languageDD.options[languageDD.selectedIndex];
  5. return {id: selectedLangOpt.value, text: selectedLangOpt.text};
  6. };
  7. ...
  8. }

步骤 6: 从 JS 功能调用的 web 视图返回延迟结果

根据 javscript 的异步性质, 有时我们不能在 web 视图中立即返回 js 函数的调用, 因此在这种情况下, 我们可以在 js 函数调用上返回一个承诺。
因此, 每当承诺得到解决, 在本机应用程序端注册的回调函数将用承诺的解析值来调用。

main-page.ts

文稿
  1. /**
  2. * Fetches currently selected language of dropdown in webview.
  3. * The result will come after 2s. This function is written to show the support of deferred result.
  4. */
  5. export function getSelectedLanguageDeferred(){
  6. oLangWebViewInterface.callJSFunction('getSelectedLanguageDeferred', null, (oSelectedLang) => {
  7. alert(`Deferred Selected Language is ${oSelectedLang.text}`);
  8. });
  9. }

www/index.js

Javascript
  1. function defineNativeInterfaceFunctions(){
  2. ...
  3. window.getSelectedLanguageDeferred = function(){
  4. var selectedLangOpt = languageDD.options[languageDD.selectedIndex];
  5. return new Promise(function(resolve) {
  6. setTimeout(function(){
  7. resolve({id: selectedLangOpt.value, text: selectedLangOpt.text});
  8. }, 2000);
  9. });
  10. };
  11. ...
  12. }

我知道这是非常琐碎的应用程序, 但我发现这个应用程序是正确的解释所有的方案, 可以处理 nativescript-webivew 接口插件。
我还创建了一个服务于有效用例的应用程序。我将在将来发布它。

[翻译]Nativescript 中 Web 视图与 Android/IOS 的双向通信的更多相关文章

  1. 改变mvc web api 支持android ,ios ,ajax等方式跨域调用

    公司一个移动后端的项目用到了 webapi 项目搭建到外网环境共app开发者调用测试接口时遇到了一个问题 接口不允许跨域调用 .查阅资料明白 同源策略原则根据请求报头值 Origin 与回应报头值 A ...

  2. 在webView 中使用JS 调用 Android / IOS的函数 Function

    最近做一个项目,混合了NativeCode 和 HTML,为了便于JS 调用App的一些方法,统一封装一个Js方法,记录如下 Android 端首先要再WebView中允许JS的调用 WebView ...

  3. 仿各种APP将文章DOM转JSON并在APP中以列表显示(android、ios、php已开源)

    背景 一直以来都想实现类似新闻客户端.鲜城等文章型app的正文显示,即在web editor下编辑后存为json,在app中解析json并显示正文. 网上搜过,没找到轮子.都是给的思路,然后告知是公司 ...

  4. iOS中web app调试(mac)

    原文 iOS中web app调试(mac).md 目录 一.真机联调配置 二.mac上Safari配置及真机联调 三.iOS模拟器使用 四.在iOS模拟器中安装app 近期公司vue项目开发,目的是一 ...

  5. iOS中web与Js的交互

    问题 感觉到uni-app框架有pit,公司强推该框架的小哥识趣的闭嘴,考虑到全盘替换周期跟成本挺大,基于uni-app能打包成H5,采用webview+js的原生方式集成 基本结构:原生壳 + we ...

  6. 浅谈iOS中的视图优化

    引言: 让我们来思考几个问题,你开发过的产品,它还有可以优化的地方吗?能增加它的帧率吗?能减少多余的CPU计算吗?是不是存在多余的GPU渲染?业务这点工作量对于越来越强大的设备面前显得微不足道,但作为 ...

  7. Swift - iOS中各种视图控制器(View Controller)的介绍

    在iOS中,不同的视图控制器负责不同的功能,采用不同的风格向用户呈现信息.下面对各个视图控制器做个总结: 1,标准视图控制器 - View Controller 这个控制器只是用来呈现内容.通常会用来 ...

  8. react-native中更改android/ios的入口文件

    android 1.android /app/build.gradle project.ext.react = [ entryFile: "index.android.js" ] ...

  9. SSM整合 完美支持RESTful(Jsp和客户端<android ios...>)

    一 RESTful简介 RESTful是一种网络应用程序的设计风格和开发方式 它结构清晰 符合标准 易于理解 扩展方便 REST 即Representational State Transfer的缩写 ...

随机推荐

  1. EasyNVR流媒体服务器接入EasyDSS云视频平台快照上传实现

    EasyNVR拥有接入EasyDSS云平台的功能 接入EasyDSS云平台会定时向云平台上传快照数据,这个快照数据用于云平台向客户端提供快照展示 遇到的问题 由于快照上传的间隔提供认为修改的功能,则我 ...

  2. 用Darwin和live555实现的直播框架

    我们在开发视频直播或者监控类项目的时候,如场馆监控.学校监控.车载监控等等,往往首先希望的是形成一个项目的雏形,然后再在这个框架的基础上进行不断的完善和扩展工作,那么我们今天要给大家介绍的就是,如何形 ...

  3. 九度OJ 1039:Zero-complexity Transposition(逆置) (基础题)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3093 解决:1255 题目描述: You are given a sequence of integer numbers. Zero-co ...

  4. HTML 学习笔记 JQuery(DOM 操作3)

    设置和获取HTML 文本 和 值 1.html()方法 类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容 例子 <html> <he ...

  5. 远程服务器上的weblogic项目管理(三)常用指令及常见错误

    weblogic的管理流程已在前两节整理完毕,接下来汇总一下linux环境下的weblogic管理常用指令及常见错误: 常用指令: ./startWebLogic.sh 启动weblogic ./st ...

  6. jforum二次开发教程

    环境准备: 一.Tomcat服务器     首先需要在本地搭建tomcat.tomcat搭建过程本人博客中有,不再重复纪录.因为开始没有搭建成功,浪费了一定时间.   二.Mysql服务器     在 ...

  7. Android系统Gps分析(一)【转】

    本文转载自:http://blog.csdn.net/xnwyd/article/details/7198728 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   1 G ...

  8. pip 安装模块报错解决

    系统版本 ubuntu  Kylin 16.04 LTS 报错1:安装pip3 安装 Django 总是提示time out,无法安装. 改用国内源: 豆瓣源: sudo pip3 install - ...

  9. js(11)

    style对象的相关案例 <!DOCTYPE html> <html> <head> <title>MyHtml.html</title> ...

  10. html5--1.16 内联框架

    html5--1.16 内联框架 学习要点: 1.iframe内联框架2.综合实例1 1.iframe内联框架 1.iframe元素用来在文档中添加一个内联框架. 2.iframe为body元素的子元 ...