七行JSON代码把你的网站变成移动应用过程详解


Posted in Javascript onJuly 09, 2019

如果我告诉你,只需要 下述 7 行橙色的 JSON 代码 就可以将一个网站变成移动应用,你相信吗?

七行JSON代码把你的网站变成移动应用过程详解

完全不需要使用某种框架 API 重写网站,就可以获得与移动应用相同的行为。如果你已经有一个现成的网站,只需要简单地引用 URL 就可以将其“打包”为原生应用。

而如果在此基础上,只需要略微调整 JSON 代码内容,就可以直接访问所有原生 API、原生 UI 组件以及原生视图切换(View Transition)。最简化的范例效果如下图所示:

七行JSON代码把你的网站变成移动应用过程详解

从中可以看出,我嵌入了一个 Web 页面,但界面上其余布局均为原生 UI 组件,例如 导航条 以及 底部的标签栏。而我们并不需要使用任何 API 重写网站,就可以自动获得原生的切换效果。

在介绍具体做法前你可能会问:“看着挺酷,但除了在原生应用框架内展示 Web 页面之外,这种技术还有什么意义?”问得好!这也是本文要讲的重点。

我们只需要创建一个无缝的 Web 视图与应用间双向通信,借此,父应用就可以触发 Web 视图内的任何 JavaScript 函数,随后 Web 视图即可从外部调用原生 API。例如:

七行JSON代码把你的网站变成移动应用过程详解

请注意,这个视图包含:原生导航条,以及内置的切换功能一个 Web 视图,其中嵌入了一个可以生成二维码的 Web 应用在底部包含一个原生的文字输入组件上述所有这一切只需要略微调整 JSON 代码的属性即可实现。

最后请注意,随着在文字输入区输入不同内容,二维码也会产生相应变化。输入的文字可触发二维码生成器 Web 应用内部的 JavaScript 函数重新生成二维码图像。

目前还没有任何一个开发框架曾试图从根本上解决“Web 视图与原生应用无缝集成”的问题,因为这些框架都专注于完全原生,或完全 HTML5 的做法。无论什么时候当我们听到有人讨论移动应用的未来时,很可能会听到类似“到底是 HTML5 还是原生方法会最终胜出呢?”这样的说法。似乎没人觉得native和html可以共存,而且二者的协同和最终实现似乎也并不容易。

本文我将要介绍:为何 Web 引擎与原生组件的融合通常是一种更好的做法。为何 HTML 与原生的无缝集成那么难,具体又该如何实现。更重要的是,该如何使用这样的技术快速构建自己的应用。

为何要在原生应用中使用 HTML?

在进一步介绍前,首先一起看看这样做是好是坏,以及什么时候适合使用这种方法。这种做法的一些潜在用例如下:

1. 使用 Web 原生功能

应用中的部分内容使用 Web 引擎来实现也许是一种更适合的做法。例如 WebSocket 是一种原生的 Web 功能,主要面向 Web 环境而设计。这种情况下就更适合使用内建的 Web 引擎(iOS 的 WKWebView 以及 Android 的 WebView),而非安装某些只能“模拟”WebSocket 的第三方库。无需额外安装任何代码,使用免费工具即可实现目标,这样岂不是更好。同时这也催生了下一个原因。

2. 避免二进制文件体积过大

有些功能也许需要借助庞大的第三方库,而你可能希望能快速用上这样的功能。例如,为了以原生方式包含二维码图像生成器,可能需要安装某些第三方库,这会导致二进制文件体积增大。但如果使用 Web 视图引擎并通过一个简单的调用 JavaScript 库,就可以免费实现这一切,并且避免了使用第三方原生库。

3. 缺乏可靠的移动库

对于一些前沿技术,可能暂时并不具备稳定可靠的移动端实现。好在大部分此类技术都具备 Web 实现,因此最高效的集成方法就是使用 JavaScript 库。

4. 构建部分原生,部分基于 Web 的应用

很多新手开发者想要将自己的网站移植为移动应用,但在发现自己现有网站的部分功能过于复杂,无法面向每种移动平台快速重写时,往往会感到沮丧或受挫。例如你可能有一个非常复杂的 Web 页面无法快速转换为移动应用,但网站的其他内容可以很容易地转换。面对这种情况,如果通过某种方法将应用的大部分内容以原生方式构建,对于特别复杂的页面直接将其以 HTML 的形式无缝集成到应用中,是不是很棒啊。

这是如何实现的?

A. Jasonette

Jasonette 是一种基于标记语言,构建跨平台原生应用的开源方法。该技术看似 Web 浏览器,但并不会将 HTML 标记语言解释为 Web 页面,而是会将 JSON 标记解释为 iOS 和 Android 上的原生应用。正如所有 Web 浏览器都有完全相同的代码,但只要按需解释不同类型的 HTML 标记,即可为用户提供所有不同类型的 Web 应用,所有 Jasonette 应用也有着完全相同的库,可按需解释不同类型的 JSON 标记并创建出你的应用。开发者完全无需触及代码本身,只需要编写标记,将代码实时“翻译”为原生应用,即可开发出自己的应用来。虽然 Jasonette 的核心作用在于构建原生应用,但本文的重点在于介绍如何将 HTML 集成到核心原生引擎中,接下来就一起了解一下吧。

B. Jasonette Web 容器

原生应用很棒,但有时候我们依然需要使用 Web 功能。但 Web 视图与原生应用的集成是个麻烦的过程。

无缝的集成要求:

Web 视图应作为原生布局的一部分进行集成:Web 视图应作为原生布局的一部分纳入应用中,并且操作方式应与其他任何原生 UI 组件保持一致。否则会让用户感觉很笨拙,并且感觉上就像自己实际上是在访问网站那样。

父应用可以控制子 Web 容器:父应用应能随意控制子 Web 视图。

子 Web 容器可触发父应用的原生事件:子应用应该能触发父应用的事件以运行原生 API。这是一个非常繁重的工作,因此先从第一个环节着手介绍:直接将 Web 容器嵌入原生布局—并将其作为第 1 版发布:JSON Web 容器,JSON 中的 HTML 将变为原生应用组件。仅这一点就已经很实用了,但由于无法交互,依然存在一定的局限。父应用无法控制子 Web 容器,子容器无法向父应用发送任何事件通知,这 导致 Web 容器与外界完全隔离。

C. Jasonette Web 容器 2.0:使其可交互

发布第 1 版之后,我们开始处理第二个问题:为 Web 容器添加交互能力。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
js实现无缝滚动双图切换效果
Jul 09 #Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 #Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 #Javascript
bootstrap datepicker的基本使用教程
Jul 09 #Javascript
JavaScript常用内置对象用法分析
Jul 09 #Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 #Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 #Javascript
You might like
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
Django+zTree构建组织架构树的方法
2019/08/21 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Python读写锁实现实现代码解析
2020/11/28 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
优秀团员事迹材料1500字
2014/08/31 职场文书
校运动会广播稿300字
2014/10/07 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
学雷锋日活动总结
2015/02/06 职场文书
初中体育课教学反思
2016/02/16 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs