快捷導(dǎo)航

uniapp開(kāi)發(fā)打包多端應(yīng)用完整方法指南

更新時(shí)間：2022年12月23日 14:57:06 作者：xjbx

這篇文章主要介紹了uniapp開(kāi)發(fā)打包多端應(yīng)用完整流程指南,包括了uniapp打包小程序，uniapp打包安卓apk，uniapp打包IOS應(yīng)用,需要的朋友可以參考下

一、uni-app項(xiàng)目介紹

用uni-app開(kāi)發(fā)多端項(xiàng)目，一套代碼可同時(shí)打包出各端小程序、h5和app，uni-app支持通過(guò) HBuilderX可視化界面和 vue-cli命令行兩種方式創(chuàng)建項(xiàng)目，下面示例項(xiàng)目采用 HBuilderX可視化界面的方式創(chuàng)建，cli項(xiàng)目可參考uni文檔，大部分流程都是通用的。

項(xiàng)目結(jié)構(gòu)：

├── components 公用組件
├── libs 公共方法
├── pages 頁(yè)面
├── static 本地靜態(tài)資源，注意：靜態(tài)資源只能存放于此
├── store 狀態(tài)管理
├── styles 公共樣式
├── config.js 配置文件
├── manifest.json 配置應(yīng)用名稱、appid、logo、版本等打包信息，詳見(jiàn)
├── pages.json 配置頁(yè)面路由、導(dǎo)航條、選項(xiàng)卡等頁(yè)面類信息
└── unpackage
├── res 圖標(biāo)、啟動(dòng)頁(yè)
├── cert APP證書(shū)文件
└── dist 打包的文件

拿到源碼先修改 config.js 里的 api 請(qǐng)求接口地址，改成你自己的請(qǐng)求域名，然后 manifest.json 里各平臺(tái)的 appid 改成你自己小程序的 appid：

相關(guān)開(kāi)發(fā)文檔：

vue
uniapp
HBuilderX
stylus

二、注冊(cè)開(kāi)發(fā)者賬號(hào)和創(chuàng)建應(yīng)用

開(kāi)始開(kāi)發(fā)前需要先去uni的開(kāi)發(fā)者后臺(tái)注冊(cè)一個(gè)賬號(hào)，登錄注冊(cè)地址：https://dev.dcloud.net.cn/，然后在里面創(chuàng)建一個(gè)你自己的應(yīng)用：

三、安裝開(kāi)發(fā)工具HBuilderX

HBuilderX，簡(jiǎn)稱HX，是輕如編輯器，強(qiáng)如IDE的合體版本，有點(diǎn)像vscode和小程序開(kāi)發(fā)工具的結(jié)合體，頂部菜單欄有一個(gè)“運(yùn)行”和“發(fā)行”的菜單，直接點(diǎn)擊：運(yùn)行 —— 運(yùn)行到內(nèi)置瀏覽器，可以直接像在瀏覽器里一樣調(diào)試。

發(fā)布App時(shí)，需要使用HBuilderX，其他開(kāi)發(fā)工具無(wú)法發(fā)布App，但可以發(fā)布H5、各種小程序。如需開(kāi)發(fā)App，可以先在HBuilderX里運(yùn)行起來(lái)，然后在其他編輯器里修改保存代碼，代碼修改后會(huì)自動(dòng)同步到手機(jī)基座。HBuilderX下載地址：https://www.dcloud.io/hbuilderx.html。

四、新建和運(yùn)行項(xiàng)目

先安裝一些常用的插件：

內(nèi)置瀏覽器
uni-app（Vue2）編譯
uni-app（Vue3）編譯
App真機(jī)運(yùn)行
App云打包
scss/sass編譯
stylus編譯

創(chuàng)建項(xiàng)目創(chuàng)建新項(xiàng)目可以通過(guò)HBuilderX頂部菜單：文件 - 新建 - 項(xiàng)目，導(dǎo)入已有項(xiàng)目：文件 - 導(dǎo)入 - 從...

運(yùn)行項(xiàng)目運(yùn)行項(xiàng)目通過(guò)HBuilderX頂部菜單：運(yùn)行 - 運(yùn)行到...，開(kāi)發(fā)階段可先選擇：運(yùn)行到內(nèi)置瀏覽器，如果有報(bào)錯(cuò)缺少xx插件，直接根據(jù)提示去安裝對(duì)應(yīng)插件，再重新運(yùn)行就可以了。

五、小程序和H5打包

各平臺(tái)的配置可以直接在manifest.json里配置，或者在HBuilderX開(kāi)發(fā)工具里選中manifest.json文件，右側(cè)會(huì)出現(xiàn)圖形化界面直接選擇配置

先運(yùn)行起來(lái)，然后點(diǎn)擊：發(fā)行 - 小程序/網(wǎng)站 - 設(shè)置小程序/網(wǎng)站名字/appid/域名，打包成功后可以在dist - build 文件夾下找到對(duì)應(yīng)平臺(tái)的打包文件（dist - dev 目錄下對(duì)應(yīng)的是各平臺(tái)運(yùn)行文件）

