uni-app框架需求調研

• HBuilderX 版本 2.0.3 +
• uni-app 版本 2.2.3 +
• 可快速瀏覽每小節結論部分

1、熱更新（熱修復策略）

1. 環境 HBuilderX 1.6.5 +
2. 流程

• 更新版本號 在 manifest.json 中 1.0.0 => 1.0.1
• 打包 在 菜單 發行中 原生App-製做一動App資源升級包
• 存放資源包 將 %appid%.wgt 文件存放在服務器的 static 目錄下，即 www.example.com/static/UNI8…
• 服務端接口 www.example.com/update/ 傳入

參數名	類型	默認值	說明
name	String	''	客戶端讀取到的應用名稱，定義這個參數能夠方便多個應用複用接口。
version	String	''	客戶端讀取到的版本號信息

返回

參數名	類型	默認值	說明
update	Boolean	false	是否有更新
wgtUrl	String	''	wgt 包的下載地址，用於 wgt 方式更新。
pkgUrl	String	''	apk/ipa 包的下載地址或 AppStore 地址，用於整包升級的方式。

前端檢測

// #ifdef APP-PLUS 
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {  
    uni.request({  
        url: 'http://www.example.com/update/',  
        data: {  
            version: widgetInfo.version,  
            name: widgetInfo.name  
        },  
        success: (result) => {  
            var data = result.data;  
            if (data.update && data.wgtUrl) {  
                uni.downloadFile({  
                    url: data.wgtUrl,  
                    success: (downloadResult) => {  
                        if (downloadResult.statusCode === 200) {  
                            plus.runtime.install(downloadResult.tempFilePath, {  
                                force: false  
                            }, function() {  
                                console.log('install success...');  
                                plus.runtime.restart();  
                            }, function(e) {  
                                console.error('install fail...');  
                            });  
                        }  
                    }  
                });  
            }  
        }  
    });  
});  
// #endif
複製代碼

3. 不支持狀況

• SDK 部分有調整，好比新增了 Maps 模塊等，不可經過此方式升級，必須經過整包的方式升級。
• 若是是老的非自定義組件編譯模式，以前沒有 nvue 文件，但更新中新增了 nvue 文件，不能使用此方式。由於非自定義組件編譯模式若是沒有nvue文件是不會打包weex引擎進去的，原生引擎沒法動態添加。自定義組件模式默認就含着weex引擎，無論工程下有沒有nvue文件。
• 原生插件的增改，一樣不能使用此方式。

4. 注意事項

• plus.runtime.version 或者 uni.getSystemInfo() 讀取到的是 apk/ipa 包的版本號，而非 manifest.json 資源中的版本信息，因此這裏用 plus.runtime.getProperty() 來獲取相關信息。
• 條件編譯，僅在 App 平臺執行此升級邏輯。
• appid 以及版本信息等，在 HBuilderX 真機運行開發期間，均爲 HBuilder 這個應用的信息，所以須要打包自定義基座或正式包測試升級功能。
• 安裝 wgt 資源包成功後，必須執行 plus.runtime.restart()，不然新的內容並不會生效。
• 若是App的原生引擎不升級，只升級wgt包時須要注意測試wgt資源和原生基座的兼容性。平臺默認會對不匹配的版本進行提醒，若是自測沒問題，能夠在manifest中配置忽略提示，詳見https://ask.dcloud.net.cn/article/35627
• www.example.com 是一個僅用作示例說明的地址，實際應用中應該是真實的 IP 或有效域名，請勿直接複製粘貼使用。
• 上架審覈期間不要彈出熱更新提示
• 熱更新內容使用https下載，避免被三方網絡劫持
• 不要更新違法內容、不要經過熱更新破壞應用市場的利益，好比iOS的虛擬支付要老老實實給Apple分錢

5. 參考地址 參考文獻1 參考文獻2 參考文獻3 整包升級

熱更新結論

