uni-app: 使用Vue.js需要注意哪些問題？

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

uni-app 在發布到 H5 時，是支持所有 vue 的語法的。但是發布到App或者小程序時，由于各個平臺等限制，無法實現全部 vue 語法，本文將詳細講解差異。

相比Web平臺， Vue.js 在 uni-app 中使用差異主要集中在兩個方面：

新增：uni-app除了支持Vue實例的生命周期，還支持應用啟動、頁面顯示等生命周期

受限：相比web平臺，在小程序和App端部分功能受限，具體見下。

生命周期

uni-app 在支持完整 Vue 實例的生命周期上，同時還新增應用生命周期及頁面生命周期。

應用生命周期包括下列函數

1、onLaunch當uni-app 初始化完成時觸發（全局只觸發一次）

2、onShow當 uni-app 啟動，或從后臺進入前臺顯示

3、onHide當 uni-app 從前臺進入后臺

4、onUniNViewMessage對 nvue 頁面發送的數據進行監聽

注意

（1）、應用生命周期僅可在App.vue中監聽，在其它頁面監聽無效。

（2）、onlaunch里進行頁面跳轉，可能遇白屏報錯，可以去官方查找解決方案。

頁面生命周期

注意

（1）、onTabItemTap常用于點擊當前tabitem，滾動或刷新當前頁面。如果是點擊不同的tabitem，一定會觸發頁面切換。

（2）、如果想在App端實現點擊某個tabitem不跳轉頁面，不能使用onTabItemTap，可以使用plus.nativeObj.view放一個區塊蓋住原先的tabitem，并攔截點擊事件。

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

語法支持

支持的 vue 語法

1、支持過濾器 filter

2、支持比較復雜的 JavaScript 渲染表達式

3、支持在 template 內使用 methods 中的函數

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

5、支持 v-slot 新語法

6、支持解構插槽 Prop 設置默認值

7、支持 slot 后備內容

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

不支持的 vue 語法

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

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

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

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

列表渲染

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

2、在非H5平臺循環對象時不支持第三個參數，如 v-for="(value, name, index) in object" 中，index 參數是不支持的。

事件處理

幾乎全支持事件處理器

// 事件映射表，左側為 WEB 事件，右側為 ``uni-app`` 對應事件
{
 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 進行事件綁定。

2、事件修飾符

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

.prevent 僅在 H5 平臺支持

.self：僅在 H5 平臺支持

.once：僅在 H5 平臺支持

.capture：僅在 H5 平臺支持

.passive：僅在 H5 平臺支持

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

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

4、按鍵修飾符：uni-app運行在手機端，沒有鍵盤事件，所以不支持按鍵修飾符。

命名限制

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

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

除以上列表中的名稱外，標準的 HTML 及 SVG 標簽名也不能作為組件名。

其他疑難雜癥

1、如何獲取上個頁面傳遞的數據

在 onLoad 里得到，onLoad 的參數是其他頁面打開當前頁面所傳遞的數據。

2、如何捕獲 app 的 onError

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

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

3、組件屬性設置不生效解決辦法

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

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

（1）、監聽scroll事件，記錄組件內部變化的值，在設置新值之前先設置為記錄的當前值

<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）、監聽scroll事件，獲取組件內部變化的值，實時更新其綁定值

<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>

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

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

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

時做移動開發很少接觸css，最近在寫uni-app要用到css所以少不了學習這方面的知識。

今天的筆記也是一些基礎知識，關于盒子模型當中的一些比較不錯的屬性，也是常用屬性。

在 CSS 盒子模型的默認定義里，你對一個元素所設置的 width 與 height 只會應用到這個元素的內容區。如果這個元素有任何的 border 或 padding ，繪制到屏幕上時的盒子寬度和高度會加上設置的邊框和內邊距值。這意味著當你調整一個元素的寬度和高度時需要時刻注意到這個元素的邊框和內邊距。當我們實現響應式布局時，這個特點尤其煩人。

box-sizing 兩個取值如下:

content-box 是默認值。如果你設置一個元素的寬為100px，那么這個元素的內容區會有100px 寬，并且任何邊框和內邊距的寬度都會被增加到最后繪制出來的元素寬度中。
border-box 告訴瀏覽器：你想要設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px，那么這100px會包含它的border和padding，內容區的實際寬度是width減去(border + padding)的值。大多數情況下，這使得我們更容易地設定一個元素的寬高。

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

上面代碼對呀的效果如下：

發環境

1、Android Studio下載地址：https://developer.android.google.cn/studio/index.html

2、HBuilderX（開發工具，地址https://www.dcloud.io/hbuilderx.html）

3、App離線SDK下載：最新android平臺SDK下載

（https://nativesupport.dcloud.net.cn/AppDocs/download/android）

注意：HBuilderX版本要跟SDK版本一致。

SDK目錄說明

    |-- HBuilder-Hello                App離線打包演示應用
    |-- HBuilder-Integrate-AS         集成uni-app或5+ app的最簡示例
    |-- SDK                           SDK庫文件目錄
    |-- Feature-Android.xls           Android平臺各擴展Feature API對應的詳細配置
    |-- readme                        版本說明文件及注意事項
    |-- UniPlugin-Hello-AS            uni原生插件開發示例

準備工程

1、安裝android Studio并解壓SDK下載包；

2、運行android studio，選擇導入項目HBuilder-Hello；

3、導入項目后，按提示安裝所需即可；安裝完成后，項目會重新rebuild，等待結束，運行項目到測試機，可以看到傳感器，音頻，二維碼等應用示例；

4、打開 HBuilderX 寫好的項目，點擊發行 > 原生app-本地打包 > 生成本地打包資源，打包完成后，HBuilderX 控制臺會輸出打包信息和打包路徑；

5、打開 android studio 切換項目到project目錄，依次打開 HBuilder-Hello > app > src > main > assets，能看到 apps.HelloH5.www 和 data 兩個文件夾；

6、刪除 android studio 的 apps 文件夾內容后，將 HBuilderX 剛才打包路徑下的 resources 文件夾內容替換；

7、復制 www > manifest.json 中的id，替換 data > dcloud_control.xml 中的 appid；

8、點擊運行項目，如果運行后測試機所顯示的內容和HBuilderX項目中所展示一致，則表示替換成功；

補充一些打包過程遇到問題的解決方法：

1）運行APP提示“當前運行環境無法運行啟用“自定義組件模式”的uni-app引用”，只需要在“app-libs”引入文件“ uniapp-release.aar”（該文件在SDK下載包的路徑“SDK\libs”下）即可解決）；

2）報錯“Entry name 'assets/SDK_Default_Route_Texture_Gray_Arrow.png' collided”，刪除文件“HBuilder-Hello\app\build”下的所有數據，重新生成就沒問題；

3）uniApp引入“vconsole.min.js”會導致打包運行后，只顯示底部菜單，內容區域顯示空白；

4）工程增加package.json，并執行“npm install”后，打包App運行后會導致引用組件的頁面無法跳轉；

5）uniapp調用接口使用了Promise，打包App運行后會導致打開調用接口的頁面一直加載中。

發布版本

1、android studio > build > Generate Signed Bundle / APK，創建新的 jks文件或選擇原有jks，一路下一步，直至完成；

2、把文件app-debug.apk發送到手機，安裝并使用。

在線咨詢

上一篇：學了HTML5將來能做什么？薪資水平如何？
下一篇：小科普 - 用“Stylus”讓你的網頁更加好看！什么是CSS？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商