uniapp和vue的差別是什麼-前端問答-PHP中文網

區別：uniapp使用小程式的標籤，vue使用web端的標籤；除此之外，還新增了一批手機端常用的新元件。 uniapp的api是參考小程式的，因而與瀏覽器端的api有所不同。 uni不支援vue-router，使用自帶的路由。

uniapp和vue的差別是什麼

本教學操作環境：windows7系統、uni-app2.5.1&&vue2.9.6版本、thinkpad t480電腦。

uniapp和vue的區別

#元件/標籤的變化

##以前是html標籤，現在是小程式標籤。

span、font 改成text
a 改成navigator
img 改成image
#input 還在，但type屬性改成了confirmtype
form、button、checkbox、radio、label、textarea、canvas、video
這些還在。
iframe 改成web-view
ul、li沒有了，都用view取代
audio 不再推薦使用，改成api方式，背景音訊api文檔
其實舊的HTML標籤也可以在uni-app裡使用，uni-app編譯器會在編譯時把老標籤轉為新標籤，例如把p編譯成view。但不推薦這種用法，調試H5端時容易混亂。

除了改變外，新增了一批手機端常用的新元件

##slider 滑桿指示器

camera相機

#live-player 直播

map 地圖

cover-view 可覆寫原生元件的視圖容器

#cover-view需要多強調幾句，uni-app的非h5端的video、map、canvas、textarea是原生元件，層級高於其他元件。如需覆蓋原生元件，例如在map上加個遮罩，則需要使用cover-view元件

除了內建元件，還有很多開源的擴充元件，把常用操作都進行封裝，DCloud建立了外掛程式市場收錄這些擴充元件，詳見插件市場

js的變化

js的變化，分為運行環境變化、資料綁定模式變化、api變化3部分。

運行環境從瀏覽器變成v8引擎

#標準js語法和api都支持，例如if、for、settimeout、indexOf等。

但瀏覽器專用的window、document、navigator、location對象，包括cookie等存儲，只有在瀏覽器中才有，app和小程式都不支援。

可能有些人以為js等於瀏覽器裡的js。其實js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基於js規範補充了window、document、navigator、location等專用物件。

在uni-app的各個端中，除了h5端，其他端的js都運行在一個獨立的v8引擎下，不是在瀏覽器中，所以瀏覽器的物件無法使用。如果你做過小程式開發，對此應當很了解。

這意味著依賴document的許多HTML的函式庫，例如jqurey無法使用。

當然app和小程式支援web-view元件，裡面可以載入標準HTML，這種頁面仍然支援瀏覽器專用物件window、document、navigator、location。

以前的dom操作，改成vue的MVVM模式

現在前端趨勢是去dom化，改用mvvm模式，更簡潔的寫法，大幅減少程式碼行數，同時差量渲染效能更好。

uni-app使用vue的資料綁定方式解決js和dom介面互動的問題。

如果你想改變某個dom元素的顯示內容，例如一個view的顯示文字：

以前是給view設id，然後js裡透過選擇器取得dom元素，進一步透過js進行賦值操作，修改dom元素的屬性或值。

如下示範了一段程式碼，頁面中有個顯示的文字區和一個按鈕，點擊按鈕後會修改文字區的值

<html>  
   <head>  
       <script type="text/javascript">  
           document.addEventListener("DOMContentLoaded",function () {  
               document.getElementById("spana").innerText="456"  
            })  
           function changetextvalue () {  
               document.getElementById("spana").innerText="789"  
            }  
       </script>  
   </head>  
   <body>  
       <span id="spana">123</span>  
       <button type="button" onclick="changetextvalue()">修改为789</button>  
   </body>  
</html>

登入後複製

現在的做法，是vue的綁定模式，給這個dom元素綁定一個js變量，在script中修改js變量的值，dom會自動變化，頁面會自動更新渲染

<template>  
   <view>  
       <text>{{textvalue}}</text><!-- 这里演示了组件值的绑定 -->  
       <button :type="buttontype" @click="changetextvalue()">修改为789</button><!-- 这里演示了属性和事件的绑定 -->  
   </view>  
</template>  
<script>  
   export default {  
        data() {  
           return {  
               textvalue:"123",  
               buttontype:"primary"  
            };  
        },  
        onLoad() {  
           this.textvalue="456"//这里修改textvalue的值，其实123都来不及显示就变成了456  
        },  
       methods: {  
            changetextvalue() {  
               this.textvalue="789"//这里修改textvalue的值，页面自动刷新为789  
            }  
        }  
    }  
</script>

登入後複製

如果你學過小程式的資料綁定，但不了解vue，要注意：

小程式的資料綁定參考了vue，但自己修改了一些。在uni-app中只支援標準的vue，不支援小程式的資料綁定語法

小程式裡的setData在uni-app裡並不存在，因為vue就是自動雙向資料綁定的。直接透過賦值方式修改數據，如果資料綁定到介面上，介面會自動更新渲染
js api的變化

# #因為uni-app的api是參考小程式的，所以和瀏覽器的js api有很多不同，例如

alert,confirm 改成 uni.showmodel
ajax 改成 uni.request
cookie、session 没有了，local.storage 改成 uni.storage

uni-app的js api还有很多，但基本就是小程序的api，把wx.xxx改为uni.xxx即可。

uni-app在不同的端，支持条件编译，无限制的使用各端独有的api，

css的变化

标准的css基本都是支持的。

选择器有2个变化：*选择器不支持；元素选择器里没有body，改为了page。微信小程序即是如此。

page{  
}

登入後複製

单位方面，px无法动态适应不同宽度的屏幕，rem无法用于nvue/weex。如果想使用根据屏幕宽度自适应的单位，推荐使用rpx，全端支持。尺寸单位文档

uni-app推荐使用flex布局，并默认就是flex布局，这个布局思路和传统流式布局有点区别。但flex的有趣在于，不管是什么技术都支持这种排版，web、小程序/快应用、weex/rn、原生的iOS、Android开发，全都支持flex。它是通吃所有端的新一代布局方案。相关教程请自行百度学习。

uni-app的vue文件里支持所有web排版方式，不管是流式还是flex。但nvue里，只支持flex，因为它在app端是使用原生排版引擎渲染的。

注意css里背景图和字体文件，尽量不要大于40k，因为会影响性能。在小程序端，如果要大于40k，需放到服务器侧远程引用或base64后引入，不能放到本地作为独立文件引用。

工程结构和页面管理

uni-app的工程结构有单独的要求

每个可显示的页面，都必须在 pages.json 中注册。如果你开发过小程序，那么pages.json类似app.json。如果你熟悉vue，这里没有vue的路由，都是在pages.json里管理。

原来工程的首页一般是index.html或default.html，是在web server里配的。而uni-app的首页，是在pages.json里配的，page节点下第一个页面就是首页。一般在/pages/xx的目录下。

app和小程序中，为了提升体验，页面提供了原生的导航栏和底部tabbar，注意这些配置是在pages.json中做，而不是在vue页面里创建，但点击事件的监听在显示的vue页面中做。

在vue中，以前的js事件监听概念改为了生命周期概念。

	当`uni-app` 初始化完成时触发（全局只触发一次）
onShow	当 `uni-app` 启动，或从后台进入前台显示
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发
onUniNViewMessage	对 `nvue` 页面发送的数据进行监听，
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（暂时只支持 CLI 创建的项目使用 CLI 工程，更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline）