次源妹兒將給大家分享一下如何使用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。更多精彩好文敬請關注公眾號簡易編程網。