擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來(lái)

前言

uni-app 在發(fā)布到 H5 時(shí)，是支持所有 vue 的語(yǔ)法的。但是發(fā)布到App或者小程序時(shí)，由于各個(gè)平臺(tái)等限制，無(wú)法實(shí)現(xiàn)全部 vue 語(yǔ)法，本文將詳細(xì)講解差異。

相比Web平臺(tái)， Vue.js 在 uni-app 中使用差異主要集中在兩個(gè)方面：

新增：uni-app除了支持Vue實(shí)例的生命周期，還支持應(yīng)用啟動(dòng)、頁(yè)面顯示等生命周期

受限：相比web平臺(tái)，在小程序和App端部分功能受限，具體見(jiàn)下。

生命周期

uni-app 在支持完整 Vue 實(shí)例的生命周期上，同時(shí)還新增 應(yīng)用生命周期 及 頁(yè)面生命周期。

應(yīng)用生命周期包括下列函數(shù)

1、onLaunch當(dāng)uni-app 初始化完成時(shí)觸發(fā)（全局只觸發(fā)一次）

2、onShow當(dāng) uni-app 啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示

3、onHide當(dāng) uni-app 從前臺(tái)進(jìn)入后臺(tái)

4、onUniNViewMessage對(duì) nvue 頁(yè)面發(fā)送的數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)

注意

（1）、應(yīng)用生命周期僅可在App.vue中監(jiān)聽(tīng)，在其它頁(yè)面監(jiān)聽(tīng)無(wú)效。

（2）、onlaunch里進(jìn)行頁(yè)面跳轉(zhuǎn)，可能遇白屏報(bào)錯(cuò)，可以去官方查找解決方案。

頁(yè)面生命周期

注意

（1）、onTabItemTap常用于點(diǎn)擊當(dāng)前tabitem，滾動(dòng)或刷新當(dāng)前頁(yè)面。如果是點(diǎn)擊不同的tabitem，一定會(huì)觸發(fā)頁(yè)面切換。

（2）、如果想在App端實(shí)現(xiàn)點(diǎn)擊某個(gè)tabitem不跳轉(zhuǎn)頁(yè)面，不能使用onTabItemTap，可以使用plus.nativeObj.view放一個(gè)區(qū)塊蓋住原先的tabitem，并攔截點(diǎn)擊事件。

（3）、onTabItemTap在App端，從HBuilderX 1.9 的自定義組件編譯模式開(kāi)始支持。

語(yǔ)法支持

支持的 vue 語(yǔ)法

1、支持過(guò)濾器 filter

2、支持比較復(fù)雜的 JavaScript 渲染表達(dá)式

3、支持在 template 內(nèi)使用 methods 中的函數(shù)

4、支持 v-html （同 rich-text 的解析）

5、支持 v-slot 新語(yǔ)法

6、支持解構(gòu)插槽 Prop 設(shè)置默認(rèn)值

7、支持 slot 后備內(nèi)容

8、組件支持原生事件綁定，如：@tap.native

不支持的 vue 語(yǔ)法

1、class不支持綁定Obejct變量（使用字符串的形式綁定）

2、不支持事件修飾符：prevent、passive（在App與小程序平臺(tái)，使用stop修飾符，既可以阻止冒泡也能阻止默認(rèn)行為）

3、不支持render、inline-template、X-Templates、keep-alive、transition

4、不支持使用 Vue.use 的方式注冊(cè)全局組件（在main.js使用Vue.component的方式引入）

列表渲染

1、在H5平臺(tái) 使用 v-for 循環(huán)整數(shù)時(shí)和其他平臺(tái)存在差異，如 v-for="(ite`m, index) in 10" 中，在H5平臺(tái) item 從 1 開(kāi)始，其他平臺(tái) item 從 0 開(kāi)始，可使用第二個(gè)參數(shù) index 來(lái)保持一致。

2、在非H5平臺(tái) 循環(huán)對(duì)象時(shí)不支持第三個(gè)參數(shù)，如 v-for="(value, name, index) in object" 中，index 參數(shù)是不支持的。

事件處理

幾乎全支持 事件處理器

// 事件映射表，左側(cè)為 WEB 事件，右側(cè)為 ``uni-app`` 對(duì)應(yīng)事件
{
 click: 'tap',
 touchstart: 'touchstart',
 touchmove: 'touchmove',
 touchcancel: 'touchcancel',
 touchend: 'touchend',
 tap: 'tap',
 longtap: 'longtap',
 input: 'input',
 change: 'change',
 submit: 'submit',
 blur: 'blur',
 focus: 'focus',
 reset: 'reset',
 confirm: 'confirm',
 columnchange: 'columnchange',
 linechange: 'linechange',
 error: 'error',
 scrolltoupper: 'scrolltoupper',
 scrolltolower: 'scrolltolower',
 scroll: 'scroll'
}

