1.1 uni-app簡介

uni-app是一個全端開發框架，可以將開發的項目一次性編譯為Web、App、小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用。uni-app支持使用各種IDE（Integrated Development Environment，集成開發環境）進行開發，如Vscode、WebStorm，但與HBuilderX結合使用更完美。

1.1.1 uni-app的由來

很多人以為小程序是微信先推出的，其實DCloud才是這個行業的開創者。

DCloud于2012年開始研發小程序技術，優化WebView的功能和性能，并加入W3C和HTML5中國產業聯盟，推出了HBuilder開發工具，為后續產業化做準備。2015年，DCloud正式推出了自己的小程序，產品名為“流應用”，它不是B/S模式的輕應用，而是接近系統的原生功能、性能的動態App，并且即點即用，第一次使用時可以邊下載邊使用。為了推廣該技術，DCloud將技術標準捐獻給了工信部旗下的HTML5中國產業聯盟，并推進各家流量巨頭接入該標準，開展小程序業務。360手機助手率先接入該標準，在其3.4版本實現了應用的秒開運行，如圖1-1所示。

隨后DCloud推動大眾點評、攜程、京東、有道詞典、唯品會等眾多知名App所屬企業為流應用平臺提供應用。2015年9月，DCloud推動微信團隊開展小程序業務，演示了流應用的秒開應用、掃碼獲取應用、分享鏈接獲取應用等眾多場景案例，并分享了WebView體驗優化的經驗。微信團隊經過分析后，于2016年初決定上線小程序業務，但沒有接入聯盟標準，而是制定了自己的標準。

DCloud持續在業內推廣小程序理念，推動包括手機廠商在內的互聯網企業陸續上線類似小程序或快應用的業務。部分企業接入了聯盟標準，但更多企業因存在利益紛爭，標準難以統一。技術是純粹的，不應該因為商業利益而分裂。造成混亂的局面并非DCloud所愿，于是DCloud決定開發一個免費、開源的框架，為開發者抹平各平臺的差異，這就是uni-app的由來。鑄就uni-app成功的因素有以下幾點。

①經過多年的積累，截至2021年3月，DCloud擁有900萬個開發者。

②DCloud一直都有小程序的iOS、Android引擎，因此uni-app的App端和小程序端保持高度一致。

③DCloud在引擎上的持續投入，使得uni-app的App端功能、性能均優于大多數小程序引擎。

④DCloud非常了解各平臺的小程序，因此開發抹平各端差異的跨端框架比較輕松。

現在，uni-app已經是業內主流的應用開發框架，支撐著12億活躍手機用戶的龐大生態。

1.1.2 uni-app的特點

uni-app是一個使用Vue.js開發跨平臺應用的前端框架，可用于開發兼容多端的應用。開發者編寫Vue.js代碼，通過uni-app可以編譯到iOS、Android、微信小程序等多個平臺。uni-app主要有以下特點。

1. 更好的跨平臺能力

圖1-2所示為uni-app功能框架圖，可以看出，uni-app在跨平臺的過程中不犧牲平臺特色，而是結合了平臺專有特征，真正做到海納百川、各取所長。在跨平臺的同時，通過條件編譯+平臺特有API（Application Programming Interface，應用程序接口）調用，可以為某平臺編寫個性化代碼，調用專有特征而不影響其他平臺。uni-app支持原生代碼混寫和原生SDK（Software Development Kit，軟件開發工具包）集成。

2. 一套代碼可以在多個平臺運行

uni-app實現了一套代碼同時在多個平臺運行。圖1-3所示為一套代碼同時在iOS模擬器、Android模擬器、H5、微信開發者工具、支付寶小程序開發者工具、百度開發者工具、字節跳動開發者工具、QQ小程序開發者工具中運行的效果（底部8個終端選項卡代表8個終端模擬器）。

實際運行效果如圖1-4所示。

3. 運行體驗好，性能優秀

uni-app的組件、API與微信小程序一致，原生App端支持Weex原生渲染，加載新頁面速度更快，自動采用diff算法更新數據。其App端支持原生渲染，可提供更流暢的體驗；小程序端的性能優于市場上的其他框架。

4. 開放生態，周邊生態豐富

uni-app支持通過npm安裝第三方包，支持微信小程序自定義組件及SDK，兼容mpvue組件及項目，其App端支持和原生代碼混合編碼，插件市場有數千款插件。

5. 學習成本低，開發成本低

uni-app基于通用的前端技術棧，采用Vue語法+微信小程序API進行開發，無額外學習成本。除了開發成本，招聘、管理、測試等各方面成本也大幅下降。HBuilderX是uni-app的高效開發“神器”，熟練掌握HBuilderX后，開發效率可以翻倍（即便只開發一個平臺的程序，也可以大幅提高開發效率）。

1.1.3 uni-app的學習方法

了解了uni-app的由來和特點后，讀者可以結合自己的情況選擇不同的uni-app學習方法。

讀者可以通過uni-app官網了解uni-app。uni-app官方出品了《uni-app官方教程》（網址見“資源文件\網址索引.docx”），通過官方視頻教程可以直觀、快速地了解uni-app。

熟悉H5，但不熟悉Vue和小程序的讀者可以通過《白話uni-app》（網址見“資源文件\網址索引.docx”）快速了解uni-app和H5的差異。DCloud與Vue進行了合作，Vue.js官網中提供了免費視頻教程，方便用戶學習Vue（網址見“資源文件\網址索引.docx”）。uni-app使用的是Vue語法，而不是小程序自定義的語法，因此不需要用戶額外學習。

除了官方視頻教程，騰訊課堂、網易課堂、嗶哩嗶哩、慕課網等各大視頻學習網站也提供了一些uni-app的學習資源。第三方培訓機構視頻教程的網址見“資源文件\網址索引.docx”。

uni-app是一個跨平臺框架，各端的管理規則有一定的差異，如H5端的瀏覽器有跨域限制；微信小程序強制要求使用https鏈接，并且所有要聯網的服務器域名都要配置到微信的白名單中；iOS的隱私控制和虛擬支付控制非常嚴格； Android、國產ROM（Read Only Memory，只讀存儲器，這里為手機操作系統）的各種兼容性存在差異，且中國大部分地區的網絡不支持谷歌服務，這也導致了push、定位等功能開發不規范；如果使用第三方SDK實現定位、地圖、支付、推送等功能，需要遵循其規則和限制等。