七行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优缺点分析说明
Jun 09 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 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
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP精确计算功能示例
2016/11/29 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
对python的输出和输出格式详解
2018/12/08 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
求职简历推荐信范文
2013/12/02 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
普通党员个人整改措施
2014/10/27 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
资料员岗位职责
2015/02/10 职场文书
免职通知
2015/04/23 职场文书
公司催款律师函
2015/05/27 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
Python中npy和mat文件的保存与读取
2022/04/24 Python
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS