uni-app開發注意事項

關于vue

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

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

3、class 支持的語法:

<view :>111</view>
<view  v-bind:>222</view>
<view  :>333</view>
<view  v-bind:>444</view>
<view  v-bind:>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 > </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"
• 使用分包優化，關于分包優化的說明

標籤：JavaScript

上一篇：輕輕松松學CSS:overflow

下一篇：uni-app開發注意事項