uni-app 入坑指南

如今使用 uni-app 來開發的人愈來愈多。是否是許多同窗，準備入坑 uni-app，卻無從下手？文檔內容太多，不知道怎麼看？ 若是有此疑問， 那麼我將帶你從零開始入坑 uni-app。

快速瞭解 uni-app

什麼是 uni-app

1. uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺。 詳情點擊 uni-app 官方文檔
2. uni-app在跨端數量、擴展能力、性能體驗、周邊生態、學習成本、開發成本等6大關鍵指標上擁有極強的競爭優點：

• 跨端數量更多
• 平臺能力不受限
• 性能體驗更優秀
• 周邊生態豐富
• 學習成本低
• 開發成本低

使用 uni-app 的前置條件

不要認爲 uni-app 能夠跨多端，就感受開發難度會直線上升。若是說，你開發太小程序，剛好又會 vue， 那麼你的學習成本會很是的低。

若是你原生小程序與 vue 都沒有接觸過的話，我建議你花一些時間，看一看他們的官方文檔。再回來學習 uni-app。

• 微信小程序
• VUE

開發 App 端的話，對於原生開發瞭解便可，不須要你有不少的原生開發經驗。

爲了更好的跨端開發， 參考 uni-app 統一規範：

• 頁面組件咱們要遵循Vue 單文件組件 (SFC) 規範
• 組件標籤靠近微信小程序規範
• 接口能力（JS API）靠近微信小程序規範
• 數據綁定及事件處理靠近 Vue.js 規範，同時補充了App及頁面的生命週期
• 爲兼容多端運行，建議使用flex佈局進行開發

開發工具

使用官方推出的 HBuilderX 編輯器
可視化的方式比較簡單，HBuilderX 內置相關環境，開箱即用，無需配置node 。點擊下載

使用Vue.js

幾乎全支持 Vue官方文檔：模板語法

小程序（微信、支付寶、百度、頭條）

若是要開發小程序，咱們須要知道不一樣平臺下的小程序規範的 。規範瞭解以後，咱們開發起來就相對來講比較簡單一些。 uni-app 幫咱們把不一樣平臺的小程序 API 幾乎都封裝了 ，只須要將前綴替換爲 uni 便可 舉例說明：

咱們調用微信小程序的 request 請求

wx.request({
    url: 'https://www.example.com/request', //僅爲示例，並不是真實接口地址 
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定義請求頭信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

複製代碼

咱們使用 uni-app 的 request 請求

uni.request({
    url: 'https://www.example.com/request', //僅爲示例，並不是真實接口地址 
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定義請求頭信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

複製代碼

有沒有發現什麼不同的？因此除了前綴 wx 替換爲uni以外，其餘與原規範機會保持一致。uni-app 會最大程度的抹平不一樣小程序平臺之間的差別。

App（ios、安卓）

uni-app 在 App 端不只可使用絕大多數的小程序相關的 API，同時也可使用 5+API 很好的補足了小程序上一些尚未實現的功能。相關閱讀

同時，App 端內置 weex 引擎，提供了原生渲染能力。讓你 App 性能更好。相關閱讀

H5

h5 基本上跟常規 vue 開發沒有什麼區別， 惟一須要注意的是，有些 API 是不能在 h5 中使用，注意文檔中標註的平臺差別說明。

如何實現跨端

雖然說是跨端，可是確定是有狀況是不支持的，好比遇到有些平臺特有的 API 怎麼辦 ？

不用擔憂，這些問題 uni-app 都爲你想到了，那就是使用條件編譯。

條件編譯

詳細文檔點我 在 C 語言中，經過 #ifdef、#ifndef 的方式，爲 windows、mac 等不一樣 os 編譯不一樣的代碼 uni-app 參考這個思路，爲 uni-app 提供了條件編譯手段，在一個工程裏優雅的完成了平臺個性化實現 。

條件編譯是利用註釋實現的，在不一樣語法裏註釋寫法不同，js使用 // 註釋、css 使用 /* 註釋 */、vue/nvue 模板裏使用 <!-- 註釋 -->。

舉個例子:

// #ifdef %PLATFORM%
平臺特有的API實現
// #endif


// #ifndef H5
// 表示只有 h5 不使用這個 api
uni.createAnimation(OBJECT)
// #endif

複製代碼

<!-- #ifdef %PLATFORM% -->
平臺特有的組件
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<!-- 只在小程序中生效 -->
<view>我是微信小程序</view>
<!-- #endif -->

<!-- #ifdef APP-PLUS -->
<!-- 只在 app 中生效 -->
<view>我是 app </view>
<!-- #endif -->

複製代碼

/*  #ifdef  %PLATFORM%  */
平臺特有樣式
/*  #endif  */

/* #ifdef  MP-WEIXIN */
/*  只在小程序中生效  */
.header {
	color:red
}
/*  #endif  */

/*  #ifdef  APP-PLUS  */
/*  只在 app 中生效  */
.header {
	color:blue
}
<!--  #endif  */


複製代碼

注意事項

• 非 H5 端，不能使用瀏覽器自帶對象，好比 document、window、localstorage、cookie 等，更不能使用 jquery 等依賴這些瀏覽器對象的框架。由於各家小程序快應用都不支持這些對象。沒有這些瀏覽器自帶對象並不影響業務開發，uni 提供的 api 足夠完成業務。
• uni-app 的 tag 同小程序的 tag，和 HTML 的 tag 不同，好比 div 要改爲 view，span 要改爲 text、a 要改爲 navigator。

---

感謝您的觀看，看到這裏若是您以爲沒用，那麼您大概浪費了2分鐘的時間，對不起您，對您表示歉意。

您對於 uni-app 有任何疑問，歡迎評論回覆，我看到的話，會第一時間回覆你，感謝。

Tips ： 請理性對待，能夠不喜歡，可是不要噴。問題能夠討論，可是對噴子零容忍。