• uni-app中提供了熱更新解決方案，HBuilderX 1.6.5以上版本可打升級包
• 須要先後端配合，在代碼中實現便可
• 熱更新須要https下載更爲安全
• ios的支付官方建議老老實實給apple分錢，以防意外

2、socket

1. 解決方案

• 用Hello mui的im示例的前端代碼，後臺本身用socket.io搭一個服務器。
• 用Hello mui的im示例的前端代碼，與leancloud的服務器配合使用，含有個推推送。這裏有示例包和源碼：ask.dcloud.net.cn/article/381
• 使用環信環信的web sdk
• 使用融雲的web sdk，這裏有示例
• 使用5+sdk的方式，封裝一個環信或融雲等im廠商的原生sdk到js層，給本身的js用。社區裏有人發了本身集成後的代碼，你們也能夠驗證下。文檔參考
• 直接調起手機qq，進入qq羣或企業qq作交流或客服

2. websocket注意

• uni-app版本 2.2.6 + App平臺，2.2.6+起支持多個socket連接，數量沒有限制。但一個頁面仍是應該保持一個鏈接。 小程序端鏈接個數查閱官網
• 鏈接斷開問題 一段時間後自動斷開； 先後臺切換斷開； 離開頁面斷開；

socket結論

• uni-app中一樣使用websocket實現socket功能，鏈接的斷開重連控制可能會比較麻煩
• 第三方環信提供免費的即時通訊，可是併發、鏈接數大的可能須要企業版的應該要收費

3、http通信方式（是否經過原生中轉）

uni.request應該也是調用原生請求

4、app更新

整包升級

5、推送

• 官方使用指南
• App端 uni push 的API請使用 H5+API
• UniPush推送服務必須從新向DCloud申請開通帳戶
• 注意 unipush是推送成功率更高的解決方案，個推僅爲老項目兼容使用，BUT vivo目前僅對個別頭部開發者開放，有可能不支持 Uni-app 使用5+API注意事項

manifest.json->App 模塊權限配置->Push manifest.json->App SDK 配置->推送

推送結論

• uni-app提供兼容大多手機型號的一站式解決方案
• vivo品牌只對頭部開發者開放了，有可能不能支持

6、數據分析埋點（友盟等）

• uni-app版本 2.2.3+ 支持
• 只需按官方文檔加入自定義事件便可
• 可登錄uni統計後臺查看統計數據
• 其餘小程序各端分別有本身的統計後臺及api

結論

uni-app提供了完善的統計分析接口及後臺，按文檔接入便可

7、本地儲存

1. uni-app的Storage各端實現

• H5端爲localStorage，瀏覽器限制5M大小，是緩存概念，可能會被清理
• App端爲原生的plus.storage，無大小限制，不是緩存，持久化
• 各個小程序端查看官方文檔

2. 對vuex支持

• uni-app內置了vuex ，在app裏的使用，可參考hello-uniapp store/index.js
• vuex方式更加適合處理全局的而且值會發生變化的狀況，查看更全的全局變量管理方案
• .vue 和 .nvue 並非一個規範，所以一些在 .vue 中適用的方案並不適用於 .nvue。
• Vue 上掛載屬性，不能在 .nvue 中使用。
• .nvue 不支持 vuex
• 若是但願 .vue 和 .nvue 複用一些方法的話，須要採用公用模塊的方案，分別在 .vue 和 .nvue 文件中引入。

緩存結論

• uni-app提供storage實現，幷包含同步異步方法
• 對vuex全面支持，但與nvue通訊比較麻煩，若是不涉及原生渲染優化可不採用nvue
• 大量數據存儲可參考H5+API的SQLite及IO文件操做

8、上線打包流程

1. 所需資源

• appid 由 DCloud 雲端分配
• Android包名--自定義
• Andriod證書及密鑰，可用DCloud公用證書
• ios證書及證書密鑰
• 廣告、換量等是否須要加入
• 應用圖標 1024 * 1024
• 啓動圖 .9.png優化
• manifest.json中的版本號、sdk等設置

