Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is the difference between vue and uni-app". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the difference between vue and uni-app".

The operating environment of this tutorial: windows7 system, uni-app2.5.1&&vue2.9.6 version, Dell G3 computer.

The difference between uniapp and vue

Uni-app can be compiled to (Toutiao, Alipay, Wechat, QQ, Baidu) Mini Program, Android, ios, H6. Through packaging to achieve a set of code to run multi-side; vue on web is created for single-page applications, on app, single-page applications will get stuck.

Uni-app also has automatic frame preloading, which loads pages faster.

Changes in components / labels

It used to be a html tag, now it's a Mini Program tag.

Change p to view

Change span and font to text

Change a to navigator

Change img to image

Input is still there, but the type property has been changed to confirmtype

Form 、 button 、 checkbox 、 radio 、 label 、 textarea 、 canvas 、 video

These are still here.

Change select to picker

Change iframe to web-view

Ul and li are gone, they are all replaced by view

Audio is no longer recommended, changed to api mode, background audio api document

In fact, the old HTML tag can also be used in uni-app, and the uni-app compiler will convert the old tag to the new tag at compile time, such as compiling p to view. However, this usage is not recommended, and it is easy to get confused when debugging H5.

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

Scroll-view regional scrollable view container

Swiper slidable area View Container

Icon icon

Rich-text rich text (js is not executable, but can render various text formats and pictures)

Progress progress bar

Slider slider indicator

Switch switch selector

Camera camera

Live broadcast on live-player

Map map

Cover-view overrides the view container of native components

Cover-view needs to emphasize that video, map, canvas and textarea on the non-h6 side of uni-app are native components at a higher level than other components. If you need to override native components, such as adding a mask to map, you need to use cover-view components

In addition to the built-in components, there are many open source extension components that encapsulate common operations. DCloud has established a plug-in market to include these extension components, as detailed in the plug-in market.

Js

Because the api of uni-app refers to Mini Program, it is different from the js api of browsers, such as

Change alert,confirm to uni.showmodel

Change ajax axios to uni.request

Cookie and session are gone, local.storage is changed to uni.storage

Vue-router is gone. It's changed to uni.navigateTo.

There are still many js api for uni-app, but it is basically the api of Mini Program. Just change wx.request to uni.request.

Uni-app supports conditional compilation and unlimited use of unique api on different sides.

Uniapp has its own routing and request method

Uni.navigateTo routing and Page Jump

Uni.request network request

Thank you for your reading, the above is the content of "what is the difference between vue and uni-app". After the study of this article, I believe you have a deeper understanding of what is the difference between vue and uni-app, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.