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.
En plus des modifications, un certain nombre de nouveaux composants couramment utilisés sur les téléphones mobiles ont été ajoutés
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!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
