如(rú)今前端領域技術(shù)五花(huā)八門，随之的技術(shù)框架也越來越多，暗示着前端開發需要學習了解技術(shù)越來越廣。今天我們來聊聊跨平台框架之 Uni-App。

這裡筆者就不把 Uni-App 來拿和(hé)其他跨平台框架進行對比了，直接分析一下(xià)若使用 Uni-App 開發一個(gè)應用。不過，筆者希望有興趣的小夥伴也了解學習下(xià)其他跨平台框架（像Taro、Weex、RN、Flutter等），畢竟技多不壓身嘛~ 

前言

使用 uni-app 開發項目需要滿足開發者的兩個(gè)條件：

1. 熟悉 Vue
2. 熟悉原生微信小程序

uni-app 非常簡單，隻需會上面兩種技術(shù)就完全可(kě)以獨立負責一個(gè)項目的所有前端工作

項目初始化工作

創建項目

• 方式一：命令行

  注意：确保電腦安裝了Vue環境
  vue create -p dcloudio/uni-preset-vue my-project
  複制代碼

• 方式二：HBuilderX 可(kě)視化界面

項目前期準備

• 規劃好項目目錄結構
  1. components - 存放項目公共的組件
  2. pages - 存放項目的業(yè)務組件
  3. static - 存放靜态資(zī)源
  4. common - 存放一些公共的 css、js 和(hé)請求封裝等
  5. store - 存放項目中(zhōng)需要共享的狀态
  6. ...
• 在 manifest.json 中(zhōng)配置好各個(gè)平台的系統配置

運行軟件&開發工具安裝

• 代碼編寫軟件：HBuilder X
• 微信小程序運行軟件：微信開發者工具
• 支付寶小程序運行軟件：支付寶開發者工具
• H5 運行環境：浏覽器(qì)
• Android 運行軟件：安卓模拟器(qì)（推薦大家windows平台使用“雷電模拟器(qì)”）
• IOS 運行軟件：蘋果模拟器(qì)
• ...

如(rú)何運行各端

傻瓜式運行！！！點擊HBbuilderX工具上的頂部工具欄，點擊 運行，選中(zhōng)自己想要的那個(gè)平台即可(kě)。

微信小程序端

申請公司企業(yè)級微信小程序賬号

1. 第一步：打開 微信公衆平台 進行小程序賬号注冊
2. 登錄注冊時填寫的郵箱，點擊鍊接激活小程序
3. 填寫小程序相關(guān)信息
4. 選擇企業(yè)注冊，填寫企業(yè)名稱、上傳營業(yè)執照等等...
5. 申請成功後，騰訊會向公司賬戶進行小額打款并進行電話确認
6. 進行微信認證，需支付300元。1~2天即可(kě)認證成功

微信小程序的版本

• 開發版
• 體驗版
• 線上版

如(rú)果要發體驗版本的話，建議點擊工具狀态欄上的 發行，選擇微信小程序，再上傳到微信後台。這樣子(zǐ)打包體積會小一點！

上線發布流程

第一步：使用 HBuiderX 進行打包，此時會自動(dòng)打開“微信開發者工具”

注意事項：

  1. 确保代碼是完整的最新的
  2. 檢查接口域名地址是否是線上環境域名
  3. 去掉本地項目裡無用的代碼
  4. 确定小程序 `appId` 是否正确
複制代碼

第二步：點擊“微信開發者工具”，右上角“上傳”

注意事項：

1. 上傳的内容不得超過2M（需優化代碼，減少(shǎo)本地資(zī)料，采用網絡地址）
2. 填寫上傳的版本信息（**注意：**上傳的當前的版本号要比上一次版本号大）
複制代碼

第三步：打開登錄微信公衆平台

注意事項：

1. 上一步操作完成後，可(kě)在“版本管理” -> “開發版本”中(zhōng)設置為體驗版
2. 體驗版在體驗時，若域名和(hé)上一次的體驗版有修改，先删除上一版，重新掃碼即可(kě)（防止數據不對）
3. 提交申請前，确保小程序内的所有内容已經在服務類目中(zhōng)有體現
4. 提交申請時，填寫好測試數據（比如(rú)：測試賬号密碼等）
複制代碼

第四步：将體驗版提交審核

注意事項：

? 1. 一定要确保體驗版所有功能完好

第五步： 等待審核

