uniapp項目 uniapp反編譯？很多人不了解，今天各百科為大家?guī)硐嚓P(guān)內(nèi)容，下面小編為大家整理介紹。

點擊右上方紅色按鈕，關(guān)注“網(wǎng)絡(luò)秀”，讓你真正露臉。

前言

Uni-app在發(fā)布到H5時支持所有vue語法。但發(fā)布到App或小程序時，由于各種平臺的限制，無法實現(xiàn)所有的vue語法。本文將詳細(xì)解釋這些差異。

與Web平臺相比，在uni-app中使用Vue.js區(qū)別主要集中在兩個方面：

新增：uni-app不僅支持Vue實例的生命周期，還支持應(yīng)用啟動和頁面顯示的生命周期。

有限：相對于web平臺，小程序和App的功能有限，如下圖。

生命周期

Uni-app不僅支持完整Vue實例的生命周期，還增加了應(yīng)用生命周期和頁面生命周期。

應(yīng)用程序生命周期包括以下功能

1.當(dāng)uni-app初始化完成時觸發(fā)onLaunch(僅全局觸發(fā)一次)

2.onShow當(dāng)uni-app啟動，或者從后臺進(jìn)入前臺顯示時。

3.當(dāng)uni-app從前臺進(jìn)入后臺時onHide

4.onUniNViewMessage監(jiān)控nvue頁面發(fā)送的數(shù)據(jù)。

注意

(1)應(yīng)用生命周期只能在App.vue中監(jiān)控，其他頁面無法監(jiān)控。

(2)在onlaunch跳轉(zhuǎn)到頁面的話去官網(wǎng)找解決方案，可能會遇到白屏錯誤。

頁面生命周期

注意

(1) onTabItemTap常用于點擊當(dāng)前選項卡，滾動或刷新當(dāng)前頁面。如果你點擊一個不同的標(biāo)簽，它肯定會觸發(fā)頁面切換。

(2)如果想在App端點擊一個tabititem而不跳轉(zhuǎn)到頁面，又不能使用onTabItemTap，可以使用plus.nativeObj.view放一個塊覆蓋原來的tabititem，攔截點擊事件。

(3) onTabItemTap在App端，從HBuilderx1.9的自定義組件編譯模式支持。

語法支持

支持的 vue 語法

1.支持過濾器過濾器

2.支持復(fù)雜的JavaScript渲染表達(dá)式。

3.支持在模板內(nèi)的方法中使用函數(shù)。

4.支持v-html(與富文本解析相同)

5.支持v-slot的新語法

6.支持解構(gòu)槽道具設(shè)置默認(rèn)值。

7.支持插槽備份內(nèi)容

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

不支持的 vue 語法

1.類不支持綁定Obejct變量(字符串形式的綁定)

2.不支持事件修飾符：防止和被動(在App和applet平臺上，停止修飾符可以防止冒泡和默認(rèn)行為)

3.不支持渲染、內(nèi)嵌模板、X模板、保持活動和過渡。

4.不支持使用Vue.use注冊全局組件(在main.js中使用Vue.component引入)

列表渲染

1.H5平臺在使用v-for循環(huán)整數(shù)時和其他平臺有區(qū)別，比如v-for='(ite`m，index) in 10 '。在H5平臺中，該項目從1開始，而在其他平臺中，可以使用第二個參數(shù)索引來保持不變。

2.在非H5平臺上循環(huán)對象時不支持第三個參數(shù)，如V-for=' (value，name，index) in object '，也不支持index參數(shù)。

事件處理

幾乎完全支持事件處理程序。

/

/ 事件映射表，左側(cè)為 WEB 事件，右側(cè)為 ``uni-app`` 對應(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 或 @ 的方式綁定，請勿使用小程序端的bind 和 catch 進(jìn)行事件綁定。

2、事件修飾符

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

.prevent 僅在 H5 平臺支持

.self：僅在 H5 平臺支持

.once：僅在 H5 平臺支持

.capture：僅在 H5 平臺支持

.passive：僅在 H5 平臺支持

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

<view class="mask" @touchmove.stop.prevent="moveHandle"></view>4、按鍵修飾符：uni-app運行在手機(jī)端，沒有鍵盤事件，所以不支持按鍵修飾符。

　　

命名限制

在 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、如何獲取上個頁面?zhèn)鬟f的數(shù)據(jù)

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

2、如何捕獲 app 的 onError

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

export default { // 只有 app 才會有 onLaunch 的生命周期 onLaunch () { // ... }, // 捕獲 app error onError (err) { console.log(err) }}3、組件屬性設(shè)置不生效解決辦法

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

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

（1）、監(jiān)聽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)聽scroll事件，獲取組件內(nèi)部變化的值，實時更新其綁定值

<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>第二種解決方式在某些組件可能造成抖動，推薦第一種解決方式。

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

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