貓寧一 ·uni-app 的打包發(fā)布
1. 前言
在 uni-app 項目開發(fā)完成后，我們最后需要做的就是將項目打包發(fā)布了。
uni-app 項目與普通的 web 項目不同，uni-app 項目的打包文件需要在不同的平臺上面發(fā)布。雖然責(zé)任更大了，但是打包的步驟并沒有成倍的增加，反而相比普通的 web 項目繁瑣復(fù)雜的打包發(fā)布步驟，uni-app 項目打包發(fā)布步驟更加簡便了。
我們可以直接在 HBuilderX 工具中將項目進(jìn)行打包了，操作可視化，很容易上手。在 HBuilderX 工具中可以將我們開發(fā)的項目打包成能夠發(fā)布在多個平臺上面的文件。
本小節(jié)來帶領(lǐng)大家實操如何在 HBuilderX 中將項目打包，并演示如何將項目發(fā)布在各個平臺上。
2. 打包為原生App
我們平時開發(fā)的時候，沒有在 HBuilderX 工具中注冊登錄，不應(yīng)寫我們平時的開發(fā)和測試，但是如果想在 HBuilderX 工具中打包 uni-app 項目的話，是需要先注冊登錄到 HBuilderX 工具中的，不然沒有辦法操作。
2.1 打包實操
在 HBuilderX 中的工具欄，點擊發(fā)行，選擇原生app-云打包，如下圖：
還可以選擇原生app-本地打包，這是在我們本地配置中生成安裝包 apk/ipa，本地打包比較麻煩，一般當(dāng) HBuilderX 中提供的能力無法滿足 App 功能需求時才使用，通過 App 離線 SDK 開發(fā)原生插件來擴(kuò)展原生能力，大多數(shù)情況下我們都用不到。
原生app-本地打包官網(wǎng)已經(jīng)寫得很詳細(xì)了，可以參考：離線打包官網(wǎng)鏈接
繼續(xù)進(jìn)行我們的云打包，點擊原生app-云打包后，會出現(xiàn)如下界面，將 Android 包名填上，自己測試的話，選擇「使用公共測試證書」，最后選擇打包就可以了~
點擊打包之后，打包成功后會返回一個 url 地址，我們點擊這個地址就可以下載 App 了，后面也可以通過在線生成二維碼的工具將 App 下載地址生成二維碼，后面用戶通過鏈接或者二維碼就可以訪問你的項目了，是不是非常簡單。
2.2 可能出現(xiàn)的錯誤
2.2.1 Android 包名錯誤
Android 包名要用 . 至少分為兩段，并且每段開頭必須是小寫字母，比如 imooc.project 是對的，但是 imooc.123.project 是錯的。
2.2.2 出現(xiàn)紅色警告錯誤
出現(xiàn)下面的紅色警告標(biāo)志就說明當(dāng)前頁面有錯誤，這時點擊打包按鈕沒有反應(yīng)，要先解決掉錯誤才能點擊打包按鈕。
2.2.3 出現(xiàn)打包校驗錯誤
出現(xiàn)下面的警告，我們需要點擊截圖中的第一個鏈接，補(bǔ)充綁定自己的手機(jī)號等信息。
2.2.4 appid 為空
打包時報下面的錯誤，是因為 Manifest.json 文件中沒有填寫 appid。
HBuilderX 會自動幫我們打開 Manifest.json 文件，在 appid 那一行的后面點擊重新獲取就可以了。
2. 打包為 H5 手機(jī)版
在 HBuilderX 工具欄，單擊發(fā)行，選擇網(wǎng)站-H5手機(jī)版。
出現(xiàn)下面彈框，我們填寫網(wǎng)站標(biāo)題和網(wǎng)站域名之后，點擊發(fā)行就可以了。
編譯成功后，會顯示打包文件的保存地址。
uni-app 在打包成 h5 項目時，如果根據(jù)默認(rèn)的配置，項目一般是打不開的，需要在打包之前，將 vue.config 配置文件中的 publicPath 選項配置成（./），這樣編譯出來的html文件還有引用js、css文件的路徑會自動變成cdn上的地址。不然打包出來是 （/xxx/xxx）這種格式，編譯出來的html文件找不到正確的路徑，是打不開的。
3. 打包為小程序
3.1 打包為微信小程序
- 注冊微信小程序賬號，獲取到 AppID，我們后面配置的時候會用到。
- 在 HBuilderX 工具欄，點擊發(fā)行，選擇小程序-微信。
- 輸入小程序名稱和 AppID，單擊發(fā)行就可以了。
這樣我們就會獲得一個微信小程序的打包文件，接下來我們來發(fā)布微信小程序項目，打開微信小程序開發(fā)者工具，導(dǎo)入剛剛生成的微信小程序項目的打包文件，在微信小程序開發(fā)者工具中先測試一下，項目運(yùn)行是否正常，項目測試沒有問題后，點擊右上角>>按鈕，上傳代碼就可以發(fā)布微信小程序了，最后等待微信團(tuán)隊審核通過，別人就可以在線上訪問到你的項目了。
3.2 百度小程序
- 入駐百度小程序并注冊申請百度小程序的 AppID。
- 在 HBuilderX 工具欄，點擊發(fā)行，選擇小程序-百度。
- 輸入小程序名稱和百度小程序的 AppID，單擊發(fā)行就可以了。
小程序我們只演示這兩個，其他小程序的打包發(fā)布步驟都是一樣的，就不重復(fù)演示了。
4. 小結(jié)
本節(jié)課程我們主要給大家演示了如何在 HBuilderX 中進(jìn)行項目打包發(fā)布。除了本小節(jié)中給大家演示的問題，在實操過程中可能會遇到更多問題，大家要善于利用 Dcloud 社區(qū)。
本節(jié)需要掌握原生App的打包、H5 手機(jī)版、小程序等各個平臺上面 uni-app 項目的打包發(fā)布實操。
2025 imooc.com All Rights Reserved |