注意事項：

1. 沒有勾選加速審核，一般審核時間周期為1~2天左右
2. 除了緊急上線的版本勾選下(xià)加速，因為一年隻有三次機會
3. 若點了加速審核，審核失敗。在12個(gè)小時内可(kě)重新修改完成以上步驟重新提交審核會被有限審核
複制代碼

第六步：提交發布

注意事項：

1. 審核完畢，點擊提交發布，管理員掃碼确認
2. 若提交成功，差不多半個(gè)小時左右即可(kě)發布
複制代碼

額外知識點：

1. 可(kě)在小程序後台“用戶反饋”那裡看到用戶反饋的問(wèn)題，開發者對着做相應的修改
2. 可(kě)在小程序後台“開發”裡配置測試、線上等服務器(qì)域名
3. 當小程序評測達标後，會有2小時極速審核的獎勵（這個(gè)就很棒了）
4. 可(kě)在小程序後台添加“客服”功能
5. ...
複制代碼

支付寶小程序端

申請公司企業(yè)級支付寶小程序賬号

1. 第一步：打開 支付寶平台，選擇賬号密碼登錄下(xià)方的免費注冊 進行小程序賬号注冊
2. 登錄注冊時填寫的郵箱，點擊鍊接激活小程序
3. 具體不細說了，賬号申請都是需要填寫什麼就填寫什麼，按照步驟來即可(kě)申請成功。

如(rú)果要發體驗版本的話，建議點擊工具狀态欄上的發行，選擇支付寶小程序，再上傳到支付寶後台。這樣子(zǐ)打包體積會小一點！

上線發布流程

第一步：使用 HBuiderX 進行打包，此時會自動(dòng)打開“小程序開發者工具”

第二步：點擊“小程序開發者工具”，右上角“上傳”

第三步：打開，登錄 “支付寶開放平台”

第四步：将本地提交的版本設置為體驗版測試無誤後提交審核

第五步： 等待審核

第六步：提交發布

注意點：

1. 配置應用公鑰私鑰、支付寶公鑰給後台同事
2. 調起支付寶支付的 `orderInfo` 參數
3. 幾個(gè)組件支付寶端要單獨寫，像顯示輸入密碼框 `<input password />`
4. ...
複制代碼

總結：整體流程和(hé)微信小程序類似~

H5端

申請公司企業(yè)級微信公衆号（注意：申請服務号，不然做不了微信支付）

• 申請公衆号賬号按照步驟來，等待即可(kě)
• 有些參數可(kě)以要後台同事添加到重定向地址欄上；像 openId等
• 授權獲取用戶信息，重要字段：openId 、 unionId等

上線發布流程

第一步：使用 HBuiderX 進行打包，填寫網址标題和(hé)域名

第二步：将打包好的 build -> h5文(wén)件夾上傳到服務器(qì)上

注意點：

1. `H5` 端會存在跨域問(wèn)題，配置不對導緻接口調不通(tōng)
2. `JS-SDK` 的使用，像掃一掃、登錄、分享等等
3. `H5` 端支付 -> `window`下(xià)面的 `WeixinJSBridge`
4. `H5` 端打包提交過大
5. 移動(dòng)端如(rú)何查看日志 `vConsole`
6. ....
複制代碼

溫馨提示：

1. `http-server` 開啟本地服務器(qì)
2. `natapp` 内網穿透，将本地域名映射到外網
3. `Xshell` 、`Xftp`這兩款軟件很方便将本地資(zī)源放到服務器(qì)上
複制代碼

Android端

申請安卓證書

1. 确保電腦按照了Java環境
2. 生成簽名證書

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

-alias test: 表示證書的别名
-keyalg RSA: 采用 RSA 算法
-validity 36500: 證書的有效天數
keystore test.keystore: 生成的證書文(wén)件
輸入完上面這條命令後，回車(chē)，要求輸入一些信息，輸入即可(kě)
複制代碼

注意: 使用管理員的 cmd 窗口

申請各大發布平台

常見的安卓發布市場有：小米、華為、vivo、oppo等！各大平台申請操作類似

上線發布流程

第一步：使用 HBuiderX 進行雲打包

第二步：填寫申請的證書密鑰、profile文(wén)件、密鑰證書等信息

第三步：等待一會，複制下(xià)載地址下(xià)載即可(kě)

