次源妹儿将给大家分享一下如何使用HbuilderX将项目打包成.apk文件，并安装到手机上，做一个真正属于自己的app。具体步骤如下

1. 项目代码打包

将开发好的项目前端代码，打包成html、css、js等静态资源，打包后会自动生成/dist文件夹。不管用什么环境开发的项目，都可以生成这些静态资源。

打包命令：yarnbuild

2. 下载HbuilderX

本次分享需要用到非常重要的工具HbuilderX，这是dcloud.io出口的一款非常有用的前端开发工具，内置发布成为app的功能。

官方下载地址：https://www.dcloud.io/hbuilderx.html

3. 安装HbuilderX

HbuilderX是一个绿色软件，下载过来后是一个压缩包，解压后将目录复制到你想要放置的目录中即可安装（绿色版，不需要安装，复制到想要放的位置即可）。

4. 注册账号并登陆

要实现云打包必须要在官网登录（没有帐号可以随时注册一个）

同时还需要在HbuilderX软件上登录，两边都要登录并保持用户名一致

5. 开始打包

01 创建项目

在Hbuilder软件上创建项目，类型：5+App

必须要写项目名称和项目路径，项目名称最好写英文，项目路径最好不要有中文

02将项目静态文件复制到HbuildX刚创建的项目中

将之前打包好的dist目录静态资源，复制到刚刚创建的5+App项目目录中去，用于打包成app的源文件。

03 配置打包选项【重点】

点击项目根目录下的manifest.json文件对打包进行，主要配置项有：

基础配置：应用标识、应用名称、入口页面

图标配置：上传正方形的.png图片作为app的图标，注意格式必须是.png

模块配置：有可能会报“通讯录”权限问题，建议关闭通讯录权限

04 发行打包成App

找到“发行”菜单 -> “原生App-云打包” -> 使用公共测试证书 -> 打包 ->继续打包，然后等待5分钟左右，即可打包完成

05 下载apk文件到手机安装

打包完成后即可在项目目录中找到.apk安装包，如果目录中没有也可以通过下载地址下载到本地。

可以通过微信、USB数据线等方式将这个文件传到手机上，就能安装和使用了。

、前言

移动web时代，手机的兴起使得大部分在手机上的应用开发变得如火如荼，然而传统的app开发需要掌握的知识点繁多，开发周期特别漫长，为了解决这个问题，webapp应运而生，它使得app开发的难度大幅度降低，只要你懂前端就可以开发app；然而由于技术的更迭，不光出现了app，还有小程序以及一些网站，于是，很多人瞄准了多端应用市场，所谓多端指的是一套代码多个平台运行，比如我在DCloud上写了一个应用，我可以把它打包为小程序、网站和App，这样就减少了我们开发的难度和时间，目前最火的要属DCloud和APICloud了，由于uniapp是基于DCloud，所以咱们今天所讲的内容全部基于DCloud平台，好了，下面让我们一起进入到今天的课题中吧。

二、安装开发工具Hbuilderx

这个就是我们今天的主人翁，往后我们会一直用这个工具开发app甚至小程序和网站，下载地址：https://www.dcloud.io/hbuilderx.html，下载好后直接安装即可，安装好后界面是这样的，如图：

安装完毕之后需要我们再去申请注册一个DCloud的账号用于登录，这个很简单，就不说了。

三、创建第一个uniapp应用

首先我们新建一个目录，如图：

然后选择uniapp，如图：

此时我们先填写项目名称，然后选择项目的目录，最后我们可以选择一个合适的模板，或者是空模板，这里我们我们为了上手方便选择hello uni-app这个模板，选择的这个模板里面的内容是uni-app中的所有组件的使用方法，如图：

当我们点击创建后就会自动生成一个目录了，如图：

通过目录里面的文件夹名我们可以了解到，应用的界面其实是放在pages文件夹里的，所以我们随便点击一个pages里的文件，然后将其运行在内置浏览器中，如图：

四、打包app

当我们做完这一切之后就可以发布这个app，在发布之前我们还可以对这个App的其它设置进行一些调整，如图：

调整好之后，我们就可以来打包了，如图：

这里有三个选项，云打包、本地打包和制作应用wgt包，这三个选项是什么意思了，首先，云打包可以不用在电脑上安装任何sdk就能制作一个app，而本地打包就麻烦点，需要我们下载Android studio然后还有一些sdk才能打包好，过程比较繁琐；至于wgt包，制作好了之后可以进行同步更新并且不用用户再度下载，非常的方便。因此这里我们选择云打包，如图：

可以看到有些平台的apk打包成功了，不过有些失败的，不去纠结那么多，我们直接把这些apk安装到手机上即可使用。

五、总结

本文主要和大家讲的就是关于uniapp的制作和打包，可以看到，uniapp让我们轻松做到了从零基础到开发app。更多精彩好文敬请关注公众号简易编程网。