前端开发精品网站,前端开发的网页如何打包为手机APP和桌面exe文件

老白 2周前 27浏览 0评论
前端开发精品网站以及前端开发的网页如何打包为手机APP和桌面exe文件相关疑问,小编汇总各路说法:

这里简单介绍一下吧,打包为手机App可以借助于HBuilder,打包为桌面exe可以借助于Electron,下面我具体介绍一下打包过程,主要内容如下:

打包手机APP

1.首先,需要下载HBuilder,这个直接在官网上下载就行,如下,选择适合自己的平台,这里我们选择“APP开发版”,功能较全:

2.下载完成后,直接解压这个文件就行,如下,不需要单独安装就可以直接使用:

3.接着,我们打开这个软件,依次点击菜单栏的“文件”->“新建”->“项目”,项目类型选择“5+APP(A)”,模板选择“Hello H5+”,如下:

为了方便演示,这里我新建了一个app.html文件,测试代码如下,非常简单,就是一个登陆页面,输入用户名和密码,提交后打印出欢迎对话框:

浏览器打开后的效果如下,也比较简单清晰:

4.最后就是打包程序了,主要步骤及截图如下:

首先,双击项目的mainfest.json配置文件,在基础配置页面,点击获取唯一的应用标识,同时设置应用入口页面,也就是上面测试的app.html:

mainfest.json配置完成后,右键项目,在弹出列表中依次选择“发行”->“原生App-云端打包(P)”,在APP云打包页面选择你需要打包的手机平台,确定包名,也就是刚才的应用标识,如下:

最后点击“打包”按钮,就会开始云端打包,打包完成后,会自动生成下载链接,这里我们可以直接点击将打包好的apk下载到本地,如下:

手机安装后的效果如下:

打包桌面exe

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

2.安装完成后,需要安装一下electron和electron-packager这2个打包工具,这个直接在cmd窗口输入安装命令“npm install electron electron-packager”即可,如下:

3.最后就是打包程序了,主要步骤及截图如下:

首先新建一个文件夹,将刚才的app.html文件拖拽进去,同时新建两个打包配置文件—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和桌面exe文件。总的来说,整个过程非常不难,就是步骤有些复杂,只要你熟悉一下很快就能掌握的,当然,你也可以使用apicloud进行打包,只不过这些工具打包出来的APP没有原生开发的好,需要改进优化,至于桌面打包,你也可以使用NW.js进行打包,效果差不多,网上也有相关教程可供参考,希望以上分享的内容能对你有所帮助吧,也欢迎大家评论、留言。

通俗点来说,前端开发做的是让用户看到,感受到的页面,动画等等,后端开发做的是用户的信息数据之类的,打一个很简单的例子:对于微信app,如果做的是前端开发,就是做微信的页面,比如聊天的界面,朋友圈的界面等等,如下图的这个微信布局、实现等等。

如果做后端开发,你刚才看到的页面,你会发现,你打开微信的内容跟我的内容不一样,这个内容、数据的不同就是后端开发要解决的。

前端跟后端的区别:

1. 学习的难度不一样,前端入门容易,深入相对难,前端也很容易实现,只有一个文本,会写前端代码就可以实现页面,成就感满满的。后端入门难,深入更能,更注重逻辑,因没有界面的展示,所以需要去摸索学习,提升,相对会比较枯燥。

2. 学习的内容技术不一样。前端主要学习html,css,jquery,javascript,Bootstrap,Node.js等技术,提升用户体验,还有浏览器,手机端的各种兼容问题;后端主要有不同的语言主导的,比如以java为例,除了,要学习java这门语言,还有学习spring mvc、 Hibernate Http协议,数据库SQL知识, Servlet Tomcat服务器等技术。

虽然前端跟后端是不一样的,但是前端开发也要熟悉一点后端技术,后端开发也要熟悉前端技术,因为前端跟后端一起合作才能完美的完成项目,没有后端,前端只能展示静态的页面,则没有太大的价值,而后端如果没有前端的展示,用户就无法使用,一样没有价值体现。

前端可以开发网站,移动web站,微信公众号,微信小程序,基于Android和iOS的原生App,车载系统所有能够呈现在用户眼前的产品前端都可以做。

另外前端是一辈子都学不完的,学完理论更要用于实践。关注我可以获取更多资源哦~