uni-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"
• 使用分包優化，關於分包優化的說明