HBuilder打包手机app的方法

前言：

 

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【HBuilder打包手机app的方法 】

若是你是一个前端新手，若是你被网上的“HBuilder打包手机app的教程”气的想砸电脑，那么建议你看看这篇教程，但愿你有耐心读完，由于它的详细程度绝对是小白级别；

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。该软件既能够支持web代码编写，也能够将已经编写好的项目代码打包为手机APP，本文主要讲解使用Hbuilder将项目代码打包为手机APP的使用方法；

步骤以下：

一、先在官网下载Hbuilder工具：也能够用360软件管家直接搜索Hbuilder，进行下载；

官网下载地址：http://www.dcloud.io/

二、下载完成以后，须要先进行注册，不注册也能够打开，可是打包生成手机APP的时候，appid会报错，注册很是简单，直接用邮箱注册并登陆便可：

 

三、 注册并登陆后，Hbuilder入门是讲解怎么快速编写代码的，能够不用看。首先打开“文件”-“新建”-“移动APP”，输入“应用名称”，“位置”能够根据须要本身选择便可，“选择模板”建议选择空模板；

四、 新建完成以后，打开文件夹所在的路径，默认会新建不少空文件：

五、 Hbuilder会显示新建的项目文件夹：

六、 打开新建的本地文件夹后，该文件夹中的子文件夹不是必须的，若是你用的sass或者less编译的css文件，能够直接将css文件夹删除，再将本身项目中的sass或者less文件夹复制过来便可；其余的html，ls，img文件夹，将本身的项目文件对应复制到文件夹中，注意html中的引用路径须要保持正确；

七、 文件复制完成后，打开HBuilder，打开manifest.json文件：应用名称和版本号根据须要编辑，appid点击云端获取，页面入口默认是index.html，根据本身项目须要，更改APP的启动页面；

八、 配置完成后，点击页面下方的图标配置：配置APP在手机上的显示图标；默认是HBuilder的图标：

配置图标后，点击：自动生成全部图标并替换，这样app的显示图标就都更换为咱们上传的图片了；

九、 “启动图片配置”，“SDK配置”和“模块权限配置”默认便可，在“页面引用关系”界面，须要理解该功能是什么意思：

点击左侧html文件，右侧会显示不一样的文件，图片等：表示左侧html加载时所须要的资源；

下面的表示该页面能跳转到的页面：

理解该功能的含义以后，分别点击左侧html文件，查看须要加载的资源和跳转的页面是否正常便可；

注：通常点击到“页面引用关系”的时候，就会自动生成全部的页面关系信息，可是有时候点开是空白的，这就须要本身手动点击该页面上方的“扫描代码”了。

也可能点击一次扫描代码仍是空白，再屡次点击依然空白（我以为这是一个bug，我已经屡次碰到该问题）。运气好的点击几回会正常加载，若是你点背，那就只能先手动添加资源，而后再点击“扫描代码”，通常会正常；

十、 “代码视图”页面，显示的是该app的具体信息，能够浏览一下，不须要更改。

十一、 全部信息更改完成后，点击导航栏的“发行”-“发行为原生安装包”：

十二、 点击“打包”后会提示“是否配置unpackage文件清单以减少包体积”；能够忽略该信息，可是为了减小下载所耗流量，咱们仍是配置一下比较合适；

1三、 点开“配置unpackage文件清单”后，会发现，里面是一些sass组件，编译文件和无用的图片（若是你清理过图片，就不会显示无用的图片，可是sass文件确定会有），将文件夹打钩，点击“加入unpackage清单”便可。

至于该操做是什么意思，本身查看HBuilder的解释；

1四、 配置完成后，再次点击“打包”，发现仍是有提示，这个提示就根据本身app的须要来选择了。通俗解释权限配置就是：你安装app时提示的“是否容许读取本手机联系人”，“是否容许读取短信”等操做。

1五、 点击“继续打包”，一路肯定后，弹出查看app打包状态：

打包成功后会显示一个安卓的app，一个苹果的app；

1六、 点击“打开下载目录”，找到app所在目录，剩下的就是将你的app给你的产品经理，让他放到各大应用商店供用户下载了。

1七、 若是你只是须要将该app安装到手机进行调试，那就直接用数据线链接到电脑，点击Hbuilder的“运行”-“手机运行”，链接到手机，再根据手机对应下载手机助手便可。