uni-app開發注意事項

RopeHuo發表於2020-09-24
APP

關於vue

1、注意 如果使用老版的非自定義元件模式，即manifest中"usingComponents":false，部分模版語法不支援，但此模式已於2019年11月起下線。

2、data 必須宣告為返回一個初始資料物件的函式；否則頁面關閉時，資料不會自動銷燬，再次開啟該頁面時，會顯示上次資料。

3、class 支援的語法:

<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>

style 支援的語法:

<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>

4、非H5端不支援 Vue官方文件：Class 與 Style 繫結 中的 classObject 和 styleObject 語法。

5、注意：以:style=""這樣的方式設定px畫素值，其值為實際畫素，不會被編譯器轉換為相對單位。

此外還可以用 computed 方法生成 class 或者 style 字串，插入到頁面中

6、用在元件上非H5端暫不支援，在自定義元件上使用 Class 與 Style 繫結

7、如果列表中專案的位置會動態改變或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態（如 <input> 中的輸入內容，<switch> 的選中狀態），需要使用 :key 來指定列表中專案的唯一的識別符號。

:key 的值以兩種形式提供

  • 使用 v-for 迴圈 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字串或數字，且不能動態改變。
  • 使用 v-for 迴圈中 item 本身，這時需要 item 本身是一個唯一的字串或者數字

當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新建立，以確保使元件保持自身的狀態，並且提高列表渲染時的效率。

如不提供 :key，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。

8、在H5平臺 使用 v-for 迴圈整數時和其他平臺存在差異，如 v-for="(item, index) in 10" 中，在H5平臺 item 從 1 開始，其他平臺 item 從 0 開始，可使用第二個引數 index 來保持一致。

9、在非H5平臺 迴圈物件時不支援第三個引數，如 v-for="(value, name, index) in object" 中，index 引數是不支援的。

10、為相容各端，事件需使用 v-on 或 @ 的方式繫結，請勿使用小程式端的bind 和 catch 進行事件繫結。

11、事件修飾符

  • .stop：各平臺均支援， 使用時會阻止事件冒泡，在非 H5 端同時也會阻止事件的預設行為
  • .prevent 僅在 H5 平臺支援
  • .self：僅在 H5 平臺支援
  • .once：僅在 H5 平臺支援
  • .capture：僅在 H5 平臺支援
  • .passive：僅在 H5 平臺支援

12、若需要禁止蒙版下的頁面滾動，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來處理 touchmove 的事件，也可以是一個空函式。

13、H5 的select 標籤用 picker 元件進行代替

14、表單元素 radio 用 radio-group 元件進行代替

15、App端（vue頁面V3編譯模式）和H5端支援v-html，其他端不支援v-html。

16、uni-app只支援vue單檔案元件（.vue 元件）。其他的諸如：動態元件，自定義 render，和<script type="text/x-template"> 字串模版等，在非H5端不支援。

17、詳細的非H5端不支援列表：

  • Slot（scoped 暫時還沒做支援）
  • 動態元件
  • 非同步元件
  • inline-template
  • X-Templates
  • keep-alive
  • transition （可使用 animation 或 CSS 動畫替代）
  • 老的非自定義元件編譯模式不支援在元件引用時，在元件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class style 等樣式屬性(例：<card class="class-name"> </card> 樣式是不會生效的)。建議更新為自定義元件模式
  • 老的非自定義元件編譯模式元件裡使用 slot 巢狀的其他元件時不支援 v-for。建議更新為自定義元件模式

18、uni-app 內建了小程式的所有元件，比如： picker,map 等，需要注意的是原生元件上的事件繫結，需要以 vue 的事件繫結語法來繫結，如 bindchange="eventName" 事件，需要寫成 @change="eventName"

19、Vue.component 的第一個引數必須是靜態的字串。

20、nvue頁面暫不支援全域性元件

21、在百度小程式中使用時，不要在 data 內使用 hidden ，可能會導致渲染錯誤

22、由於 onError 並不是完整意義的生命週期，所以只提供一個捕獲錯誤的方法，在 app 的根元件上新增名為 onError 的回撥函式即可

23、當重複設定某些屬性為相同的值時，不會同步到view層。 例如：每次將scroll-view元件的scroll-top屬性值設定為0，只有第一次能順利返回頂部。 這和props的單向資料流特性有關，元件內部scroll-top的實際值改動後，其繫結的屬性並不會一同變化。，可以通過監聽scroll事件，記錄元件內部變化的值，在設定新值之前先設定為記錄的當前值

跨端開發注意事項

1、非H5端不支援*選擇器；

2、body的元素選擇器請改為page，同樣，div和ul和li等改為view、span和font改為text、a改為navigator、img改為image...

