小程序学习笔记四：页面文件详解之视图层组件与自定义组件

 

    视图层组件：

• 组件是视图层的基本组成单元。
• 组件自带一些功能与微信风格的样式。

• 一个组件通常包括开始标签和结束标签、属性用来修饰这个组件，内容在两个标签之内。

    使用格式为：

<tagname property="value">
  内容...
tagname>

    组件的通用属性：所有组件都拥有的属性

属性名	类型	描述	注解
id	String	组件的唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind* / catch*	EventHandler	组件的事件	详见事件

 

 

    组件分类：组件分为  微信小程序基础组件 和  自定义组件。

    基础组件

    基础组件分为七大类：

    一：视图容器类

    基本容器：view

    滚动视图容器：scroll-view（

1. tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
2. tip: scroll-into-view 的优先级高于 scroll-top
3. tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
4. tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
5. 使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。）

   滑块视图容器（轮播器）：swiper

   可拖动组件：movable-area指定一个区域，movable-view创建一个容器，该视图容器可以在movable-area内自由拖动。

   覆盖视图容器：覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。【例如：我们可以在video上覆盖两个按钮图片，定义点击事件控制video的播放与暂停】

 

   二：基础组件

   图标组件：icon。【通过type属性，指定图标的类型。主要有：success, success_no_circle, info, warn, waiting, cancel, download, search, clear】

   文本组件：text。

   富文本组件：rich-text。富文本组件通过 树 结构来组织内容。nodes 类型有三种：Array / HTML String。节点类型：

• • 结点类型：type = node
    name 标签名 String 是 支持部分受信任的HTML结点
    attrs 属性 Object 否 支持部分受信任的属性，遵循Pascal命名法
    children 子结点列表 Array 否 结构和nodes一致
  • 结点类型：type = text
    text 文本 String 是 支持entities

   

 nodes: "<h1 style='color:red;'>html标题h1>", //html字符串类型
    nodes1: [{ //简单数组类型：有一个子节点
      name: "h1",
      attrs: {
        style: "color:red",
        class: "red"
      },
      children: [{
        type: "text",
        text: '结点列表标题'
      }]
    }],
    nodes2: [{//复杂数组类型：有多个子节点
      name: "ul",
      attrs: {
        style: "padding:20px;border:1px solid blue;",
        class: "red"
      },
      children: [
        {
          name: "li",
          attrs: {
            style: "color:red",
            class: "red"
          },
          children: [{
            type: "text",
            text: '多层结点 无序列表'
          }],
        }, {
          name: "li",
          attrs: {
            style: "color:red",
            class: "red"
          },
          children: [{
            type: "text",
            text: '多层结点 无序列表1'
          }],
        }]
    }]

    进度条组件：progress。通过改变属性值来改变进度条状态。

 

   三：导航组件

   页面跳转组件：navigator。

   属性：

url	String		应用内的跳转链接
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒

    open-type：

navigate	对应 wx.navigateTo 的功能，跳转
redirect	对应 wx.redirectTo 的功能，重定向
switchTab	对应 wx.switchTab 的功能，切换tab
reLaunch	对应 wx.reLaunch 的功能，重新加载
navigateBack	对应 wx.navigateBack 的功能，返回

    四：多媒体组件

    音频组件：audio，可以通过按钮组件等绑定事件来控制播放、暂停、停止。

    视频组件：video，可以通过一系列属性来设置播放器。

    图片组件：image，支持多种缩放模式、懒加载等。

    相机组件：camera，调用系统相机（前置摄像头、后置摄像头）

    观看直播组件：live-player，实时音视频播放。

    直播推流组件：live-pusher，实时音视频录制、推送，进行直播。

 

    五：地图组件

    map：地图组件，可以在上面标记地点、绘制气泡等。

   

    六：绘图组件

    canvas：画布，可以在上面进行涂鸦，主要是通过跟踪手指动作事件来实现的。

canvas-id	String		canvas 组件的唯一标识符
disable-scroll	Boolean	false	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart	EventHandle		手指触摸动作开始
bindtouchmove	EventHandle		手指触摸后移动
bindtouchend	EventHandle		手指触摸动作结束
bindtouchcancel	EventHandle		手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	EventHandle		手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}

   

    七：开放组件

    开放数据：open-data，用于展示微信开放的数据。

    内置浏览器：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。

 

    八：表单组件

   表单：form。将组件内的用户输入的 提交。

   按钮组件：button。

   单选按钮组件：radio-group、radio。

   多选框组件：checkbox-group、check-box。

   输入组件：input。

   多行输入文本框组件：textarea。

   标签组件：label。

   底部弹起的选择器（列表选择器）：picker，支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

   嵌入页面的滚动选择器：picker-view，可以上下滚动选择内容的选择器。

   滑动选择器（拖动进度条来选择）：slider。

   开关组件：switch。

 

 

   自定义组件

   将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

  

   一：创建自定义组件

   类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。

   1：配置自定义组件

   创建自定义组件后，json文件会自动生成，其中会包含组件的配置信息：

{
  "component": true
}

    2：编写组件wxml模版文件

<view class="">
  <view>组件内部view内容view>
  <slot>slot> //用于承载组件引用时提供的子节点。
view>

    这里需要注意的是slot：slot为组件提供了一个空间，可以在页面wxml引用组件模版时，嵌入一个view到slot处。

<view>
  <组件名 参数1=值1，参数2=值2...> //标签属性键值对是自定义组件wxml中用到的变量
    
    <view>这里是插入到组件slot中的内容view>
  组件名>
view>

    【slot可以不要，删掉即可】

    3：编写组件的wxss样式文件

    组件样式需要注意的是:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器，而是采用 class选择器。

    4：编写组件的构造器（js文件）

    在js文件中定义组件的属性、数据、方法等。

properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
data	Object	否	组件的内部数据，和 properties 一同用于组件的模版渲染
methods	Object	否	组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件事件
behaviors	String Array	否	类似于mixins和traits的组件间代码复用机制，参见 behaviors
created	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用 setData
attached	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行
ready	Function	否	组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）
moved	Function	否	组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
detached	Function	否	组件生命周期函数，在组件实例被从页面节点树移除时执行
relations	Object	否	组件间关系定义，参见 组件间关系
options	Object Map	否	一些组件选项，请参见文档其他部分的说明

    

   5：组件事件同页面事件：在wxml中绑定，在js文件中实现事件响应函数。

 

   二：使用自定义组件

   1：在页面配置文件page.json中引入组件

{
  "usingComponents": {
    "组件名": "组件路径"
  }
}

    2：在页面wxml文件中使用组件名创建组件，并且在标签中通过属性配置组件需要用到的数据

<view class="">
    <组件名 参数1=值1，
               参数2=值2，
               。。。。。。>
    组件名>
view>

    3：在页面js文件中获取组件对象，并且调用组件函数

const app = getApp()

Page({

  /**
 * 生命周期函数--监听页面初次渲染完成
 */
  onReady: function () {
    //获得组件对象
    this.组件名 = this.selectComponent("#组件名");
  },
  
  /**
  *定义函数：调用组件的方法
  */
  funcName:function(){
    this.组件名.func(param...)
  },
})

 

转载于:https://www.cnblogs.com/ygj0930/p/8358299.html