微信小程序开发笔记 - 组件

组件

1. 组件基础

1.1 组件的创建与引用

  • 创建组件

    • 在项目根目录中创建components→comp1文件夹
    • 在文件夹上右键,点击"新建Component"自动生成所需文件
    Component({
      properties: {},
      data: {},
      methods: {}
    })
    
  • 引用组件

    • 在页面的.json配置文件中引用组件的方式,叫做"局部引用"

    • app.json全局配置文件中引用组件的方式,叫做"全局引用"

    • 示例代码

      - JSON

      {
          "usingComponents":{
              "my-test1": "/components/test1/test1"
          }
      }
      

      - WXML

      <mt-test1></mt-test1>
      
  • 组件和页面的区别

    • 组件的json文件中需要声明"component":true属性
    • 组件的js文件中调用的是Component()函数
    • 组件的事件处理函数需要定义到methods节点中

1.2 properties属性

(data和methods与vue基本一致不做过多介绍)

  • properties是组件的对外属性,用来接收外界传递到组件中的数据

    小程序是允许在组件中修改properties的

    Component({
      properties: {
          //完整形式,需要设置被传递值的类型和默认值
          max:{
              type: Number,
              value: 10
          },
          //如果不设置默认值可以简写
          max: Number
      },
    })
    

1.3 数据监听

  • 小程序中使用observers来监听和响应任何属性和数据字段的变化

    Component({
        observers:{
            '数据A, 数据B': function(数据A的新值,字段B的新值){
                //...
            }
        }
    })
    
  • 监听对象属性的变化

    小程序的监视属性自带深度监视,所以可以直接监视对象中属性的变化

    Component({
        obervers:{
            '对象.属性A, 对象.属性B': function(属性A的新值,属性B的新值){
                //...
            }
        }
    })
    
  • 监听对象中所有属性的变化

    如果某个对象中需要被监听的属性太多,为了方便,可以使用通配符**来监听对象中所有属性的变化

    //一次性监视rgb对象中的r,g,b属性
    observes:{
        'rgb.**': function(obj){
            this.setData({
                fullColor: `${obj.r},${obj.g},${obj.b}`
            })
        }
    }
    

2. 常用组件

  • 一共有9种组件:视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问

2.1 视图容器

  • view

    • 普通视图区域,类似于HTML中的div,是一个块级元素,常用来实现页面布局效果
  • scroll-view

    • 可滚动的视图区域,常用来实现滚动列表效果
    • 属性
      • scroll-y:允许纵向滚动(使用时必须给scroll-view一个固定高度)
      • scroll-x:允许横向滚动
    <scroll-view class="container1" scroll-y>
        <view>A</view>
        <view>B</view>
        <view>C</view>
    </scroll-view>
    
  • swiper和swiper-item

    • 轮播图容器区间和轮播图item组件
    • 更多属性请参考API
    <swiper>
        <swiper-item>
            <view class="item">A</view>
        </swiper-item>
        <swiper-item>
            <view class="item">B</view>
        </swiper-item>
        <swiper-item>
            <view class="item">C</view>
        </swiper-item>
    </swiper>
    

2.2 内容

  • text

    • 文本组件,类似于HTML中的span标签,是一个行内元素
    • 添加selectable属性支持长按选中效果
    <view>
        <text selectable>135000000</text>
    </view>
    
  • rich-text

    • 富文本组件,通过组件的nodes属性节点,把HTML字符串渲染为对应的UI结构
    <rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>
    

2.3 navigator

navigator标签被用于声明式路由导航

  • url表示要跳转的页面地址,必须以/开头
  • open-type表示跳转的方式,如果跳转的页面为tabBar页面,该属性必须为switchTab
<navigator url="/pages/info/info">导航到info页面</navigator>

<navigator url="/pages/message/message" open-type="switchTab">
    导航到消息页面
</navigator>

如果要后退到上一页面或多级页面,则需要指定open-type属性和delta属性

  • open-type的值必须是navigateBack,表示要进行后退导航
  • delta的值必须是数字,表示要后退的层级数
<navigator open-type="navigateBack" delta="1">后退</navigator>

编程式路由导航

调用wx.switchTab(Object object)方法,可以跳转到tabBar页面

调用wx.navigateTo(Object object)方法,可以跳转到非tabBar页面s

其中Object参数对象的属性列表如下

属性 说明
url 需要跳转的tabBar页面的路径,路径后不能带参数
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数(无论调用结果如何都会执行)
  • 示例代码

    - WXML

    <button bind:tap="gotoMessage">跳转到消息页面</button>
    

    - JS

    //导航到tabBar页面
    gotoMessage(){
        wx.switchTab({
            url:'/pages/message/message'
        })
    }
    
    //导航到非tabBar页面
    gotoInfo(){
        wx.navigateTo({
            url:'/pages/info/info'
        })
    }
    

如果要后退到上一页面或多级页面,需要调用wx.navigateBack(Object object)方法,可以返回上一页面或多级页面。

其中Object参数对象可选的属性列表如下:

属性 说明
delta 返回的页面数,如delta大于现有页面数,则返回到首页
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数(无论调用结果如何都会执行)
  • 示例代码

    - WXML

    <button bind:tap="gotoBack">后退</button>
    

    - JS

    goBack(){
        wx.navigateBack({
            wx.navigateBack()
        })
    }
    

