Was ist der Unterschied zwischen Uniapp und Vue?

Unterschied: Uniapp verwendet die Tags des Miniprogramms und Vue verwendet die Tags der Webseite. Darüber hinaus wurden eine Reihe neuer Komponenten hinzugefügt, die häufig auf der mobilen Seite verwendet werden. Die API von Uniapp bezieht sich auf das Applet und unterscheidet sich daher von der browserseitigen API. Uni unterstützt Vue-Router nicht und verwendet ein eigenes Routing.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1 und Vue2.9.6-Version, Thinkpad T480-Computer.

Der Unterschied zwischen Uniapp und Vue

Änderungen in Komponenten/Beschriftungen

Früher waren es HTML-Tags, aber jetzt sind es Mini-Programm-Tags.

• p wurde in „Ansicht“ geändert
• span, Schriftart in Text geändert
• a in „Navigator“ geändert
• img in „Bild“ geändert
• Eingabe ist immer noch vorhanden, aber das Typattribut wurde in „Bestätigungstyp“ geändert Radio, Label, Textbereich, Leinwand, Video
diese sind noch da.
• 
  select wurde in Picker geändert.
• iframe wurde in Web-Ansicht geändert sind auch Es kann in Uni-App verwendet werden. Der Uni-App-Compiler konvertiert während der Kompilierung alte Tags in neue Tags, kompiliert beispielsweise p in die Ansicht. Diese Verwendung wird jedoch nicht empfohlen, da sie beim Debuggen der H5-Seite leicht zu Verwirrung führen kann.
• Zusätzlich zu den Änderungen wurden eine Reihe neuer Komponenten hinzugefügt, die üblicherweise auf Mobiltelefonen verwendet werden
• Rich-Text-Rich-Text (kann JS nicht ausführen, kann aber verschiedene Textformate und Bilder rendern)
  

Fortschrittsbalken

Schieberegler-Schieberegler-Anzeige

Schalter-Auswahlschalter

Kamera Kamera

Live-Player Live-Übertragung

Karte Karte

Cover-View Ein Ansichtscontainer, der native Komponenten abdecken kann

Cover-View muss mit ein paar Worten hervorgehoben werden, das Nicht-H5-Endvideo der Uni -app, Map, Canvas und Textarea sind native Komponenten und haben eine höhere Ebene als andere Komponenten. Wenn Sie native Komponenten abdecken müssen, z. B. das Hinzufügen einer Maske zur Karte, müssen Sie die Cover-View-Komponente verwenden. Zusätzlich zu den integrierten Komponenten gibt es auch viele Open-Source-Erweiterungskomponenten, die allgemeine Vorgänge kapseln hat einen Plug-in-Markt eingerichtet, um diese Erweiterungskomponenten einzubeziehen. Einzelheiten finden Sie im Plug-in-Markt.

• js-Änderungen sind in drei Teile unterteilt: Änderungen der Betriebsumgebung, Änderungen des Datenbindungsmodus und API-Änderungen.

• Die Laufumgebung wechselt vom Browser zur v8-Engine

• Standard-JS-Syntax und API werden unterstützt, z. B. if, for, settimeout, indexOf usw.

Allerdings sind die browserspezifischen Fenster-, Dokument-, Navigator- und Standortobjekte, einschließlich Cookies und anderer Speicher, nur im Browser verfügbar und werden von Apps und Applets nicht unterstützt.
• Manche Leute denken vielleicht, dass js im Browser gleich js ist. Tatsächlich wird js von der ECMAScript-Organisation verwaltet. Das js im Browser ist die w3c-Organisation, die spezielle Objekte wie Fenster, Dokument, Navigator und Speicherort basierend auf der js-Spezifikation ergänzt.

An jedem Ende der Uni-App, mit Ausnahme des h5-Endes, laufen die JS an anderen Enden unter einer unabhängigen v8-Engine, nicht im Browser, sodass die Browserobjekte nicht verwendet werden können. Wenn Sie schon einmal kleine Programme entwickelt haben, sollten Sie das sehr gut wissen.
• Das bedeutet, dass viele HTML-Bibliotheken, die auf Dokumenten basieren, wie z. B. jqurey, nicht verwendet werden können.

Natürlich unterstützen Apps und Miniprogramme Webansichtskomponenten, die Standard-HTML laden können. Solche Seiten unterstützen weiterhin browserspezifische Objekte Fenster, Dokument, Navigator und Standort.

Der vorherige Dom-Betrieb wurde in den MVVM-Modus von Vue geändert.

Der aktuelle Front-End-Trend besteht darin, den Dom zu dedomisieren und in den MVVM-Modus zu wechseln. Dies ist eine prägnantere Schreibmethode, wodurch die Anzahl der Zeilen erheblich reduziert wird Code, und gleichzeitig ist die differenzielle Rendering-Leistung besser.

uni-app verwendet die Datenbindungsmethode von vue, um das Problem der Interaktion zwischen js und der Dom-Schnittstelle zu lösen.

• Wenn Sie den Anzeigeinhalt eines bestimmten Dom-Elements ändern möchten, z. B. den Anzeigetext einer Ansicht:

In der Vergangenheit wurde die ID für die Ansicht festgelegt und dann wurde das Dom-Element über den Selektor in abgerufen js, und die Zuweisungsoperation wurde weiter über js ausgeführt, um das dom-Attribut oder den dom-Wert zu ändern.

Das Folgende zeigt einen Codeabschnitt und eine Schaltfläche auf der Seite. Durch Klicken auf die Schaltfläche wird der Wert des Textbereichs geändert. Der aktuelle Ansatz besteht darin, das Dom-Element im Bindungsmodus von Vue zu binden .js-Variable, ändern Sie den Wert der js-Variablen im Skript, der Dom ändert sich automatisch und die Seite wird automatisch aktualisiert und gerendert

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

Wenn Sie die Datenbindung von Miniprogrammen gelernt haben, aber Vue nicht verstehen, bitte Achten Sie auf:

Miniprogramme Die Datenbindung bezieht sich auf Vue, aber ich habe einige geändert. In der Uni-App wird nur das Standard-Vue unterstützt, und die Datenbindungssyntax des Miniprogramms wird nicht unterstützt

SetData im Miniprogramm ist in der Uni-App nicht vorhanden, da Vue automatisch eine bidirektionale Datenbindung ist . Ändern Sie die Daten direkt durch Zuweisung. Wenn die Daten an die Schnittstelle gebunden sind, wird die Schnittstelle automatisch aktualisiert und gerendert.

• Da sich die API von uni-app auf das Miniprogramm bezieht, Es unterscheidet sich vom Browser. Es gibt viele Unterschiede in der js-API, wie zum Beispiel

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

如果你熟悉小程序开发的话，对比变化如下：

• 原来app.json被一拆为二。页面管理，被挪入了uni-app的pages.json；非页面管理，挪入了manifest.json

• 原来的app.js和app.wxss被合并到了app.vue中

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Uniapp und Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!