div是什么意思单位(div是什么意思html)

首先,当然是写网页了,其次还可以开发桌面应用和移动应用,下面我大概介绍一下如何将一个写好的网页打包成一个桌面应用(exe)和移动应用(apk),以供电脑和手机使用,主要借助NW.js和HBuilder这两个工具,主要步骤如下:

为了方便演示,这里新建了一个简单的app.html网页,主要代码如下,很简单,下面的打包都以这个网页为例:

div是什么意思单位(div是什么意思html)

浏览器打开这个html文件,截图如下:

div是什么意思单位(div是什么意思html)

打包桌面应用exe,这里需要NW.js这个工具,NW.js是Intel开发的一个基于node.js和chromium的程序运行环境,打包html网页很快。

1.首先需要下载NW.js,这个直接到官网下载就行,地址/,如下:

div是什么意思单位(div是什么意思html)

2.下载完成后,随便解压到一个本地目录下边,如下(部分解压文件截图):

div是什么意思单位(div是什么意思html)

3.在当前解压目录下边新建一个app目录,把我们的测试html文件app.html放到里面,同时新建一个package.json文件,配置如下,主要指明入口文件和应用名称:

div是什么意思单位(div是什么意思html)

此时当前app目录内容截图如下:

div是什么意思单位(div是什么意思html)

4.接着就开始打包过程,这里需要下载Enigma Virtual Box,地址,如下:

div是什么意思单位(div是什么意思html)

5.将app目录下边的app.html文件和package.json文件压缩为app.zip,重新命名为app.nm,如下:

div是什么意思单位(div是什么意思html)

6.将app.nw复制到NW.js解压目录下面,打开cmd窗口,输入如下命令,在当前目录下边会生成一个app.exe文件:

div是什么意思单位(div是什么意思html)

7.打开Virtual Box,除了app.exe文件外,其他文件都放到里面进行压缩打包,如下:

div是什么意思单位(div是什么意思html)

8.打包完成后,会在当前目录下边生成一个app_boxed.exe文件,这就是我们可以直接双击运行的文件,如下:

div是什么意思单位(div是什么意思html)

双击运行这个exe文件,运行截图如下:

div是什么意思单位(div是什么意思html)

打包移动应用apk(以安卓为例),这里需要HBuilder这个工具,直接可以在云端进行打包封装,不需要本地再配置安卓环境,打包速度也行。

1.下载HBuilder,这个直接在官网下载就行,地址/,如下:

div是什么意思单位(div是什么意思html)

2.下载完成后,随便解压到本地一个目录下边,如下:

div是什么意思单位(div是什么意思html)

3.双击打开HBuilder.exe文件,新建一个移动App应用,选中Hello H5+,如下:

div是什么意思单位(div是什么意思html)

4.把app.html这个文件放到app目录里边,应用结构目录如下:

div是什么意思单位(div是什么意思html)

5.打包前首先需要在manifest.json中配置好相关参数,如下:

div是什么意思单位(div是什么意思html)

接着右击app应用,选择“发行”-“云打包-打原生安装包”,这里我以安卓为例,所以选中Android,点击打包即可,如下:

div是什么意思单位(div是什么意思html)

6.云端打包完成后,会自动下载到本地,如下:

div是什么意思单位(div是什么意思html)

7.默认会下载到这个应用的unpackage的release目录下边,如下:

div是什么意思单位(div是什么意思html)

8.发送到安卓手机,安装后如下:

div是什么意思单位(div是什么意思html)

程序运行截图如下;

div是什么意思单位(div是什么意思html)

至此,我们就完成了html文件的打包,分别打包成桌面exe和安卓应用apk。总的来说,这个过程不难,熟悉熟悉,很快就能掌握了,网上也有许多这方面的教程可供学习和参考,你可以搜索学习一下,希望以上分享的内容能对你有所帮助吧。

(0)
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 ZLME@ZLME.COM 举报,一经查实,立刻删除。

相关推荐