Quelle est la différence entre uniapp et vue

Différence : uniapp utilise des mini-balises de programme, vue utilise des balises Web. De plus, un certain nombre de nouveaux composants couramment utilisés sur les téléphones mobiles ont été ajoutés. L'API d'uniapp fait référence à l'applet, elle est donc différente de l'API côté navigateur. uni ne prend pas en charge vue-router et utilise son propre routage.

L'environnement d'exploitation de ce tutoriel : système Windows7, version uni-app2.5.1&&vue2.9.6, ordinateur thinkpad t480.

La différence entre uniapp et vue

Changements dans les composants/étiquettes

Auparavant être des balises html, maintenant l'étiquette du mini-programme.

• p Changer pour afficher
• span, police Changer pour texte
• a Changer pour navigateur
• img Changer pour image
• L'entrée est toujours là, mais l'attribut type a été modifié pour confirmer que le type
• formulaire, bouton, case à cocher, radio, étiquette, zone de texte, canevas, vidéo
  sont toujours là.
• select modifié en sélecteur
• iframe remplacé par web-view
• ul et li ont disparu et sont remplacés par view
• l'audio n'est plus recommandé . Passer en mode API, document API audio en arrière-plan
  En fait, les anciennes balises HTML peuvent également être utilisées dans uni-app. Le compilateur uni-app convertira les anciennes balises en nouvelles balises lors de la compilation, comme la compilation de p dans la vue. Cependant, cette utilisation n'est pas recommandée, car elle peut facilement créer de la confusion lors du débogage de l'extrémité H5.

En plus des modifications, un certain nombre de nouveaux composants couramment utilisés sur les téléphones mobiles ont été ajoutés

• conteneur de vue défilante régionale à vue défilante

• conteneur de vue de zone coulissante par balayage

• icône icône

• texte riche texte enrichi (non- js exécutable, mais peut restituer divers formats de texte et d'images)

• barre de progression de progression

• indicateur de curseur de curseur

• sélecteur de commutateur

• caméra caméra

• diffusion en direct du joueur en direct

• map map

• cover-view Un conteneur de vue qui peut couvrir les composants natifs

cover-view doit être souligné quelques mots supplémentaires, le non-h5 fin de l'uni-app La vidéo, la carte, le canevas et la zone de texte sont des composants natifs et sont de niveau supérieur aux autres composants. Si vous devez couvrir des composants natifs, comme l'ajout d'un masque à la carte, vous devez utiliser le composant cover-view

En plus des composants intégrés, il existe de nombreux composants d'extension open source qui encapsulent les éléments communs Opérations. DCloud a établi Le marché des plug-ins comprend ces composants d'extension Pour plus de détails, voir le marché des plug-ins

Modifications JS

Les modifications JS sont divisées en opérations. changements d'environnement, changements de mode de liaison de données et changements d'API 3 parties.

• L'environnement d'exécution passe du navigateur au moteur v8

La syntaxe js standard et l'API sont prises en charge, par exemple si, pour, settimeout , indexOf, etc.

Cependant, les objets de fenêtre, de document, de navigateur et de localisation spécifiques au navigateur, y compris les cookies et autres stockages, ne sont disponibles que dans le navigateur et ne sont pas pris en charge par les applications et les applets.

Certaines personnes peuvent penser que js est égal à js dans le navigateur. En fait, js est géré par l'organisation ECMAScript. Le js dans le navigateur est l'organisation w3c qui complète les objets spéciaux tels que la fenêtre, le document, le navigateur et l'emplacement en fonction de la spécification js.

À chaque extrémité d'uni-app, à l'exception de l'extrémité h5, les js aux autres extrémités s'exécutent sous un moteur v8 indépendant, pas dans le navigateur, donc les objets du navigateur ne peuvent pas être utilisés. Si vous avez déjà développé de petits programmes, vous devriez le savoir très bien.

Cela signifie que de nombreuses bibliothèques HTML qui s'appuient sur des documents, telles que jqurey, ne peuvent pas être utilisées.

Bien sûr, les applications et les mini-programmes prennent en charge les composants d'affichage Web, qui peuvent charger du HTML standard. Ces pages prennent toujours en charge les objets spécifiques au navigateur, la fenêtre, le document, le navigateur et l'emplacement.

• L'opération dom précédente a été modifiée en mode MVVM de vue

La tendance actuelle du front-end est de dédomiser et de passer en mode mvvm , ce qui est plus concis. La méthode d'écriture réduit considérablement le nombre de lignes de code et en même temps, les performances de rendu différentiel sont meilleures.

uni-app utilise la méthode de liaison de données de vue pour résoudre le problème de l'interaction entre l'interface js et dom.

Si vous souhaitez modifier le contenu d'affichage d'un certain élément dom, tel que le texte d'affichage d'une vue :

Dans le passé, l'identifiant était défini pour la vue, puis le L'élément dom a été obtenu via le sélecteur dans js, et js ensuite passé effectue des opérations d'affectation et modifie les attributs ou les valeurs des éléments dom.

Ce qui suit montre un morceau de code. Il y a une zone de texte affichée et un bouton sur la page. Cliquer sur le bouton modifiera la valeur de la zone de texte

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

L'approche actuelle est la. mode de liaison de vue, liez une variable js à cet élément dom, modifiez la valeur de la variable js dans le script, le dom changera automatiquement et la page sera automatiquement mise à jour et rendue

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

Si vous avez appris la liaison de données des mini programmes, mais pas Pour comprendre vue, veuillez noter :

• La liaison de données de l'applet fait référence à vue, mais j'en ai modifié certaines. Seule la vue standard est prise en charge dans uni-app, et la syntaxe de liaison de données du mini-programme n'est pas prise en charge

• setData dans le mini-programme n'existe pas dans uni-app car vue est Liaison de données bidirectionnelle automatique. Modifiez les données directement via l'affectation. Si les données sont liées à l'interface, l'interface sera automatiquement mise à jour et restituera les

• Modifications dans l'API js
  

Comme l'API d'uni-app fait référence au mini-programme, elle est très différente de l'API JS du navigateur, comme

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!