2. 流程

• 確認設置manifest.json 應用圖標、啓動圖、權限配置（Push、Payment、Shar、Statistic）等等
• 菜單-發行-原生app-雲打包，填寫相應資源打包便可
• 注意 雲打包不能打超過40M的包

3. 離線打包 離線打包說明 ios離線打包 andriod離線打包 andriod打包指南
4. 啓動圖分辨率要求

• Android 另需轉.9.png

分辨率	型號/版本	備註
480 * 762
720 * 1242
1080 * 1882

• Iphone

分辨率	型號/版本	備註
1242 * 2688	iphone XS Max、ios12+	/
2688 * 1242	iphone XS Max、ios12+	橫屏
828 * 1792	XR、ios12+	/
1792 * 828	XR、ios12+	橫屏
1125 * 2436	X/XS、	/
2436 * 1125	X/XS、	橫屏
1242 * 2208	6/7/8Plus	/
2208 * 1242	6/7/8Plus	橫屏
750 * 1334	6/7/8	/
1334 * 750	6/7/8	橫屏
640 * 1136	5/5s	/
1136 * 640	5/5s	橫屏
640 * 960	4/4s	/

結論

• 在HBuild中進行雲打包很容易，目前項目較小，雲打包便可知足要求
• 40M以上建議離線打包，須要相應的sdk，比較複雜
• 啓動圖須要ui配合，各個分辨率分別出圖

9、app前臺日誌記錄

目前還沒發現有好的解決方案 fundebug

• 利用統計事件，定義error事件存儲
• 寫入本地文件，要加入緩存清理、發送錯誤報告等功能
• 本身集成搭建日誌收集服務，成本和消耗較大
• fundebug日誌服務，需付費

10、支付流程（微信 支付寶）

• uni.requestPayment是一個統一各平臺的客戶端支付API，不論是在某家小程序仍是在App中，客戶端均使用本API調用。
• 各端支付demo可參看hello uni-app

app支付具體流程

• 流程：支付平臺功能申請 -> manifest.json 裏配置支付參數 -> uni-app 裏調用 API 進行支付

1. 支付寶App支付功能申請 登陸支付寶帳號，建立應用接入支付寶App支付能力，包括如下步驟：

• 建立應用（獲取appid）
• 開通App支付功能
• 配置密鑰（獲取公鑰、私鑰） 官方文檔

2. 微信App支付功能申請

• 到 微信開放平臺 申請移動應用並開通支付功能，申請應用後能夠獲取 AppID 和 AppSecret 值
• 應用接入 微信商戶平臺，選擇 App 支付
• 開通支付功能後可獲取支付業務服務器配置數據：PARTNER（財付通商戶號）、PARTNER_KEY（財付通密鑰）、PAYSIGNKEY（支付簽名密鑰）
• 須要將從微信開放平臺申請的appid，填回到 manifest-App SDK配置-支付-微信支付 中。打包後生效。 官方文檔

3. 微信App支付功能申請 使用蘋果開發者帳號登陸 App Store Connect，在應用的功能選項卡頁面，添加 App 內購項目。注意：

• 內購項目的各信息須要填寫完整，而後保存，此時內購項目的狀態應該是準備提交，當提交應用經過審覈後，狀態則變爲已批准
• 測試時，建議使用測試證書打一個自定義的 iOS 基座進行測試
• 在應用 TestFight 的選項卡添加 App Store Connect 用戶，測試支付時可使用此用戶賬號進行測試
• orderInfo 的 productid 是本身填寫的產品 ID
• 調用 uni.requestPayment 前必須先使用 5+Plus 的方法調用 requestOrder 獲取訂單信息，不然會致使沒法支付
• 更多可參考

