首先,当然是写网页了,其次还可以开发桌面应用和移动应用,下面我大概介绍一下如何将一个写好的网页打包成一个桌面应用(exe)和移动应用(apk),以供电脑和手机使用,主要借助NW.js和HBuilder这两个工具,主要步骤如下:
为了方便演示,这里新建了一个简单的app.html网页,主要代码如下,很简单,下面的打包都以这个网页为例:
浏览器打开这个html文件,截图如下:
打包桌面应用exe,这里需要NW.js这个工具,NW.js是Intel开发的一个基于node.js和chromium的程序运行环境,打包html网页很快。
1.首先需要下载NW.js,这个直接到官网下载就行,地址/,如下:
2.下载完成后,随便解压到一个本地目录下边,如下(部分解压文件截图):
3.在当前解压目录下边新建一个app目录,把我们的测试html文件app.html放到里面,同时新建一个package.json文件,配置如下,主要指明入口文件和应用名称:
此时当前app目录内容截图如下:
4.接着就开始打包过程,这里需要下载Enigma Virtual Box,地址,如下:
5.将app目录下边的app.html文件和package.json文件压缩为app.zip,重新命名为app.nm,如下:
6.将app.nw复制到NW.js解压目录下面,打开cmd窗口,输入如下命令,在当前目录下边会生成一个app.exe文件:
7.打开Virtual Box,除了app.exe文件外,其他文件都放到里面进行压缩打包,如下:
8.打包完成后,会在当前目录下边生成一个app_boxed.exe文件,这就是我们可以直接双击运行的文件,如下:
双击运行这个exe文件,运行截图如下:
打包移动应用apk(以安卓为例),这里需要HBuilder这个工具,直接可以在云端进行打包封装,不需要本地再配置安卓环境,打包速度也行。
1.下载HBuilder,这个直接在官网下载就行,地址/,如下:
2.下载完成后,随便解压到本地一个目录下边,如下:
3.双击打开HBuilder.exe文件,新建一个移动App应用,选中Hello H5+,如下:
4.把app.html这个文件放到app目录里边,应用结构目录如下:
5.打包前首先需要在manifest.json中配置好相关参数,如下:
接着右击app应用,选择“发行”-“云打包-打原生安装包”,这里我以安卓为例,所以选中Android,点击打包即可,如下:
6.云端打包完成后,会自动下载到本地,如下:
7.默认会下载到这个应用的unpackage的release目录下边,如下:
8.发送到安卓手机,安装后如下:
程序运行截图如下;
至此,我们就完成了html文件的打包,分别打包成桌面exe和安卓应用apk。总的来说,这个过程不难,熟悉熟悉,很快就能掌握了,网上也有许多这方面的教程可供学习和参考,你可以搜索学习一下,希望以上分享的内容能对你有所帮助吧。