Home >Web Front-end >Front-end Q&A >What is the difference between uniapp and vue
Difference: uniapp uses the tags of the mini program, and vue uses the tags of the web side; in addition, a number of new components commonly used on the mobile phone side have been added. The API of uniapp refers to the applet, so it is different from the browser-side API. uni does not support vue-router and uses its own routing.
The operating environment of this tutorial: windows7 system, uni-app2.5.1&&vue2.9.6 version, thinkpad t480 computer.
The difference between uniapp and vue
Changes in components/labels
It used to be html tags , now the mini program label.
In addition to changes, a number of new components commonly used on mobile phones have been added
cover-view needs to be emphasized a few more words, the non-h5 end of uni-app Video, map, canvas, and textarea are native components and are higher level than other components. If you need to cover native components, such as adding a mask to the map, you need to use the cover-view component
In addition to built-in components, there are many open source extension components that encapsulate common operations. DCloud has established The plug-in market includes these extension components. For details, see the plug-in market
Changes in js
Changes in js are divided into changes in the running environment, changes in data binding mode, and changes in api 3 parts.
The running environment changes from the browser to the v8 engine
Standard js syntax and API are supported, such as if, for, settimeout, indexOf, etc. .
But the browser-specific window, document, navigator, and location objects, including cookies and other storage, are only available in the browser, and are not supported by apps and applets.
Some people may think that js is equal to js in the browser. In fact, js is managed by the ECMAScript organization. The js in the browser is the w3c organization that supplements special objects such as window, document, navigator, and location based on the js specification.
In each end of uni-app, except for the h5 end, the js on other ends run under an independent v8 engine, not in the browser, so the browser objects cannot be used. If you have ever done small program development, you should know this very well.
This means that many HTML libraries that rely on document, such as jqurey, cannot be used.
Of course, apps and small programs support web-view components, which can load standard HTML. Such pages still support browser-specific objects window, document, navigator, and location.
The previous dom operation was changed to vue's MVVM mode
The current front-end trend is to de-domize and use mvvm mode instead, which is more concise The writing method greatly reduces the number of lines of code, and at the same time, the differential rendering performance is better.
uni-app uses vue's data binding method to solve the problem of interaction between js and dom interface.
If you want to change the display content of a certain dom element, such as the display text of a view:
In the past, the id was set to the view, and then the dom element was obtained through the selector in js, and further passed js performs assignment operations and modifies the attributes or values of dom elements.
The following demonstrates a piece of code. There is a displayed text area and a button on the page. After clicking the button, the value of the text area will be modified.
<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>The current approach is the binding mode of vue. , bind a js variable to this dom element, modify the value of the js variable in the script, the dom will automatically change, and the page will automatically update and render
<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>If you have learned the data binding of small programs, but not To understand vue, please note:
The data binding of the applet refers to vue, but I modified some by myself. Only standard vue is supported in uni-app, and the data binding syntax of the mini program is not supported
setData in the mini program does not exist in uni-app because vue is automatic Two-way data binding. Modify data directly through assignment. If the data is bound to the interface, the interface will automatically update and render
Changes in js api
Because the API of uni-app refers to the mini program, it is very different from the browser's JS API, such as
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中
更多编程相关知识，请访问：编程视频！！
The above is the detailed content of What is the difference between uniapp and vue. For more information, please follow other related articles on the PHP Chinese website!