4. manifest.json裏配置相關參數 配置相關參數，並開發代碼前端參考Hello uni-app
5. 注意 數字類產品（好比購買會員等不須要配送實物的商品），Apple規定必須使用蘋果IAP應用內支付，給Apple分紅30%。打包的時候不要勾選微信或支付寶等其餘支付方式。若是你提交的包裏包含了微信支付寶等支付的sdk，即便沒使用，Appstore也會認爲你有隱藏方式，之後會繞過iap，不給Apple分紅，所以拒絕你的App上線。雲打包時，manifest裏選上支付模塊，但sdk配置裏去掉微信支付和支付寶支付。不少開發者的Android版是包含微信和支付寶支付的，此時注意分開判斷。

支付結論

• H5普通瀏覽器平臺的支付，仍然是常規web作法。uni-app未封裝。
• 前端用官方統一支付接口，服務器開發，仍然須要看各個平臺自己的支付文檔
• ios應用內可能沒法繞開蘋果分紅

11、音視頻支持程度

• ios android通用格式 m4a/wav/mp3/aac
• 使用方法 官方api

12、字體支持程度 & 字體圖標 等

官方文檔

字體

1. 注意事項

• 動態加載網絡字體。文件地址需爲下載類型。
• 引入中文字體，體積過大時會發生錯誤，建議抽離出部分中文，減小體積，或者用圖片替代
• 字體連接必須是https
• 僅App端、微信小程序端支持
• 字體資源的地址，建議格式爲 TTF 和 WOFF，WOFF2 在低版本的iOS上會不兼容
• 字體連接必須是同源下的，或開啓了cors支持，微信小程序的域名是servicewechat.com
• canvas等原生組件不支持使用接口添加的字體
• 工具裏提示 Faild to load font能夠忽略

字體圖標

uni-app 支持使用字體圖標，使用方式與普通 web 項目相同

1. 注意

• 支持 base64 格式字體圖標。
• 支持網絡路徑字體圖標。
• 網絡路徑必須加協議頭 https
• 從 www.iconfont.cn 上拷貝的代碼，默認是沒加協議頭的。

2. uni-app 本地路徑圖標字體支持狀況

• 字體文件小於 40kb，uni-app 會自動將其轉化爲 base64 格式；
• 字體文件大於等於 40kb， 需開發者本身轉換，不然使用將不生效；

@font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }
複製代碼

結論

• 字體文件與字體圖標都支持，但據以往開發經驗不必定好使，須要驗證
• 引用地址須要https

十3、canvas及chart

canvas

• uni-app中封裝了canvasApi
• 目前大多屬性頭條小程序不支持
• 圖表、二維碼、海報（包含生成圖片保存）等均可以基於canvas製做，並有相應插件可用，但作的不是很好，可能須要定製化開發

chart

• 推薦使用基於canvas的uCharts插件，uni-app插件大賽一等獎

1. 爲何不用echarts

• 相比Echarts及F2的複雜的設置，本插件幾乎等於傻瓜式的配置。
• Echarts在跨端使用更復雜，本插件只須要簡單的兩個canvas標籤輕鬆區別搞定，代碼整潔易維護。
• Echarts在IOS端圖表顯示錯位，只能引用網頁解決。
• 本插件打包後的體積相比Echarts小不少不少，因此性能更好。
• 若是您是uni-app初學者，那麼強烈建議您使用uCharts，而且目前能夠跨全端通用，減小工做量，加強一致性體驗。
• 圖表樣式都可自定義，懂js的均可以讀懂插件源碼，直接修改u-charts.js源碼便可。
• 本插件通過大量測試，反覆論證並加以改造而成，請各位放心使用。

結論

• uni-app中較好的集成了canvas模塊，建議海報、二維碼、echart等功能須要多端兼容的，利用canvas實現
• 須要的知識儲備和初期實現成本稍高
• 知識儲備 uCharts改造 h5canvas學習

其餘說明

• 關於vue 與 nvue 若是你是web前端，不熟悉 weex，那麼建議你仍然以使用 vue 爲主，在App端某些 vue 表現不佳的場景下使用 nvue 做爲強化補充