zoukankan      html  css  js  c++  java
  • 【Uni-App】组件笔记

    官网文档地址:

    https://uniapp.dcloud.io/component/README
    • 组件是视图层的基本组成单元。
    • 组件是一个单独且可复用的功能模块的封装。

    每个组件,包括如下几个部分:以组件名称为标记的

    1、开始标签和结束标签、

    2、组件内容、

    3、组件属性、

    4、组件属性值。

    <component-name property1="value" property2="value">
        content
    </component-name>

    注意:所有组件与属性名都是小写,单词之间以连字符-连接。

    组件的属性类型

    类型描述注解
    Boolean 布尔值 组件写上该属性,不管该属性等于什么,其值都为 true,只有组件上没有写该属性时,属性值才为 false。如果属性值为变量,变量的值会被转换为 Boolean 类型。
    Number 数字 1, 2.5
    String 字符串 "string"
    Array 数组 [ 1, "string" ]
    Object 对象 { key: value }
    EventHandler 事件处理函数名 handlerName 是 methods 中定义的事件处理函数名
    Any 任意属性  

    下面的例子演示了组件的属性设置bool值和数字的例子。

    注意false作为一个js变量,在组件的属性中使用时,属性前面需增加:冒号前缀,属性值仍使用引号包裹,但引号里不是字符串,而是js。

    <template>
        <view>
            <button size="mini" :disabled="false" hover-start-time=20 >按钮</button>
        </view>
    </template>

    公共属性:

    每个组件都有各自定义的属性,但所有uni-app的组件,都有如下属性:

    属性名类型描述注解
    id String 组件的唯一标示 一般用于获取组件上下文对象(如:VideoContext),需要保持整个页面唯一
    ref String vue中组件的唯一标示 用来给子组件注册引用信息,详见 Vue 文档
    class String 组件的样式类 在对应的 css 中定义的样式类
    style String 组件的内联样式 可以动态设置的内联样式
    hidden Boolean 组件是否隐藏 所有组件默认是显示的
    data-* Any 自定义属性 组件上触发的事件时,会发送给事件处理函数
    @* EventHandler 组件的事件 详见各组件详细文档,事件绑定参考 事件处理器

    除了上述公共属性,还有一类特殊属性以v-开头,称之为vue指令,如v-if、v-else、v-for、v-model。详见vue指令

    事件

    每个组件都有“事件”。事件就是在指定的条件下触发某个js方法。

    比如button组件,有点击事件,也就是当手机用户点击这个button组件时,会触发这个事件。

    事件也是组件的属性,只不过这类属性以@为前缀。

    事件的属性值,指向一个在script的methods里定义过的js方法,还可以给方法传参数。

    下面是组件事件的示例:

    • click是button组件的点击事件,在用户点击这个button时触发
    • click指向了methods中定义的goto方法,并且传递了一个参数'/pages/about/about'
    <template>
        <view>
            <button size="mini" @click="goto('/pages/about/about')">按钮</button>
        </view>
    </template>
    <script>
        export default {
            methods: {
                goto(url) {
                    console.log("按钮被点击了,且传入的参数是:" + url)
                }
            }
        }
    </script>

    基础组件:

    uni-app的组件,分为基础组件和扩展组件。

    基础组件在uni-app框架中已经内置,无需将内置组件的文件导入项目,也无需注册内置组件,随时可以直接使用,比如<view>组件。

    除了基础组件,都称为扩展组件。扩展组件需要将组件导入项目中才可以使用。

    uni-app为开发者提供了一系列基础组件,类似HTML里的基础标签元素。

    但uni-app的组件与HTML不同,而是与小程序相同,可更好的满足手机端的使用习惯。

    虽然不推荐使用HTML标签,但实际上如果开发者写了div等标签,在编译到非H5平台时也会被编译器转换为view标签,类似的还有spantextanavigator等,包括css里的元素选择器也会转。但为了管理方便、策略统一,新写代码时仍然建议使用view等组件。

    开发者可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。

    uni-app 基础组件规范,与小程序规范相近。如果了解小程序开发的话,uni-app的基础组件会感觉很熟悉。但需要注意组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName"

        <picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
            <view class="picker">
              当前选择: {{date}}
            </view>
        </picker>

    组件项

    1、视图容器(View Container):

    组件名说明
    view 视图容器,类似于HTML中的div
    scroll-view 可滚动视图容器
    swiper 滑块视图容器,比如用于轮播banner
    match-media 屏幕动态适配组件,比如窄屏上不显示某些内容
    movable-area 可拖动区域
    movable-view 可移动的视图容器,在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中
    cover-view 可覆盖在原生组件的上的文本组件
    cover-image 可覆盖在原生组件的上的图片组件

    2、基础内容(Basic Content):

    组件名说明
    icon 图标
    text 文字
    rich-text 富文本显示组件
    progress 进度条

    3、表单组件(Form):

    标签名说明
    button 按钮
    checkbox 多项选择器
    editor 富文本输入框
    form 表单
    input 输入框
    label 标签
    picker 弹出式列表选择器
    picker-view 窗体内嵌式列表选择器
    radio 单项选择器
    slider 滑动选择器
    switch 开关选择器
    textarea 多行文本输入框

    4、路由与页面跳转(Navigation):

    组件名说明
    navigator 页面链接。类似于HTML中的a标签

    5、媒体组件(Media):

    组件名说明
    audio 音频
    camera 相机
    image 图片
    video 视频
    live-player 直播播放
    live-pusher 实时音视频录制,也称直播推流

    6、地图(Map):

    组件名说明
    map 地图

    7、画布(Canvas):

    组件名说明
    canvas 画布

    8、webview(Web-view):

    组件名说明
    web-view web浏览器组件

    9、广告

    组件名说明
    ad 广告组件
    ad-draw 沉浸视频流广告组件

    10、页面属性配置

    组件名说明
    custom-tab-bar 底部tabbar自定义组件
    navigation-bar 页面顶部导航
    page-meta 页面属性配置节点

    11、uniCloud

    组件名说明
    unicloud-db组件 uniCloud数据库访问和操作组件

    12、Easycom 引入组件规范

    HBuilderX 2.5.5起支持

    传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

    1、组件安装在项目的components目录下或uni_modules目录下,

    2、符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。

    比如前述举例的uni-rate组件,它导入到uni-app项目后,存放在了目录/components/uni-rate/uni-rate.vue

    同时它的组件名称也叫uni-rate,所以这样的组件,不用在script里注册和引用。 如下:

    <template>
            <view>
                <uni-rate></uni-rate><!-- 这里会显示一个五角星,并且点击后会自动亮星 -->
            </view>
        </template>
    <script>
        // 这里不用import引入,也不需要在components内注册uni-list组件。template里就可以直接用
        export default {
            data() {
                return {
    
                }
            }
        }
    </script>

    不管components目录下安装了多少组件,easycom打包后会自动剔除没有使用的组件,对组件库的使用尤为友好。

    组件库批量安装,随意使用,自动按需打包。

    以官方的uni-ui为例,在HBuilderX新建项目界面选择uni-ui项目模板,只需在页面中敲u,拉出大量组件代码块,直接选择,即可使用。大幅提升开发效率,降低使用门槛。

    DCloud插件市场下载符合components/组件名称/组件名称.vue目录结构的组件,均可直接使用。

    easycom是自动开启的,不需要手动开启。

    13、使用原始Vue方式引入组件:

    如果你的组件名称或路径不符合easycom的默认规范,可以在pages.jsoneasycom节点进行个性化设置,自定义匹配组件的策略。另见

    如果不使用easycom,手动引用和注册vue组件,则需要分3步写如下代码:

    1. import导入组件
    2. components里注册组件
    3. template中使用组件
      <template>
            <view>
                <uni-rate text="1"></uni-rate><!-- 3.使用组件 -->
            </view>
        </template>
        <script>
            import uniRate from '@/components/uni-rate/uni-rate.vue';//1.导入组件
            export default {
                components:{uniRate }//2.注册组件
            }
        </script>
  • 相关阅读:
    GNU make manual 翻译(九十九)
    GNU make manual 翻译( 九十五)
    Shell的 for 循环小例子
    makefile中对目录遍历的小例子
    GNU make manual 翻译(九十三)
    GNU make manual 翻译( 一百)
    GNU make manual 翻译( 九十七)
    GNU make manual 翻译( 九十八)
    mapserver4.8.3 的readme.win32的中文翻译文件
    遥控器编程
  • 原文地址:https://www.cnblogs.com/mindzone/p/15146141.html
Copyright © 2011-2022 走看看