只要你想学,一切都不晚,你比想象中的优秀首先你要先了解一下学习了前端能做什么。好像学习编程并不是为了实现功能,只是为了看别人做出来的技术是什么,学了web前端,就可以开发手机、电脑和APP上到处可见的网页,也可以做动画、做微信和百度小程序、还能搭建自己的博客网站、总之前端可以把我们想看的东西具象的表现出来,前端的知识丰富多彩,比起后端枯燥的数据、更有趣一些。
1、前端学完了,可以做什么?
当然是前端页面啦,除此之外,也可以做桌面应用和手机app,下面我简单介绍一下具体实现过程,主要内容如下:桌面应用这里需要先安装node环境,然后借助electron打包前端网页为桌面应用,主要步骤如下,很简单:1.首先,安装node,这个直接到官网上下载就行,如下,选择适合自己平台的版本即可:2.安装完成后,这里需要安装一下electron和electron-packager这2个工具包,后面前端网页的打包中需要用到这2个包,安装的话,直接在cmd窗口输入命令“npminstallelectronelectron-packager”就行,如下:3.这里为了方便演示,我新建了一个html网页,测试代码如下,非常简单,就是一个静态的登陆界面:用浏览器打开这个html网页,效果如下:4.最后就是具体的打包过程,主要步骤及截图如下:首先,新建一个文件夹,将上面的html网页复制进去,同时新建2个文件,分别是package.json和main.js,目录如下:package.json文件主要指明打包应用名称、版本号以及配置文件等,配置如下,非常简单:main.js文件主要指明具体打包过程,基本配置如下(网上参考资料非常多,可以搜一下),这里重点需要指明打包的html文件名称:最后就是打包,打开cmd窗口,切换到新建的目录,运行命令“electron-packager.APP--win--outAppDir--arch=x64--electron-version=3.0.10--overwrite”就会开始自动打包过程,这里的参数主要是指明打包的应用名称、输出目录、位数、版本号等:打包完成后,就会在输出目录AppDir下找到打包的应用APP.exe,双击就可正常运行,效果如下,和浏览器的效果差不多:手机app这里主要用到HBuilder这个工具,可以直接将前端网页打包为手机app(云端打包功能),下面我具体介绍一下实现过程:1.首先,下载安装HBuilder,这个直接到官网上下载就行,如下,这里选择功能比较全面的“APP开发版”:2.下载完成后,一个zip压缩包,直接解压到本地即可,如下:3.接着,双击打开这个软件,新建项目,这里的项目类型选择“5 APP(A)”,模板选择“HelloH5 ”,如下,将刚才的html文件拖到这个项目中来:4.最后就是打包过程,具体步骤如下:首先,双击项目中的mainfest.json配置文件,在基础配置页面获取唯一AppID,后面打包时要用到,同时选择程序的入口文件,也就是刚才的html文件:mainfest.json文件配置完成后,右键项目,在弹出的菜单列表中依次选择“发行”-