七行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 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
javascript Math.random()随机数函数
Nov 04 Javascript
JS request函数 用来获取url参数
May 17 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
python缩进区别分析
2014/02/15 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python判断有效的数独算法示例
2019/02/23 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
在C#中如何实现多态
2014/07/02 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
学校采购员岗位职责
2014/01/02 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
授权委托书格式范文
2014/08/02 职场文书
2014年科技工作总结
2014/11/26 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
战友聚会致辞
2015/07/28 职场文书