×

hbuilder官网下载

学完了HTML、CSS和JS的开发技术后能做些什么?前端学完了,可以做什么

admin admin 发表于2022-07-30 21:12:44 浏览117 评论0

抢沙发发表评论

学习HTML也是一个渐进的过程,可以直接下载打包好的apk安装文件到本地,然后用HBuilder的云端打包功能打包成一个apk文件,这个过程可以从学习HTML开始,从HTML开始学习是一个非常好的切入点,非常简单:main.js文件主要指明具体打包过程,可以说学习HTML是打开Web开发的大门,在学习HTML的过程中。

学完了HTML、CSS和JS的开发技术后能做些什么

可以做一个简单的安卓应用了,先用HTML、CSS和JS做好页面,然后用HBuilder的云端打包功能打包成一个apk文件,安装到自己的手机上,下面我简单介绍一下实现过程:

1.下载HBuilder,这个直接到官网上下载就行,如下,选择“APP开发版”:

2.下载完成后,解压这个压缩文件到一个任意一个文件夹,如下:

3.接着,我们打开HBuilder,依次点击“文件”-》“新建”-》“项目”,选择“5+APP(A)”,同时勾选“Hello H5+”,输入项目名称,最后,点击创建,如下:

这里我们新建一个app.html文件,主要内容如下,就是一个简单登录界面:

用浏览器打开效果如下:

4.然后,我们就可以进行打包了,双击打开mainfest.json文件,这里点击“云端获取”,获得“应用标识(AppID)”,同时选择一下“应用入口页面”,即上面的app.html,如下:

配置完成后,我们右击App应用,依次选择“发行”-》“原生App-云端打包(P)”,这里我们打包成安卓应用,故选“Android”,最后,点击打包就行,如下:

云端打包成功后,会生成下载链接,我们直接点击下载就行,如下:

到此,app已经打包完成,我们直接可以在手机端进行安装,效果如下:

至此,我们就完成了将HTML,CSS和JS写的网页打包成了安卓App。总的来说,整个过程不难,就是有些繁琐,需要配置一些参数,我这里的示例比较简单,你可以把界面写的更好、更丰富一些,然后打包成一个手机app,使用一下,当然,你也可以打包成桌面应用,方法也很多,网上也有相关资料和教程,感兴趣的可以搜一下,希望以上分享的内容能对你有所帮助吧,也欢迎大家评论、留言。-hbuilder官网下载

前端学完了,可以做什么

当然是前端页面啦,除此之外,也可以做桌面应用和手机app,下面我简单介绍一下具体实现过程,主要内容如下:

桌面应用

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

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

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

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”就会开始自动打包过程,这里的参数主要是指明打包的应用名称、输出目录、位数、版本号等:-hbuilder官网下载

  • 打包完成后,就会在输出目录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。总的来说,整个过程不难,就是步骤有些繁琐,只要你熟悉一下流程,多操作几遍,很快就能掌握的,不过,有时打包出来的效果没有原生语言开发的好,需要优化改进才行,网上也有相关资料和教程,介绍的非常详细,感兴趣的话,可以搜一下,希望以上分享的内容能对你有所帮助吧,也欢迎大家评论、留言进行补充。-hbuilder官网下载

小白如何学习html需要下载什么软件

在Web时代,HTML是非常重要的基础性知识,HTML+HTTP构成了最常见的Web解决方案。很多人接触Web开发都是从学习HTML开始的,可以说学习HTML是打开Web开发的大门。

虽然HTML很重要,但是HTML却简单易学,对于没有计算机基础的人来说,也是很容易就能掌握的,这为Web开发的大发展奠定了一个重要的基础。

要想学习HTML首先要了解HTML的作用,简单的说HTML是一种标记语言,这种标记语言为用户提供了一个接口,用于访问互联网上的资源(文本)。

学习HTML也是一个渐进的过程,这个过程可以从学习HTML开始,然后开始学习CSS,再然后开始学习JavaScript,其中JavaScript不仅可以做前端开发,也可以做后端服务,目前JavaScript的应用还是非常普遍的。在学习HTML之后,推荐再继续学习一下PHP,通过PHP和前端开发的结合能够更好的掌握Web开发的流程,同时PHP也并不复杂,可以说跟HTML是一脉相承。-hbuilder官网下载

学习HTML应该从基本的语法开始学起,学习HTML并不需要什么复杂的环境,一个记事本再加一个浏览器就可以完成基本的实验环境搭建。

如果想进一步提高实验的开发效率,可以考虑安装一个集成化的开发环境,比如HBuilder就是一个不错的选择。当然,在学习的初期,使用Editplus也是一个不错的选择,这对提高HTML编程能力会有较大的帮助,我在早期做开发的时候就是采用的Editplus,这在很大程度上锻炼了我手写代码的能力。-hbuilder官网下载

总之,对于计算机基础比较薄弱的人来说,从HTML开始学习是一个非常好的切入点,也是一个比较现实的选择。在学习HTML的过程中,能不断补学大量的网络知识和计算机知识,而且实验比较好做,能很容易建立起学习的信心。-hbuilder官网下载

我从事软件开发多年,目前主要的研究方向是大数据和人工智能,我会陆续在头条写一些关于大数据方面的文章,感兴趣的朋友可以关注我的头条号,相信一定会有所收获。

如果有大数据方面的问题,也可以咨询我。

谢谢!