一、uni-app項目介紹

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

項目結構：

• ├── components 公用組件 

• ├── libs 公共方法 

• ├── pages 頁面 

• ├── static 本地靜態(tài)資源，注意：靜態(tài)資源只能存放于此 

• ├── store 狀態(tài)管理 

• ├── styles 公共樣式 

• ├── config.js 配置文件 

• ├── manifest.json 配置應用名稱、appid、logo、版本等打包信息，詳見 

• ├── pages.json 配置頁面路由、導航條、選項卡等頁面類信息 

• └── unpackage 

• ├── res 圖標、啟動頁 

• ├── cert APP證書文件 

• └── dist 打包的文件 

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

相關開發(fā)文檔：

• vue
• uniapp
• HBuilderX
• stylus

二、注冊開發(fā)者賬號和創(chuàng)建應用

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

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

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

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

四、新建和運行項目

先安裝一些常用的插件：

• 內置瀏覽器
• uni-app（Vue2）編譯
• uni-app（Vue3）編譯
• App真機運行
• App云打包
• scss/sass編譯
• stylus編譯

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

運行項目運行項目通過HBuilderX頂部菜單：運行 - 運行到...，開發(fā)階段可先選擇：運行到內置瀏覽器，如果有報錯缺少xx插件，直接根據提示去安裝對應插件，再重新運行就可以了。

五、小程序和H5打包

各平臺的配置可以直接在manifest.json里配置，或者在HBuilderX開發(fā)工具里選中manifest.json文件，右側會出現圖形化界面直接選擇配置

先運行起來，然后點擊：發(fā)行 - 小程序/網站 - 設置小程序/網站名字/appid/域名，打包成功后可以在dist - build 文件夾下找到對應平臺的打包文件（dist - dev 目錄下對應的是各平臺運行文件）

六、安卓應用打包

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

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

3、點擊打包按鈕

七、IOS應用打包

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

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

3、點擊打包按鈕

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

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

打包證書相關資料：
Android平臺云端打包證書使用說明
Android平臺云端打包 - DCloud公用證書（DCloud老版證書）
Android平臺簽名證書(.keystore)生成指南
iOS證書(.p12)和描述文件(.mobileprovision)申請

八、發(fā)布上線

1、小程序直接用小程序開發(fā)者工具導入 dist - build 文件夾下對應的目錄，如微信小程序：dist/build/mp-weixin

2、H5和web網站一樣，將最終打包出來的H5文件部署到線上：dist/build/h5

3、Android

• 最終生成的apk文件，可以直接用聊天工具發(fā)送到安卓手機上安裝使用
• 去注冊各大安卓應用市場賬號，上傳到應用市場供用戶下載
• 也可以自己開發(fā)一個發(fā)布頁，將安卓apk放到項目里，用戶點擊直接下載到手機里，如果設備是ios還可以直接判斷讓跳轉到appstore下載地址

4、IOS① 正式版本
ios正式應用只能從app store里下載，需要先注冊蘋果開發(fā)者賬號，填寫各項應用資料，上傳ipa文件審核通過后才能下載使用

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

用有授權的蘋果手機掃描二維碼在Safari瀏覽器里打開即可直接下載安裝，或者直接在safari瀏覽器中輸入“下載地址”

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

Android平臺打包發(fā)布apk應用，需要使用數字證書（.keystore文件）進行簽名，用于表明開發(fā)者身份，Android證書的生成是自助和免費的，不需要審批或付費。

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

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

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

d:

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

我的JRE裝在D盤下 "D:\Programs\jre\bin"

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

注意這里安裝路徑不要寫錯了，我這里剛開始路徑里 Programs 就少了個s，后面就一直報錯：keytool不是內部或外部命令，也不是可運行的程序

4、使用keytool -genkey命令生成證書

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

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

按提示輸入信息后就會在D盤根目錄下生成 android.keystore 文件，這個文件就可以用來直接打包安卓app了

最新評論