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.

• p Change to view
• span, font to text
• a Change to navigator
• img Change to image
• input is still there, but the type attribute has been changed to confirmtype
• form, button, checkbox, radio, label, textarea, canvas, video
  are still there.
• select Change to picker
• iframe Change to web-view
• ul and li are gone, use view instead
• audio is no longer recommended, Change to api mode, background audio api document
  In fact, old HTML tags can also be used in uni-app. The uni-app compiler will convert the old tags into new tags during compilation, such as compiling p into view. However, this usage is not recommended, as it can easily cause confusion when debugging the H5 end.

In addition to changes, a number of new components commonly used on mobile phones have been added

• scroll-view regional scroll view container

• swiper Swipeable area view container

• icon icon

• rich-text rich text (non-executable js , but can render various text formats and images)

• progress progress bar

• slider slider indicator

• switch switch selector

• camera camera

• live-player live broadcast

• map map

• cover-view A view container that can cover native components

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事件监听概念改为了生命周期概念。

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

• 原来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!