vlambda博客
学习文章列表

[教学]使用HBuilder将网站封装APP

点击上方蓝色字关注我们~

大家好,我是棉花糖

关注后每天晚上 19:00 获取最新资源


[教学]使用HBuilder将网站封装APP


今日教程:使用HBuilder将网站封装APP

[教学]使用HBuilder将网站封装APP



将网站打包成APP其实不是很难,只需要简单的几个步骤就能把网站打包成简洁的APP 将网站打包成APP其实不是很难,只需要简单的几个步骤就能把网站打包成简洁的APP


----------------------------------------------


前言

[教学]使用HBuilder将网站封装APP


很多人初接触代码的时候就是先学习如何制作APP..

但也有人先学的制作网页…

其实很多APP都是利用网页打包成的…

利用HBuilder这个编辑器可以轻松地将网站..

博客之类打包成APP…

可以在Android或者ios上直接运行…


素材准备

[教学]使用HBuilder将网站封装APP


一安装一个HBuilder

二、一张256*256的APPLogo

三、一张1920*1080的APP启动图(小一些的也行)

四、一双眼睛..一双手…


操作步骤

[教学]使用HBuilder将网站封装APP


一、打开“HBuilder”先注册一个账号登陆(否则无法打包)

二、点击左上角“文件”–“新建”–“移动APP”新建一个项目

[教学]使用HBuilder将网站封装APP

三、填写“应用名称” – 选择模板“空模版” – “完成”

[教学]使用HBuilder将网站封装APP

四、点击左侧项目名称 – “manifest.json”

[教学]使用HBuilder将网站封装APP

六、点击下方“图标配置” – “选择图标”(256*256或更小) – “自动生成所有图标并替换”

[教学]使用HBuilder将网站封装APP

七、” – 根据提示分辨率添加启动图

[教学]使用HBuilder将网站封装APP

[教学]使用HBuilder将网站封装APP

九、” ..ios的也可以一起勾上 – “Android包名”开始打包

[教学]使用HBuilder将网站封装APP

十、有些会提示如下错误..直接“继续打包”就行..也可以回去更改一下权限 – 自动提交云端打包

[教学]使用HBuilder将网站封装APP

十一、然后会提示“云端打包成功” 点确定会出现“正在制作安装包”的提示…等待一会,打包过程有时候会很长,可以先不管,过会再查看是否完成。

[教学]使用HBuilder将网站封装APP

十二、等待制作时间很快的

[教学]使用HBuilder将网站封装APP

十三、”查看打包好的安装包

[教学]使用HBuilder将网站封装APP

十四、可以在手机测试或者模拟器测试

PS:HBuilder 有一个专门的模板..mui模板..有兴趣的可以去试试…在新建项目时可以看到

-----------------------------------------------------



HBuilder还有其它的许多功能..可以研究研究
相关HBuilder官网:http://dcloud.io/
官方HBuilder下载:http://download.dcloud.net.cn/HBuilder.8.8.0.windows.zip


[教学]使用HBuilder将网站封装APP



[教学]使用HBuilder将网站封装APP


感觉不错的话,可以打卡支持我们哦

[教学]使用HBuilder将网站封装APP

本期教程网站打包APP

点击阅读原文访问网址

[教学]使用HBuilder将网站封装APP