3、非H5端預設並未啟用 scoped，如需要隔離元件樣式可以在 style 標籤增加 scoped 屬性，H5端為了隔離頁面間的樣式預設啟用了 scoped

4、vue頁面在App端，預設是被系統的webview渲染的（不是手機自帶瀏覽器，是rom的webview），在較老的手機上，比如Android4.4、5.0或iOS8，很多css是不支援的，所以不要使用太新的css，會導致介面異常。

5、原生元件層級問題 H5沒有原生元件概念問題，非H5端有原生元件並引發了原生元件層級高於前端元件的概念，要遮擋video、map等原生元件，請使用cover-view元件。

6、使用了非H5端不支援的API 小程式和App的js執行在jscore下而不是瀏覽器裡，沒有瀏覽器專用的js物件，比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等物件。

7、不要在引用元件的地方在元件屬性上直接寫 style="xx"，要在元件內部寫樣式

8、url(//alicdn.net)等路徑，改為url(https://alicdn.net)，因為在App端//是file協議

9、v-html在h5和app-vue(v3編譯模式)均支援，但小程式不支援

10、在 uni-app 2.4.7 以前，H5端不支援微信小程式自定義元件，即wxcomponets下的元件，此時可能產生相容問題。從 2.4.7 起，H5也支援微信自定義元件，不再存在這這方面相容問題。

11、在微信小程式端，uni-app 將資料繫結功能委託給Vue，開發者需按Vue 2.0的寫法實現資料繫結，不支援微信小程式的資料繫結寫法，

12、非H5端，不能使用瀏覽器自帶物件，比如document、window、localstorage、cookie等，更不能使用jquery等依賴這些瀏覽器物件的框架。因為各家小程式快應用都不支援這些物件。

13、App端若要使用操作window、document的庫，需要通過renderjs來實現。

14、uni-app的tag同小程式的tag，和HTML的tag不一樣，比如div要改成view，span要改成text、a要改成navigator。

15、雖然大部分css樣式在微信小程式和app中都可以支援，但推薦使用flex佈局模型，這種佈局更靈活高效且支援更多平臺(比如nvue、快應用只支援flex佈局)

16、單位方面，uni-app預設為rpx。這是一種可跨端的通用單位

17、每個要顯示的頁面，都要放到pages目錄下，新建一個頁面所在的目錄，然後放同名目錄的vue檔案，比如project/pages/lista/lista.vue，並且在pages.json裡配置。這與小程式的策略相同。

18、自定義元件，放到component目錄

19、靜態資源如圖片，固定放到static目錄下。這是webpack、mpvue的規則

20、H5 校驗了更嚴格的 vue 語法，有些寫法不規範會報警，比如： data 後面寫物件會報警，必須寫 function；不能修改 props 的值；元件最外層 template 節點下不允許包含多個節點等。

21、APP 和小程式的導航欄和 tabbar 均是原生控制元件，元素區域座標是不包含原生導航欄和 tabbar 的；而 H5 裡導航欄和 tabbar 是 div 模擬實現的，所以元素座標會包含導航欄和tabbar的高度。為了優雅的解決多端高度定位問題，uni-app 新增了2個css變數：--window-top 和 --window-bottom，這代表了頁面的內容區域距離頂部和底部的距離。舉個例項，如果你想在原生tabbar 上方懸浮一個選單，之前寫 bottom:0。這樣的寫法編譯到 h5 後，這個選單會和 tabbar 重疊，位於螢幕底部。而改為使用 bottom:var(--window-bottom)，則不管在 app 下還是在h5下，這個選單都是懸浮在 tabbar 上浮的。這就避免了寫條件編譯程式碼。當然仍然也可以使用 H5 的條件編譯處理介面的不同。

22、CSS 內使用 vh 單位的時候注意 100vh 包含導航欄，使用時需要減去導航欄和 tabBar 高度，部分瀏覽器還包含瀏覽器操作欄高度，使用時請注意。

23、元件內（頁面除外）不支援 onLoad、onShow 等頁面生命週期。

24、為避免和內建元件衝突，自定義元件請加上字首（但不能是 u 和 uni）。比如可使用的自定義元件名稱：my-view、m-input、we-icon，例如不可使用的自定義元件名稱：u-view、uni-input，如果已有專案使用了可能造成衝突的名稱，請修改名稱，另外微信小程式下自定義元件名稱不能以 wx 開頭。

25、小程式工具提示vendor.js過大，已經跳過es6向es5轉換。這個轉換問題本身不用理會，因為vendor.js已經是es5的了。

關於體積控制，參考如下：

  • 使用執行時程式碼壓縮
    • HBuilderX建立的專案勾選執行-->執行到小程式模擬器-->執行時是否壓縮程式碼
    • cli建立的專案可以在pacakge.json中新增引數--minimize，示例："dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
  • 使用分包優化，關於分包優化的說明

相關文章