关键词：
参考技术A
奇技指南
2018年11月26日发表的“360 AI音箱H5开发实践”一文中，曾简单提到“与Native交互”。本文将就此主题深入探讨H5与App交互的几种常见模式。
本文内容如下：
H5，在中国被专门用来指代开发内嵌于手机应用中的网页的技术，外国好像并没有这个说法。从技术上讲，H5是HTML5即Hyper Text Markup Language（超文本标记语言）第5版的简称。而HTML只是开发网页要用到的多种技术之一。除了HTML，还要用CSS设计界面，用JavaScript实现交互，甚至要用Node.js实现服务端逻辑。为什么H5会被用来笼统地指代这些技术呢？我猜一是因为它简单，二是移动端网页开发技术又恰好需要这么一个概念。
移动端网页运行在手机应用内嵌的浏览器引擎中，这个没有UI的内核容器统称WebView，即iPhone的UIWebView（iOS 2.0–12.0）、WKWebView（iOS 8.0+，macOS 10.10+）和Android的WebView。总之，WebView就是在手机应用中运行和展示网页的界面和接口（神奇的是，英文Interface，既可以翻译成“界面”也可以翻译成“接口”）。
H5与原生应用的交互都是通过原生应用中的WebView实现的。通过这个环境，H5可以调用原生应用注入其中的原生对象的方法，原生应用也可以调用H5暴露在这个环境中的JavaScript对象的方法，从而实现指令与数据的传输。
比如，在Android应用中，WebView类有一个公有方法addJavascriptInterface，签名为：
调用这个方法可以向WebView中以指定的名称name注入指定的Java对象object。这样，WebView中的JavaScript就可以通过name调用object的方法。比如：
在iOS或macOS中，需要通过创建WKWebView类的实例在应用中嵌入网页，交互过程类似。
所谓基础接口，就是首先要规定原生应用和JS分别在WebView里注入/暴露一个什么对象：
并约定在这两个对象上分别可以调用什么方法：
顾名思义，NativeBridge.callNative是由JS调用向Native传递指令或数据的方法，而JSBridge.callJS则是由Native调用向JS传递指令或数据的方法。方法签名中的参数含义如下：
基础接口只有两个对象和两个方法，JS与App间的互操作则通过action和params来扩展和定义。
对于JS而言，虽然这里只定义了一个对象一个方法，但实践中，可以把action对应方法的实现附加到JSBridge上，只要把callJS实现为一个分发方法即可，比如：
这样，所有对callJS的调用，都会转化成对JSBridge上相应action方法的调用，优点是只需一行代码。
另一种实现方式是通过switch...case语句实现调用分发，比如:
这样实现的优点是所有方法一目了然，当然同样也是把所有相关接口都附加到同一个JSBridge对象上。
以上两种实现模式各有利弊。
由JS发起的单向调用App的操作，主要涉及加载URL和切换到原生界面，可对应如下action：
loadUrl调用的参考协议如下：
这里NativeBridge是App的原生对象，其callNative方法被调用时，会收到一个对象（字典/映射）参数。根据这个参数的action属性的值，App可知需要执行的操作是加载URL。于是再取得params属性中的url，发送请求即可。
loadContent调用的参考协议如下：
同上，这里通过params向App传递了必要参数，App负责切换到相应的原生界面。
由App发起的单向调用JS的操作，主要涉及用户点击后退按钮（<），可对应如下action：
can_back调用的参考协议如下：
此调用返回的值示例如下：
顾名思义，can_back用于App询问JS：在返回上一级界面前，是否弹窗提示用户？
返回值中的can如果是true，则直接返回，不提示；如果是false，则弹出一个确认框，请用户确认。另一个值target是与App约定的返回目标，比如prev表示返回上一级，top表示返回顶级，等等。
双向调用是JS先调用App，然后App在完成操作后再调用JS，双向通常都需要传递数据。双向调用主要涉及JS调用App原生组件和用户点击右上角按钮，可对应如下action：
loadComponent的参考协议如下：
在这个例子中，涉及JS调用App显示其实现的城市选择组件：type: \'location\'，用户选择完城市之后，App再调用set_location，将用户选择的城市名称传给JS：
JS根据拿到的值更新界面，完成一次双向调用。另一个例子是JS调用原生的日期选择组件，与此类似。
为什么叫displayNextButton？因为根据具体业务场景，可能存在如下三种情况：
displayNextButton协议的参考实现如下：
以上代码示例表明，JS调用App，告诉App显示“下一步”按钮，但是要禁用变灰，因为enable: false。如果传递的是enable: true，那么用户就可以点击“下一步”按钮了。点击之后，App再调用JS的save_form。最后，如果不想显示按钮，可以传递name: \'\'。
下面重点说一下用户点击“下一步”按钮，App调用save_form的场景。此时也分两种情况：
如果是JS通过App保存数据——可能因为App端实现了数据写入必需的加密机制——那么，JS可以在App调用save_form时将约定好的数据返回给App，由App去保存数据。
如果是JS直接保存数据，比如通过Ajax，那么在保存完数据之后，则还需要调用前面所说的App暴露的loadUrl或loadComponent方法，以告知App切换界面。当然这种情况下会出现第三次调用，但仍然属于双向调用。
本文介绍了JS与App交互的几种模式，而且只讨论了JS端的实现。在开发实践中，团队各端总会面临哪一端主导的问题。本文展示的参考实现就是H5端主导的一种实现形式。H5主导的特点是把主要业务逻辑都封装到WebView中，App主要协同配合，而优点是业务逻辑的变更不会蔓延到App。毕竟相对于H5，App的安装部署模式会造成多版本共存问题，需要尽可能控制新版本。假如由App端主导，将逻辑封装在App端，势必造成版本不受控，给整个项目或产品埋下隐患。
当然，事无绝对。具体情况还要具体分析。而且，哪方主导有时候也取决多方面因素。实践中还是要因人、因时、因势制宜。
androidndk——必知必会之androidstudio使用cmake构建ndk项目的背后的故事(代码片段)
文章大纲引言一、AndroidStudio的NDK编译工具二、CMake1、CMake的基本语法1.1、变量定义和引用1.2、command1.3、add_library和add_executable1.4、find_library1.5、target_link_libraries1.6、include_directories1.6、message2、CMake工具链android.toolcha 查看详情
h5系列之history（必知必会）(代码片段)
H5系列之History（必知必会）目录概念兼容性属性方法H5方法概念理解HistoryApi的使用方式目的是为了解决哪些问题作用：ajax获取数据时，可以改变历史记录，从而可以使用浏览器的后退和前进。【】规范地址：http://www.w3.org/TR/html5... 查看详情
总结：活动类开发必知必会
在航班管家前端组，业务和活动是专人开发的。虽同在一个部门，除了在codereview过程中了解一点彼此的工作内容，其实并没有多少交集。刚好这两个月接手了两个不同类型的活动开发，总体感觉就是时间紧张、需求不明、流程... 查看详情
前端小萌新必知必会之实现自定义gulp插件
参考技术A随着node的出现，javascript的舞台越来越大，能做的事情越来越来。本篇，我们来聊一聊前端工程化构建工具Gulp,并定制符合特定需求的Gulp插件。Gulp是一个自动化和增强工作流的工具包利用Gulp和JavaScript的灵活性来自动化... 查看详情
androidndk——必知必会之androidstudio使用cmake构建ndk项目的背后的故事(代码片段)
文章大纲引言一、AndroidStudio的NDK编译工具二、CMake1、CMake的基本语法1.1、变量定义和引用1.2、command1.3、add_library和add_executable1.4、find_library1.5、target_link_libraries1.6、include_directories1.6、message2、CMake工具链android.toolchain.cmake2.1、传递... 查看详情
2021androidapp开发工作必知必会之性能优化
AndroidApp启动优化全记录一、应用启动概述1、应用启动的一般流程应用的启动，从桌面点击应用图标到主界面用户可操作，大致遵循下面的流程：可以看到应用启动过程中，最重要的两个进程就是SystemServer和AppProce... 查看详情
android必知必会-app常用图标尺寸规范汇总(代码片段)
1.程序启动图标（iconlauncher） 放在mipmap-*dpi下，文件名为ic_launcher.pngL DPI(LowDensityScreen，120DPI)，其图标大小为36x36pxM DPI(MediumDensityScreen,160DPI)，其图标大小为48x48pxH DPI(HighDensityScr 查看详情
android必知必会-app常用图标尺寸规范汇总(代码片段)
若移动端访问不佳，请使用–>Github版内容持续更新中，更新日期：2016-08-111.程序启动图标（iconlauncher）放在mipmap-*dpi下，文件名为ic_launcher.pngLDPI(LowDensityScreen，120DPI)，其图标大小为36x36 查看详情
app自动化测试必知必会appium之微信小程序自动化测试
01.H5与小程序介绍H5概述H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至... 查看详情
mysql学习--mysql必知必会(代码片段)
?上图为数据库操作分类：??下面的操作參考（mysql必知必会）创建数据库运行脚本建表：mysql>createdatabasemytest;QueryOK,1rowaffected(0.07sec)mysql>showdatabases;+--------------------+|Database|+--------------------+|infor 查看详情
架构实践架构师必知必会的5种业界主流的架构风格
【架构实践】架构师必知必会的5种业界主流的架构风格目录 【架构实践】架构师必知必会的5种业界主流的架构风格 查看详情
架构实践架构师必知必会的5种业界主流的架构风格
【架构实践】架构师必知必会的5种业界主流的架构风格目录 【架构实践】架构师必知必会的5种业界主流的架构风格 查看详情
正则表达式必知必会读书笔记
架构图模拟小案例1.匹配美元 查看详情
tcp/ip，必知必会的
...TCP拥塞控制 0前言本文整理了一些TCP/IP协议簇中需要必知必会的十大问题，既是面试高频问题，又是程序员必备基础素养。 1TCP/IP模型TCP/IP协议模型（TransmissionControlProtocol/InternetProtocol 查看详情
必知必会
1什么是MySQL MySQL是一个关系型数据库管理系统，属于Oracle旗下产品。MySQL是最流行的关系型数据库管理系统之一，在WEB应用方面，MySQL是最好的RDBMS(RelationalDatabaseManagementSystem，关系数据库管理系统)应用软件之一。在J... 查看详情
必知必会的设计原则——合成复用原则(代码片段)
设计原则系列文章 必知必会的设计原则——单一职责原则必知必会的设计原则——开放封闭原则必知必会的设计原则——依赖倒置原则必知必会的设计原则——里氏替换原则必知必会的设计原则——接口隔离原则必知必... 查看详情
ios必知必会-apns篇
参考技术A导语：由于移动设备内存、CPU、电量的局限性，iOS不允许APP的进程常驻后台（事实上可以申请后台运行一段时间，最长约10分钟），这样当用户主动杀掉APP，或者APP进入后台超过约定时长时，就意味着该APP进程的结束。... 查看详情
hive必知必会(代码片段)
hive： 基于hadoop，数据仓库软件，用作OLAPOLAP：onlineanalyzeprocess 在线分析处理OLTP：onlinetransactionprocess在线事务处理 事务： ACID A：atomic 原子性 C:consistent 一致性 I：isolation 隔离性 D:durability 持久性 1读未提交 脏读 //事务... 查看详情