uni-app 组件

规范

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的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秒起，取决于你的代码性能和体积

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与微信小程序相同