집 > 기사 > 웹 프론트엔드 > uniapp과 vue의 차이점은 무엇입니까

uniapp과 vue의 차이점은 무엇입니까

青灯夜游원래의: 2021-03-04 16:04:3234577검색

차이점: uniapp은 미니 프로그램의 태그를 사용하고, vue는 웹 측의 태그를 사용합니다. 또한 모바일 측에서 일반적으로 사용되는 여러 가지 새로운 구성 요소가 추가되었습니다. uniapp의 API는 애플릿을 의미하므로 브라우저 측 API와는 다릅니다. uni는 vue-router를 지원하지 않으며 자체 라우팅을 사용합니다.

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1&&vue2.9.6 버전, thinkpad t480 컴퓨터.

uniapp과 vue의 차이점

컴포넌트/라벨 변경

예전에는 html 태그였는데 지금은 미니 프로그램 태그입니다.

p는 view
span으로 변경, 글꼴은 텍스트로 변경
a는 navigator
img로 변경됨
img는 image
로 변경됨 입력은 그대로 유지되지만 유형 속성은 verifytype
이것들은 여전히 존재합니다.
select가 picker로 변경됨
iframe이 web-view로 변경됨
ul 및 li가 사라지고 view로 대체됨

사실 이전 HTML 태그 uni-app 컴파일러는 컴파일 중에 이전 태그를 새 태그로 변환합니다(예: p를 뷰로 컴파일). 그러나 이 사용법은 H5 끝을 디버깅할 때 쉽게 혼동을 일으킬 수 있으므로 권장되지 않습니다.

변경 사항 외에도 휴대폰에서 일반적으로 사용되는 여러 가지 새로운 구성 요소가 추가되었습니다.

스크롤 뷰 영역 스크롤 뷰 컨테이너

스와이프 스와이프 영역 뷰 컨테이너

아이콘 아이콘

리치 텍스트 리치 텍스트(js를 실행할 수 없지만 다양한 텍스트 형식 및 이미지를 렌더링할 수 있음)

진행 진행률 표시줄

슬라이더 슬라이더 표시기

스위치 스위치 선택기

카메라 카메라

live-player 라이브 방송

map Map

cover-view 네이티브 컴포넌트를 커버할 수 있는 뷰 컨테이너

cover-view 몇 마디 강조해야 할 부분이 있는데, uni의 h5가 아닌 끝 영상입니다. -app, Map, canvas 및 textarea는 기본 구성 요소이며 다른 구성 요소보다 높은 수준입니다. 지도에 마스크를 추가하는 등 기본 구성 요소를 처리해야 하는 경우에는 내장된 구성 요소 외에도 일반적인 작업을 캡슐화하는 오픈 소스 확장 구성 요소도 많이 있습니다. 확장 구성요소에 대한 자세한 내용은 플러그인 마켓을 참조하세요.

js 변경

js 변경은 실행 환경 변경, 데이터 바인딩 모드 변경, 그리고 세 부분으로 나뉩니다. API 변경.

브라우저에서 v8 엔진으로 실행 환경이 변경됩니다

if, for, settimeout, indexOf 등 표준 js 구문과 api가 지원됩니다.

그러나 쿠키 및 기타 저장소를 포함한 브라우저별 창, 문서, 탐색기 및 위치 개체는 브라우저에서만 사용할 수 있으며 앱 및 애플릿에서는 지원되지 않습니다.

어떤 사람들은 js가 브라우저의 js와 같다고 생각할 수도 있습니다. 실제로 js는 ECMAScript 조직에서 관리합니다. 브라우저의 js는 js 사양을 기반으로 창, 문서, 탐색기, 위치 등 특수 개체를 보완하는 w3c 조직입니다.

uni-app의 각 끝에서는 h5 끝을 제외하고 다른 끝의 js는 브라우저가 아닌 독립적인 v8 엔진에서 실행되므로 브라우저 개체를 사용할 수 없습니다. 소규모 프로그램 개발을 해보신 분이라면 이 점을 잘 아실 겁니다.

이는 jqurey와 같이 문서에 의존하는 많은 HTML 라이브러리를 사용할 수 없음을 의미합니다.

물론 앱과 미니 프로그램은 표준 HTML을 로드할 수 있는 웹 보기 구성 요소를 지원합니다. 이러한 페이지는 여전히 브라우저별 개체 창, 문서, 탐색기 및 위치를 지원합니다.

이전 DOM 연산이 vue의 MVVM 모드로 변경되었습니다

현재 프론트엔드 트렌드는 DOM을 해제하고 mvvm 모드로 전환하는 것입니다. 이는 보다 간결하게 작성하여 줄 수를 크게 줄이는 것입니다. 코드와 동시에 차등 렌더링 성능이 더 좋습니다.

uni-app은 vue의 데이터 바인딩 방법을 사용하여 js와 dom 인터페이스 간의 상호 작용 문제를 해결합니다.

뷰의 표시 텍스트와 같은 특정 DOM 요소의 표시 내용을 변경하려는 경우:

과거에는 뷰에 ID가 설정되었고, dom 요소는 의 선택기를 통해 획득되었습니다. js를 통해 추가 할당 작업을 수행하여 dom 요소 또는 값을 수정했습니다.

다음은 페이지에 표시된 텍스트 영역과 버튼을 보여줍니다. 버튼을 클릭하면 텍스트 영역의 값이 수정됩니다.

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

현재 접근 방식은 Vue의 바인딩 모드에서 dom 요소를 바인딩하는 것입니다. .js 변수, 스크립트에서 js 변수의 값을 수정하면 dom이 자동으로 변경되고 페이지가 자동으로 업데이트되고 렌더링됩니다

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

미니 프로그램의 데이터 바인딩을 배웠지만 vue를 이해하지 못하는 경우 주의하세요:

미니 프로그램 데이터 바인딩은 vue를 참조하지만 일부는 제가 직접 수정했습니다. uni-app에서는 표준 vue만 지원하고, 미니 프로그램의 데이터 바인딩 구문은 지원하지 않습니다. vue는 자동으로 양방향 데이터 바인딩을 하기 때문에 uni-app에는 setData가 존재하지 않습니다. 할당을 통해 데이터를 직접 수정하면 인터페이스가 자동으로 업데이트되어 렌더링됩니다.
Changes in js api

uni-app의 API는 미니 프로그램을 참조하므로, 브라우저와 다릅니다. js api에는

와 같은 많은 차이점이 있습니다.

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中

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

위 내용은 uniapp과 vue의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

json css ecmascript html if switch for 封装 select checkbox Cookie Session map JS 对象事件 default dom promise location alert 选择器 flex canvas li android ios 微信小程序 uni-app

성명：

이전 기사：html5와 h5는 같은 개념인가요?다음 기사：html5와 h5는 같은 개념인가요?