uni-app 组件

2023-09-12 08:44:34

规范

  1. 所有组件与属性名都是小写,单词之间以连字符-连接。
  2. 根节点为<template>,这个<template> 下只能且必须有一个根<view>组件
  3. 共同属性类型:id、ref、class、style、hidden、data-*、@*
  4. 特殊属性以v-开头,称之为vue指令,如v-if、v-else、v-for、v-model
  5. 基础组件分为八大类:
  • 视图容器:view、 scroll-view 、swiper、match-media、movable-area、movable-view、cover-view、cover-image
  • 基础内容:icon、text 、rich-text、progress
  • 表单组件:button、form、input、checkbox、radio、picker、picker-view、slider、switch、textarea、editor、label
  • 导航:navigator
  • 媒体组件:audio、camera、image、video、live-player、live-pusher
  • 地图:map
  • 画布:canvas
  • 浏览器:web-view
  • 广告:ad、ad-draw
  • 页面属性配置:custom-tab-bar、navigator-bar、page-meta
  • uniCloud:unicloud-db

基础知识

  1. uni-app App端内置了一个基于 weex 改进的原生渲染引擎,提供了原生渲染能力
  2. 在App端,如果使用vue页面,则使用webview渲染;如果使用nvue页面(native vue的缩写),则使用原生渲染
  3. webview渲染和原生渲染比较
    原生的渲染方式:
    view->layout->renderNode ->合成->GPU渲染
    webview目前渲染方式:
    html->dom tree ->render tree ->render layer + 栅格化 ->合成->gpu渲染。
    一个简单的例子,更新一个textview的内容,对于Native来说,需要经历 layout->view->renderNode->合成->GPU,native layout算法比浏览器快,renderNode的更新只涉及textview。对于WebView需要经历:dom tree update->layout->render tree update ->render layer update ->render layer + 栅格化 ->合成->gpu渲染。经历的流程比较多,webview的layout相对原生也会慢一些,更新的节点就不止一个textview这么简单了,涉及更大的栅格化更新。 Native滚动和局部刷新上做的比浏览器好,长列表更是秒杀Webview

  4. nvue使用场景
    (1)需要高性能的区域长列表或瀑布流滚动:nvue的listrecycle-listwaterfall的性能要高于vue中的scroll-view
    (2)自定义的下拉刷新:nvue的refresh组件
    (3)左右拖动的长列表
    (4)实现区域滚动长列表+左右拖动列表+吸顶的复杂排版效果:swiper-list
    (5)如需要将软键盘右下角按钮文字改为“发送”,则需要使用nvue。
    (6)比如聊天场景,聊天记录区域长列表滚动,适合nvue来做
    (7)解决前端控件无法覆盖原生控件的层级问题:mapvideolive-pusher会发现前端写的view等组件无法覆盖原生组件,此时使用nvue更好
    (8)深度使用map组件
    (9)深度使用video,建议使用nvue。比如如下2个场景:video内嵌到swiper中,以实现抖音式视频滑动切换;nvue的视频全屏后,通过cover-view实现内容覆盖,比如增加文字标题、分享按钮。
    (10)直播推流:nvue下有live-pusher组件
    (11)对App启动速度要求极致化。App端v3编译器模式下,如果首页使用nvue且在manifest里配置fast模式,那么App的启动速度可以控制在1秒左右。而使用vue页面的话,App的启动速度一般是3秒起,取决于你的代码性能和体积

  5. 推荐vue使用场景
    (1)canvas,操作canvas动画,最高性能的方式是使用vue页面的renderjs技术
    (2)动态横竖屏。nvue页面的css不支持媒体查询,所以横竖屏动态切换、动态适配屏幕是很困难的

  6. 纯原生模式
    此时pages.json注册的vue页面将被忽略,vue组件也将被原生渲染引擎来渲染

    // manifest.json    
        {    
             // ...    
            /* App平台特有配置 */    
            "app-plus": {    
                "renderer": "native", //App端纯原生渲染模式
            }    
        }
  7. weex的组件和JS API,与uni-app不同。uni-app与微信小程序相同

  • 作者:if.else.Z
  • 原文链接:https://blog.csdn.net/zdq357104345/article/details/114014034
    更新时间:2023-09-12 08:44:34