桌面应用

这里需要先安装node环境，然后借助electron打包前端网页为桌面应用，主要步骤如下，很简单：

1.首先，安装node，这个直接到官网上下载就行，如下，选择适合自己平台的版本即可：

2.安装完成后，这里需要安装一下electron和electron-packager这2个工具包，后面前端网页的打包中需要用到这2个包，安装的话，直接在cmd窗口输入命令“npm install electron electron-packager”就行，如下：

3.这里为了方便演示，我新建了一个html网页，测试代码如下，非常简单，就是一个静态的登陆界面：

用浏览器打开这个html网页，效果如下：

4.最后就是具体的打包过程，主要步骤及截图如下：

首先，新建一个文件夹，将上面的html网页复制进去，同时新建2个文件，分别是package.json和main.js，目录如下：

package.json文件主要指明打包应用名称、版本号以及配置文件等，配置如下，非常简单：

main.js文件主要指明具体打包过程，基本配置如下（网上参考资料非常多，可以搜一下），这里重点需要指明打包的html文件名称：

最后就是打包，打开cmd窗口，切换到新建的目录，运行命令“electron-packager . APP --win --out AppDir --arch=x64 --electron-version=3.0.10 --overwrite”就会开始自动打包过程，这里的参数主要是指明打包的应用名称、输出目录、位数、版本号等：

打包完成后，就会在输出目录AppDir下找到打包的应用APP.exe，双击就可正常运行，效果如下，和浏览器的效果差不多：

手机app

这里主要用到HBuilder这个工具，可以直接将前端网页打包为手机app（云端打包功能），下面我具体介绍一下实现过程：

1.首先，下载安装HBuilder，这个直接到官网上下载就行，如下，这里选择功能比较全面的“APP开发版”：

2.下载完成后，一个zip压缩包，直接解压到本地即可，如下：

3.接着，双击打开这个软件，新建项目，这里的项目类型选择“5+APP(A)”，模板选择“Hello H5+”，如下，将刚才的html文件拖到这个项目中来：

4.最后就是打包过程，具体步骤如下：

首先，双击项目中的mainfest.json配置文件，在基础配置页面获取唯一AppID，后面打包时要用到，同时选择程序的入口文件，也就是刚才的html文件：

mainfest.json文件配置完成后，右键项目，在弹出的菜单列表中依次选择“发行”->“原生App-云端打包(P)”，这里以打包android为例，在android包名出输入刚才获取的AppID就行，如下：

最后点击打包按钮，就会自动开始云端打包过程，打包完成后，会自动生成下载链接，可以直接下载打包好的apk安装文件到本地，官方只提供5次机会下载机会：

手机安装后的效果如下，还不错：

至此，我们就完成了将前端开发的网页打包为桌面应用和手机app。总的来说，整个过程不难，就是步骤有些繁琐，只要你熟悉一下流程，多操作几遍，很快就能掌握的，不过，有时打包出来的效果没有原生语言开发的好，需要优化改进才行，网上也有相关资料和教程，介绍的非常详细，感兴趣的话，可以搜一下，希望以上分享的内容能对你有所帮助吧，也欢迎大家评论、留言进行补充。