uni-app 入坑指南

mehaotian發表於2019-02-22
APP

hello 小夥伴們，現在我已經正式入坑 uni-app 了。 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 的前置條件

好多小夥伴可能要問了:哇，一套程式碼可以編譯到那麼多平臺，那是不是我學習起來很麻煩啊，我只會vue啊，不會小程式，也不會原生開發，能不能學會uni-app呢。

這個問題問的就很棒，那麼如果要學會uni-app需要會那些技能呢？答：你如果會vue，基本上就可以解決大多數問題了。 多讀幾遍文件，你會發現開發起來很順暢 。

但是為了更好的跨端開發，我們肯定是要統一規範的：

  • 頁面元件我們要遵循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之外，其他的地方一摸一樣，是不是這樣開發起來就很一賊了呢 。

App（ios、安卓）

uni-app 不僅可以使用絕大多數的小程式相關的 API，同時也可以使用 5+API 很好的補足了小程式上一些還沒有實現的功能，是不是很美好？而且開發方式還是跟上述一樣，沒有變化，是不是更美好了呢。

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。
以上，所有內容（除了我自己說的話以外）都來自 [uni-app官方文件](https://uniapp.dcloud.io/README)，請注意多看文件，多看文件，多看文件。

ok，到這裡入坑基本完畢。下篇開始，講述如何使用 uni-app 從零開始開發一個完整的音樂應用，敬請期待（其實我正在準備，還沒開始寫呢，預計一兩個月寫完，雖然答應一些小夥伴幾個月以前就要出來的[手動捂臉]）

感謝您的觀看，看到這裡如果您覺得沒用，那麼您大概浪費了2分鐘的時間，對不起您，對您表示歉意。

相關文章