六、安卓應(yīng)用打包

1、點(diǎn)擊：發(fā)行 - 原生App-云打包

2、按照unpackage/cert目錄下的README.md說(shuō)明填寫(xiě)：Android包名、證書(shū)別名、證書(shū)私鑰密碼、選擇證書(shū)文件（直接點(diǎn)瀏覽按鈕，選到 unpackage/cert 目錄，Android開(kāi)發(fā)證書(shū)生成參考文末的說(shuō)明）

3、點(diǎn)擊打包按鈕

七、IOS應(yīng)用打包

1、點(diǎn)擊：發(fā)行 - 原生App-云打包

2、按照unpackage/cert目錄下的 README.md 說(shuō)明填寫(xiě)：Bundle ID(AppID)、證書(shū)私鑰密碼、證書(shū)profile文件和私鑰證書(shū)（直接點(diǎn)瀏覽按鈕，選到 unpackage/cert 目錄）

3、點(diǎn)擊打包按鈕

使用云打包點(diǎn)擊了打包按鈕后，需要等待一段時(shí)間，少則幾分鐘，多則大半天...最終打包成功后會(huì)在控制臺(tái)打印出app安裝文件的下載地址：

Android：apk文件，直接點(diǎn)擊“打開(kāi)所在目錄”，生成的apk文件在 unpackage/release/apk文件夾下
IOS: ipa文件，直接點(diǎn)擊“下載地址”，遠(yuǎn)程下載到本地

八、發(fā)布上線

1、小程序直接用小程序開(kāi)發(fā)者工具導(dǎo)入 dist - build 文件夾下對(duì)應(yīng)的目錄，如微信小程序：dist/build/mp-weixin

2、H5和web網(wǎng)站一樣，將最終打包出來(lái)的H5文件部署到線上：dist/build/h5

3、Android

最終生成的apk文件，可以直接用聊天工具發(fā)送到安卓手機(jī)上安裝使用
去注冊(cè)各大安卓應(yīng)用市場(chǎng)賬號(hào)，上傳到應(yīng)用市場(chǎng)供用戶下載
也可以自己開(kāi)發(fā)一個(gè)發(fā)布頁(yè)，將安卓apk放到項(xiàng)目里，用戶點(diǎn)擊直接下載到手機(jī)里，如果設(shè)備是ios還可以直接判斷讓跳轉(zhuǎn)到appstore下載地址

4、IOS① 正式版本
ios正式應(yīng)用只能從app store里下載，需要先注冊(cè)蘋(píng)果開(kāi)發(fā)者賬號(hào)，填寫(xiě)各項(xiàng)應(yīng)用資料，上傳ipa文件審核通過(guò)后才能下載使用

② 測(cè)試版本
ios-app測(cè)試時(shí)，將ipa文件上傳到蒲公英上：https://www.pgyer.com/

用有授權(quán)的蘋(píng)果手機(jī)掃描二維碼在Safari瀏覽器里打開(kāi)即可直接下載安裝，或者直接在safari瀏覽器中輸入“下載地址”

附：windows下生成安卓開(kāi)發(fā)證書(shū)

Android平臺(tái)打包發(fā)布apk應(yīng)用，需要使用數(shù)字證書(shū)（.keystore文件）進(jìn)行簽名，用于表明開(kāi)發(fā)者身份，Android證書(shū)的生成是自助和免費(fèi)的，不需要審批或付費(fèi)。

可以使用JRE環(huán)境中的keytool命令生成，以下是windows平臺(tái)生成證書(shū)的方法：

1、安裝JRE環(huán)境可從Oracle官方下載jre安裝包：https://www.oracle.com/technetwork/java/javase/downloads/index.html（記住安裝的路徑，后面生成證書(shū)的時(shí)候要用到）

2、打開(kāi)命令行（cmd），可以先切換到要生成的目錄下
我直接在D盤(pán)根目錄下生成輸入：

d:

3、將JRE安裝路徑添加到系統(tǒng)環(huán)境變量

我的JRE裝在D盤(pán)下 "D:\Programs\jre\bin"

set PATH=%PATH%;"D:\Programs\jre\bin"

注意這里安裝路徑不要寫(xiě)錯(cuò)了，我這里剛開(kāi)始路徑里 Programs 就少了個(gè)s，后面就一直報(bào)錯(cuò)：keytool不是內(nèi)部或外部命令，也不是可運(yùn)行的程序

4、使用keytool -genkey命令生成證書(shū)

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore android.keystore

testalias：是證書(shū)別名，可修改為自己想設(shè)置的字符，建議使用英文字母和數(shù)字
android.keystore：是證書(shū)文件名稱，可修改為自己想設(shè)置的文件名稱，也可以指定完整文件路徑
36500：是證書(shū)的有效期，表示100年有效期，單位天，建議時(shí)間設(shè)置長(zhǎng)一點(diǎn)，避免證書(shū)過(guò)期