如今前端領(lǐng)域技術(shù)五花八門，隨之的技術(shù)框架也越來越多，暗示著前端開發(fā)需要學(xué)習(xí)了解技術(shù)越來越廣。今天我們來聊聊跨平臺框架之 Uni-App。

這里筆者就不把 Uni-App 來拿和其他跨平臺框架進(jìn)行對比了，直接分析一下若使用 Uni-App 開發(fā)一個應(yīng)用。不過，筆者希望有興趣的小伙伴也了解學(xué)習(xí)下其他跨平臺框架（像Taro、Weex、RN、Flutter等），畢竟技多不壓身嘛~ 

前言

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

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

uni-app 非常簡單，只需會上面兩種技術(shù)就完全可以獨(dú)立負(fù)責(zé)一個項目的所有前端工作

項目初始化工作

創(chuàng)建項目

• 方式一：命令行

  注意：確保電腦安裝了Vue環(huán)境
  vue create -p dcloudio/uni-preset-vue my-project
  復(fù)制代碼

• 方式二：HBuilderX 可視化界面

項目前期準(zhǔn)備

• 規(guī)劃好項目目錄結(jié)構(gòu)
  1. components - 存放項目公共的組件
  2. pages - 存放項目的業(yè)務(wù)組件
  3. static - 存放靜態(tài)資源
  4. common - 存放一些公共的 css、js 和請求封裝等
  5. store - 存放項目中需要共享的狀態(tài)
  6. ...
• 在 manifest.json 中配置好各個平臺的系統(tǒng)配置

運(yùn)行軟件&開發(fā)工具安裝

• 代碼編寫軟件：HBuilder X
• 微信小程序運(yùn)行軟件：微信開發(fā)者工具
• 支付寶小程序運(yùn)行軟件：支付寶開發(fā)者工具
• H5 運(yùn)行環(huán)境：瀏覽器
• Android 運(yùn)行軟件：安卓模擬器（推薦大家windows平臺使用“雷電模擬器”）
• IOS 運(yùn)行軟件：蘋果模擬器
• ...

如何運(yùn)行各端

傻瓜式運(yùn)行?。?！點(diǎn)擊HBbuilderX工具上的頂部工具欄，點(diǎn)擊 運(yùn)行，選中自己想要的那個平臺即可。

微信小程序端

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

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

微信小程序的版本

• 開發(fā)版
• 體驗版
• 線上版

如果要發(fā)體驗版本的話，建議點(diǎn)擊工具狀態(tài)欄上的 發(fā)行，選擇微信小程序，再上傳到微信后臺。這樣子打包體積會小一點(diǎn)！

上線發(fā)布流程

第一步：使用 HBuiderX 進(jìn)行打包，此時會自動打開“微信開發(fā)者工具”

注意事項：

  1. 確保代碼是完整的最新的
  2. 檢查接口域名地址是否是線上環(huán)境域名
  3. 去掉本地項目里無用的代碼
  4. 確定小程序 `appId` 是否正確
復(fù)制代碼

第二步：點(diǎn)擊“微信開發(fā)者工具”，右上角“上傳”

注意事項：

1. 上傳的內(nèi)容不得超過2M（需優(yōu)化代碼，減少本地資料，采用網(wǎng)絡(luò)地址）
2. 填寫上傳的版本信息（**注意：**上傳的當(dāng)前的版本號要比上一次版本號大）
復(fù)制代碼

第三步：打開登錄微信公眾平臺

注意事項：

1. 上一步操作完成后，可在“版本管理” -> “開發(fā)版本”中設(shè)置為體驗版
2. 體驗版在體驗時，若域名和上一次的體驗版有修改，先刪除上一版，重新掃碼即可（防止數(shù)據(jù)不對）
3. 提交申請前，確保小程序內(nèi)的所有內(nèi)容已經(jīng)在服務(wù)類目中有體現(xiàn)
4. 提交申請時，填寫好測試數(shù)據(jù)（比如：測試賬號密碼等）
復(fù)制代碼

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

注意事項：

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

第五步： 等待審核

注意事項：

1. 沒有勾選加速審核，一般審核時間周期為1~2天左右
2. 除了緊急上線的版本勾選下加速，因為一年只有三次機(jī)會
3. 若點(diǎn)了加速審核，審核失敗。在12個小時內(nèi)可重新修改完成以上步驟重新提交審核會被有限審核
復(fù)制代碼

第六步：提交發(fā)布

注意事項：

1. 審核完畢，點(diǎn)擊提交發(fā)布，管理員掃碼確認(rèn)
2. 若提交成功，差不多半個小時左右即可發(fā)布
復(fù)制代碼

額外知識點(diǎn)：

1. 可在小程序后臺“用戶反饋”那里看到用戶反饋的問題，開發(fā)者對著做相應(yīng)的修改
2. 可在小程序后臺“開發(fā)”里配置測試、線上等服務(wù)器域名
3. 當(dāng)小程序評測達(dá)標(biāo)后，會有2小時極速審核的獎勵（這個就很棒了）
4. 可在小程序后臺添加“客服”功能
5. ...
復(fù)制代碼

支付寶小程序端

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

1. 第一步：打開 支付寶平臺，選擇賬號密碼登錄下方的免費(fèi)注冊 進(jìn)行小程序賬號注冊
2. 登錄注冊時填寫的郵箱，點(diǎn)擊鏈接激活小程序
3. 具體不細(xì)說了，賬號申請都是需要填寫什么就填寫什么，按照步驟來即可申請成功。

