最近在給f做一些工具app，學習了不少關於uniapp編寫android應用的知識。
首先，App應用的建立的時候要選擇專案型別為uniapp型別。最開始我選擇的是h5+專案，這種專案就比較容易寫成純js的專案，利用一些html5plus能力，或者使用mui來編寫手機app。
我調研了一下，uniapp和h5+（mui為代表）的差異和優缺點如下所示。
| 技術型別 | 優點 | 缺點 |
|---|---|---|
| uniapp | 可以使用unipp封裝的元件和api，有海量的外掛可以從外掛市場中找到。相容多端，也可以用html5plus的api能力。可以複用小程式專案的邏輯程式碼，對團隊的技術積累有好處。 | 需要學習vue語法，可能效能沒有mui的優化效果好。 |
| H5+ | 也可以跨端生成多種應用，但是不能使用uniapp的元件、外掛以及api中涉及h5的能力。其中mui號稱可以達到原生應用級別的效能和互動效果。 | 侷限於原生js以及依賴庫的編寫方式。無法統一和小程式專案的技術棧和程式設計方式，無法服用程式碼。 |
我首先嚐試了一下h5+的mui專案，發現寫起來很原始，因為大部分能力都是mui的js庫提供的，寫法完全和uniapp專案不同，很多uniapp封裝的元件和api都不能直接使用。為了長遠考慮，如果以後還要生成ios的app，mui技術未必適合。
再加上之前的小程式端也是uniapp型別專案，有很多基礎庫和方法是可以借鑑的，所以最終選擇使用uniapp型別的專案來開發f端的app。
不得不說uniapp來開發跨端的應用是非常方便的，同一套程式碼除了平臺特性的程式碼不能直接在其他平臺上用，大部分通用的能力和程式碼是可以複用的。
tab上的定義還是在pages.json裡面的tabBar定義，圖片資源的目錄結構也可以參考之前的專案。
然後就是一些功能開發了，其中uuid的獲取方式和小程式不通，原始app的獲取uuid（裝置的唯一標識）的api在html5plus上也有對應的api，獲取方式如下所示。
const uuid = plus.device.uuid;
值得一提的是html5plus裡面提供了非常多好用的html5新特性，包括藍芽（Bluetooth）、AD（廣告聯盟模組）、裝置麥克風（Audio）、二維碼（BarCode）、裝置的攝像頭（Camera）、裝置資訊（Device）、系統相簿（Gallery）等。上面獲取uuid的方法就屬於管理裝置資訊的API之一。國內有專門的HTML5產業聯盟，相關API可以從這裡跳轉。
由於我是開發的andorid app，所以在除錯的時候也會使用到android studio，關於除錯的方法我會單獨寫一篇文章來講述，這裡不展開說。大部分時候我們都有2種選擇，要麼使用AVD（虛擬裝置）來除錯app，要麼連線真實手機進行除錯（假設你有android系統的手機）。
除錯的過程會遇到一些坑（後面寫專題單獨講），但是最終我們是可以開發出較為滿意的app，通過hbuilder可以打包成需要的apk。
這種開發模式非常流暢，適合創業團隊或者全棧技術人，一套程式碼生成多端，開發效率非常高。測試程式碼也可以複用之前的，uniapp專案的自動化測試都是類似的，對測試團隊也是非常友好。
效能方面，由於是小範圍使用，資料量不是很大，體驗上和原生app差別不大。對於資源也能預載入，這方面我還沒有深入瞭解，但是提供了相關api，不用太擔心lazy load的問題。