规范
- 所有组件与属性名都是小写,单词之间以连字符
-
连接。 - 根节点为
<template>
,这个<template>
下只能且必须有一个根<view>
组件 - 共同属性类型:id、ref、class、style、hidden、data-*、@*
- 特殊属性以
v-
开头,称之为vue指令,如v-if、v-else、v-for、v-model - 基础组件分为八大类:
- 视图容器: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
基础知识
uni-app
App端内置了一个基于 weex 改进的原生渲染引擎,提供了原生渲染能力- 在App端,如果使用vue页面,则使用webview渲染;如果使用nvue页面(native vue的缩写),则使用原生渲染
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滚动和局部刷新上做的比浏览器好,长列表更是秒杀Webviewnvue使用场景
(1)需要高性能的区域长列表或瀑布流滚动:nvue的list
、recycle-list
、waterfall的性能要高于vue中的scroll-view
(2)自定义的下拉刷新:nvue的refresh组件
(3)左右拖动的长列表
(4)实现区域滚动长列表+左右拖动列表+吸顶的复杂排版效果:swiper-list
(5)如需要将软键盘右下角按钮文字改为“发送”,则需要使用nvue。
(6)比如聊天场景,聊天记录区域长列表滚动,适合nvue来做
(7)解决前端控件无法覆盖原生控件的层级问题:map
、video
、live-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秒起,取决于你的代码性能和体积推荐vue使用场景
(1)canvas,操作canvas动画,最高性能的方式是使用vue页面的renderjs技术
(2)动态横竖屏。nvue页面的css不支持媒体查询,所以横竖屏动态切换、动态适配屏幕是很困难的纯原生模式
此时pages.json注册的vue页面将被忽略,vue组件也将被原生渲染引擎来渲染// manifest.json { // ... /* App平台特有配置 */ "app-plus": { "renderer": "native", //App端纯原生渲染模式 } }
weex的组件和JS API,与uni-app不同。uni-app与微信小程序相同