2.4 其它组件

  • button

    • 按钮组件,功能比HTML中的button丰富,通过open-type属性可以调用微信提供的各种功能(客服、转发等)

    • 属性

      • type:指定按钮颜色类型
      • size:调整按钮大小
      • plain:按钮是否镂空
      <button>普通按钮</button>
      <button type="primary">普通按钮</button>
      <button type="warn">警告按钮</button>
      <button type="primary" size="mini">小尺寸按钮</button>
      <button type="warn" plain>镂空按钮</button>
      
  • image

    • 图片组件,默认宽度为300px,高度为240px

      <image src="/images/1.png" mode="heightFix"></image>
      
    • image的mode属性可以用于设置图片剪裁、缩放模式

      说明
      aspectFit 保持图片宽高比缩放,保证长短边都显示完整
      aspectFill 保持图片宽高比缩放,保证短边显示完整,长边被截取
      scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
      widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
      top/bottom/center/left/right 裁剪模式,不缩放图片,只显示图片的顶/底/中/左/右部区域
      top left/right 裁剪模式,不缩放图片,只显示图片的左/右上边区域
      bottom left/right 裁剪模式,不缩放图片,只显示图片的左/右下边区域

3. 组件间通信

3.1 属性绑定

  • 属性绑定用于父向子传值,且只能传递普通类型的数据,无法将方法传递给子组件

  • 示例代码

    - 父组件

    <my-test count="{{count}}"></my-test>
    

    - 子组件

    <text>{{count}}</text>
    
    <script>
    	properties: {
    		count: Number
    	}
    </script>
    

3.2 事件绑定

  • 事件绑定用于实现子向父传值,可以传递任何类型数据,操作步骤如下;

    1. 在父组件的js中定义一个函数,该函数即将通过自定义事件的形式,传递给子组件
    2. 在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件
    3. 在子组件的js中,通过调用this.triggerEvent('自定义事件名称',{参数对象}),将数据发送到父组件
    4. 在父组件的js中,通过e.detail获取到子组件传递过来的数据
  • 示例代码

    - 父组件

    <my-test count="{{count}}" bind:gogogo="gogogoCount"></my-test>
    
    <script>
    	syncCount(e){
            this.setData({
                count: e.detail.value
            })
        }
    </script>
    

    - 子组件

    <text>{{count}}</text>
    <button bind:tap="addCount">+1</button>
    
    <script>
        addCount(){
            this.setData({
                count:this.properties.count + 1
            })
            this.triggerEvent('sync',{value:this.properties.count})
        }
    </script>
    

3.3 获取组件实例

  • 可在父组件中调用this.selectComponent("id或class选择器"),获取子组件的实例对象,从而直接访问子组件的任意数据和方法

  • 示例代码

    - 父组件

    <my-test count="{{count}}" bind:gogogo="gogogoCount" class="customA"></my-test>
    <button bind:tap="getChild">获取子组件实例</button>
    
    <script>
    	getChild(){
            //class选择器
            const child = this.selectComponent('.customA')
            //调用子组件中的setData方法
            child.setData({
                count:child.properties.count+1
            })
            child.addCount()
        }
    </script>
    

3.4 插槽

默认插槽

  • 在自定义组件的wxml结构中可以提供一个<slot>节点,即插槽,用于承载组件使用者提供的wxml结构(微信小程序不支持作用域插槽

  • 默认情况下,每个自定义组件中只允许使用一个<slot>进行占位,如果需要使用多个插槽,需要在组件的js文件中开启如下配置:

    Component({
        options:{
            multipleSlots: true	//开启多插槽支持
        }
    })
    
  • 示例代码

    - 父组件

    <coponent-tag-name>
        <view>插入到组件slot中的内容</view>
    </coponent-tag-name>
    

    - 子组件

    <view class="wrapper">
        <view>这里是组件的内部节点</view>
        <!--对于不确定的内容就使用slot进行占位,具体内容由使用者决定-->
        <slot></slot>
    </view>
    

具名插槽

  • 可以在组件的wxml中使用多个slot标签,并以不同的name来区分不同的插槽

  • 示例代码

    - 父组件

    <my-test>
        <view slot="before">通过插槽填充的内容1</view>
        <view slot="after">通过插槽填充的内容2</view>
    </my-test>
    

    - 子组件

    <view class="wrapper">
        <slot name="before"></slot>
        <slot name="after"></slot>
    </view>
    

4. behaviors

  • behaviors是小程序中,用于实现组件间代码共享的特性,类似于Vue.js中的mixin

  • 每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的内容会被合并到组件中。每个组件可以引用多个behavior,behavior之间也可以互相引用

  • 示例代码

    创建behavior

    //Behavior()创建实例对象
    //module.exports对外暴露
    module.exports = Behavior({
        properties:{},
        data:{username:'zs'},
        methods:{}
    })
    

    导入并使用behavior

    //使用require导入需要的自定义behavior模块
    const myBehavior = require("../../behaviors/my-behavior")
    
    Component({
        //挂载
        behaviors:[myBehavior]
    })
    
posted @ 2022-12-13 01:22  Solitary-Rhyme  阅读(82)  评论(0编辑  收藏  举报