第四步：填寫好安卓應用市場應用的基本信息上傳 apk 包

第五步：提交審核、等待審核結果

第六步：應用上架

注意點：

1. 安卓 微信支付 需要在 微信開放平台 創建移動(dòng)應用獲取 appId
2. 安卓 支付寶支付 需要在 支付寶開放平台 創建移動(dòng)應用獲取 appId
3. 不要經常雲打包，需要測試第三方打包測試的話，可(kě)采用 自定義基座 打包
4. 真機調試 和(hé) 本地 安卓模拟器(qì)如(rú)何打 log
5. 安卓各種尺寸圖标
6. 安卓端離(lí)線打包（Android Studio）
7. ...

溫馨提示：

1. 安卓模拟器(qì)采用 - 雷電模拟器(qì)

IOS端

申請蘋果開發者賬号

蘋果賬号類型分為：個(gè)人、公司、企業(yè)。我們申請企業(yè)的賬号就行~

1. 注冊 蘋果賬号apple id
2. 開啟雙重認證，需在一台 IOS 手機 iPad 操作
3. 在App Store下(xià)載Apple Developer APP 進行注冊開發者賬号
4. 去Apple Developer應用填寫申請資(zī)料
5. 綁定支付寶或者微信支付蘋果年費（￥688元/年）

申請iOS證書(.p12)和(hé)描述文(wén)件(.mobileprovision)

步驟如(rú)下(xià)：

1. 生成證書請求文(wén)件
2. 申請開發（Development）證書和(hé)描述文(wén)件
3. 申請發布（Production）證書和(hé)描述文(wén)件

申請步驟詳情可(kě)參考官網教程：申請iOS證書(.p12)和(hé)描述文(wén)件(.mobileprovision)

注意：發布證書打包的 ipa 文(wén)件，不可(kě)以直接安裝到手機上

上線發布流程

App Store 上架步驟流程： 兼容檢查 -> 賬号申請 -> 證書申請 -> 發布準備 -> App Store 上架 -> 審核後續

第一步：使用 HBuiderX 進行雲打包

第二步：填寫申請的證書密鑰、profile文(wén)件、密鑰證書等信息

第三步：等待一會，複制下(xià)載地址下(xià)載即可(kě)

第四步：填寫好 App store connect 的基本信息上傳 .ipa 包

步驟如(rú)下(xià)：

1. [應用商(shāng)店](https://appstoreconnect.apple.com/apps) 創建 `App`
2. 填寫 `APP` 各項審核信息
3. 上傳 `.ipa` 包至 `App Store Connect` 中(zhōng)
複制代碼

第五步：提交審核、等待審核結果

第六步：應用上架

若配置文(wén)件都生成好，蘋果和(hé)安卓的發布流程差不多，隻是填寫的配置文(wén)件不一樣而已！

注意點：

1. 蘋果 微信支付 需要在 微信開放平台 創建移動(dòng)應用獲取 appId
2. 蘋果 支付寶支付 需要在 支付寶開放平台 創建移動(dòng)應用獲取 appId
3. 不要經常雲打包，需要測試第三方打包測試的話，可(kě)采用 自定義基座 打包
4. 真機調試 和(hé) 如(rú)何将 .ipa 文(wén)件安卓到蘋果真機上以及 如(rú)何将本地的 .ipa 文(wén)件上傳到 蘋果後台
5. 蘋果各種尺寸圖标
6. IOS 端離(lí)線打包（ XCode ）

溫馨提示：

1. Cydia Impactor 工具 安裝 .ipa 文(wén)件到蘋果真機上
2. Transfer 工具 将線上正式 .ipa 包上傳到 App Store Connect 中(zhōng)

擴展

• 封裝多端統一的彈框
• 封裝多端統一的支付 【重要】
• 封裝 uni.request 請求
• 封裝公共組件和(hé)抽離(lí)公共樣式
• 等等...

插件

• UI組件庫 uView
• 顔色組件庫 ColorUI
• 支付寶授權與支付 支付寶授權登錄
• 答題模闆 模闆地址
• 圖表 uCharts

總結

通(tōng)過這整個(gè)了解，相信小夥伴們對uni-app開發項目的整體流程基本清楚了。當掌握好流程，熟練Vue框架的各種用法，即可(kě)在公司單挑一個(gè)項目并完成所有平台的工作。