注意：

1、為兼容各端，事件需使用 v-on 或 @ 的方式綁定，請(qǐng)勿使用小程序端的bind 和 catch 進(jìn)行事件綁定。

2、事件修飾符

.stop：各平臺(tái)均支持， 使用時(shí)會(huì)阻止事件冒泡，在非 H5 端同時(shí)也會(huì)阻止事件的默認(rèn)行為

.prevent 僅在 H5 平臺(tái)支持

.self：僅在 H5 平臺(tái)支持

.once：僅在 H5 平臺(tái)支持

.capture：僅在 H5 平臺(tái)支持

.passive：僅在 H5 平臺(tái)支持

3、若需要禁止蒙版下的頁(yè)面滾動(dòng)，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來(lái)處理 touchmove 的事件，也可以是一個(gè)空函數(shù)。

<view class="mask" @touchmove.stop.prevent="moveHandle"></view>

4、按鍵修飾符：uni-app運(yùn)行在手機(jī)端，沒(méi)有鍵盤(pán)事件，所以不支持按鍵修飾符。

命名限制

在 uni-app 中以下這些作為保留關(guān)鍵字，不可作為組件名。

a, canvas, cell, content, countdown, datepicker, div, element, embed, header, image, img, indicator, input, link, list, loading-indicator, loading, marquee, meta, refresh, richtext, script, scrollable, scroller, select, slider-neighbor, slider, slot, span, spinner, style, svg, switch, tabbar, tabheader, template, text, textarea, timepicker, trisition-group, trisition, video, view, web

除以上列表中的名稱外，標(biāo)準(zhǔn)的 HTML 及 SVG 標(biāo)簽名也不能作為組件名。

其他疑難雜癥

1、如何獲取上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)

在 onLoad 里得到，onLoad 的參數(shù)是其他頁(yè)面打開(kāi)當(dāng)前頁(yè)面所傳遞的數(shù)據(jù)。

2、如何捕獲 app 的 onError

由于 onError 并不是完整意義的生命周期，所以只提供一個(gè)捕獲錯(cuò)誤的方法，在 app 的根組件上添加名為 onError 的回調(diào)函數(shù)即可。如下：

export default {
 // 只有 app 才會(huì)有 onLaunch 的生命周期
 onLaunch () {
 // ...
 },
 // 捕獲 app error
 onError (err) {
 console.log(err)
 }
}

3、組件屬性設(shè)置不生效解決辦法

當(dāng)重復(fù)設(shè)置某些屬性為相同的值時(shí)，不會(huì)同步到view層。 例如：每次將scroll-view組件的scroll-top屬性值設(shè)置為0，只有第一次能順利返回頂部。 這和props的單向數(shù)據(jù)流特性有關(guān)，組件內(nèi)部scroll-top的實(shí)際值改動(dòng)后，其綁定的屬性并不會(huì)一同變化。

解決辦法有兩種（以scroll-view組件為例）：

（1）、監(jiān)聽(tīng)scroll事件，記錄組件內(nèi)部變化的值，在設(shè)置新值之前先設(shè)置為記錄的當(dāng)前值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
<script>
export default {
 data() {
 return {
 scrollTop: 0,
 old: {
 scrollTop: 0
 }
 }
 },
 methods: {
 scroll: function(e) {
 this.old.scrollTop = e.detail.scrollTop
 },
 goTop: function(e) {
 this.scrollTop = this.old.scrollTop
 this.$nextTick(function() {
 this.scrollTop = 0
 });
 }
 }
}
</script>

（2）、監(jiān)聽(tīng)scroll事件，獲取組件內(nèi)部變化的值，實(shí)時(shí)更新其綁定值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
<script>
export default {
 data() {
 return {
 scrollTop: 0,
 }
 },
 methods: {
 scroll: function(e) {
 this.scrollTop = e.detail.scrollTop
 },
 goTop: function(e) {
 this.scrollTop = 0
 }
 }
}
</script>

第二種解決方式在某些組件可能造成抖動(dòng)，推薦第一種解決方式。

喜歡小編或者覺(jué)得小編文章對(duì)你有幫助的，可以點(diǎn)擊一波關(guān)注哦！同時(shí)，要源碼的小伙伴可以點(diǎn)擊下方“了解更多”。

最后推薦一個(gè)專欄文章，感謝小伙伴們多多支持，謝謝大家！