如果要發(fā)體驗版本的話，建議點(diǎn)擊工具狀態(tài)欄上的發(fā)行，選擇支付寶小程序，再上傳到支付寶后臺。這樣子打包體積會小一點(diǎn)！

上線發(fā)布流程

第一步：使用 HBuiderX 進(jìn)行打包，此時會自動打開“小程序開發(fā)者工具”

第二步：點(diǎn)擊“小程序開發(fā)者工具”，右上角“上傳”

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

第四步：將本地提交的版本設(shè)置為體驗版測試無誤后提交審核

第五步： 等待審核

第六步：提交發(fā)布

注意點(diǎn)：

1. 配置應(yīng)用公鑰私鑰、支付寶公鑰給后臺同事
2. 調(diào)起支付寶支付的 `orderInfo` 參數(shù)
3. 幾個組件支付寶端要單獨(dú)寫，像顯示輸入密碼框 `<input password />`
4. ...
復(fù)制代碼

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

H5端

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

• 申請公眾號賬號按照步驟來，等待即可
• 有些參數(shù)可以要后臺同事添加到重定向地址欄上；像 openId等
• 授權(quán)獲取用戶信息，重要字段：openId 、 unionId等

上線發(fā)布流程

第一步：使用 HBuiderX 進(jìn)行打包，填寫網(wǎng)址標(biāo)題和域名

第二步：將打包好的 build -> h5文件夾上傳到服務(wù)器上

注意點(diǎn)：

1. `H5` 端會存在跨域問題，配置不對導(dǎo)致接口調(diào)不通
2. `JS-SDK` 的使用，像掃一掃、登錄、分享等等
3. `H5` 端支付 -> `window`下面的 `WeixinJSBridge`
4. `H5` 端打包提交過大
5. 移動端如何查看日志 `vConsole`
6. ....
復(fù)制代碼

溫馨提示：

1. `http-server` 開啟本地服務(wù)器
2. `natapp` 內(nèi)網(wǎng)穿透，將本地域名映射到外網(wǎng)
3. `Xshell` 、`Xftp`這兩款軟件很方便將本地資源放到服務(wù)器上
復(fù)制代碼

Android端

申請安卓證書

1. 確保電腦按照了Java環(huán)境
2. 生成簽名證書

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

-alias test: 表示證書的別名
-keyalg RSA: 采用 RSA 算法
-validity 36500: 證書的有效天數(shù)
keystore test.keystore: 生成的證書文件
輸入完上面這條命令后，回車，要求輸入一些信息，輸入即可
復(fù)制代碼

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

申請各大發(fā)布平臺

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

上線發(fā)布流程

第一步：使用 HBuiderX 進(jìn)行云打包

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

第三步：等待一會，復(fù)制下載地址下載即可

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

第五步：提交審核、等待審核結(jié)果

第六步：應(yīng)用上架

注意點(diǎn)：

1. 安卓 微信支付 需要在 微信開放平臺 創(chuàng)建移動應(yīng)用獲取 appId
2. 安卓 支付寶支付 需要在 支付寶開放平臺 創(chuàng)建移動應(yīng)用獲取 appId
3. 不要經(jīng)常云打包，需要測試第三方打包測試的話，可采用 自定義基座 打包
4. 真機(jī)調(diào)試 和 本地 安卓模擬器如何打 log
5. 安卓各種尺寸圖標(biāo)
6. 安卓端離線打包（Android Studio）
7. ...

溫馨提示：

1. 安卓模擬器采用 - 雷電模擬器

IOS端

申請?zhí)O果開發(fā)者賬號

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

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

申請iOS證書(.p12)和描述文件(.mobileprovision)

步驟如下：

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

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

注意：發(fā)布證書打包的 ipa 文件，不可以直接安裝到手機(jī)上

上線發(fā)布流程

App Store 上架步驟流程： 兼容檢查 -> 賬號申請 -> 證書申請 -> 發(fā)布準(zhǔn)備 -> App Store 上架 -> 審核后續(xù)

第一步：使用 HBuiderX 進(jìn)行云打包

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

第三步：等待一會，復(fù)制下載地址下載即可

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

步驟如下：

1. [應(yīng)用商店](https://appstoreconnect.apple.com/apps) 創(chuàng)建 `App`
2. 填寫 `APP` 各項審核信息
3. 上傳 `.ipa` 包至 `App Store Connect` 中
復(fù)制代碼

第五步：提交審核、等待審核結(jié)果

第六步：應(yīng)用上架

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

注意點(diǎn)：

1. 蘋果 微信支付 需要在 微信開放平臺 創(chuàng)建移動應(yīng)用獲取 appId
2. 蘋果 支付寶支付 需要在 支付寶開放平臺 創(chuàng)建移動應(yīng)用獲取 appId
3. 不要經(jīng)常云打包，需要測試第三方打包測試的話，可采用 自定義基座 打包
4. 真機(jī)調(diào)試 和 如何將 .ipa 文件安卓到蘋果真機(jī)上以及 如何將本地的 .ipa 文件上傳到 蘋果后臺
5. 蘋果各種尺寸圖標(biāo)
6. IOS 端離線打包（ XCode ）

溫馨提示：

1. Cydia Impactor 工具 安裝 .ipa 文件到蘋果真機(jī)上
2. Transfer 工具 將線上正式 .ipa 包上傳到 App Store Connect 中

擴(kuò)展

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

插件

• UI組件庫 uView
• 顏色組件庫 ColorUI
• 支付寶授權(quán)與支付 支付寶授權(quán)登錄
• 答題模板 模板地址
• 圖表 uCharts

總結(jié)

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