[小程序] 页面生命周期 自定义事件 组件 组件传参 组件生命周期 data-参数

文章目录

• ​​页面生命周期​​
• ​​自定义事件​​

• ​​1、事件绑定​​
• ​​2、事件对象​​

• ​​常用小程序组件​​

• ​​1、组件介绍​​

• ​​1.1、属性值类型​​
• ​​1.2、共同属性​​

• ​​2、视图容器组件​​

• ​​2.1、swiper​​
• ​​2.2、scroll-view​​

• ​​3、表单组件​​
• ​​4、开放组件​​

• ​​自定义组件​​

• ​​1. 组件传参​​
• ​​2. 组件生命周期​​

页面生命周期

网址：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

由框架自己触发的一系统事件函数（钩子函数）。

小程序数据互交就是通过不同的事件函数来完成的，了解生命周期函数，对于以后的数据交互是非常重要的。

• data属性

页面的初始数据

• onLoad(Object[json] query)

页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数。

参数说明

名称	类型	说明
query	Object	打开当前页面路径中的参数 json对象

• onShow()

页面显示/切入前台时触发。一个页面可以触发N次。

• onReady()

页面初次渲染完成时触发。一个页面只会调用一次。

• onHide()

页面隐藏/切入后台时触发。一个页面可以触发多次

• onPullDownRefresh

监听用户下拉动作，此事件需要在app.json文件中window节点中“开启全局的下拉刷新”

“enablePullDownRefresh”:true,才能触发它 作用：下拉加载更多

• onReachBottom

页面上拉触底事件的处理函数，需要当前页面内容超过一屏显示 作用：上拉加载更多

• onPageScroll

页面滚动触发事件的处理函数，需要当前页面内容超过一屏显示 作用：滚动事件监听

• onShareAppMessage

用户点击右上角转发，触发此方法，在此方法中可以自定义转发的内容。 作用：自定义分享

分享页面的路径，必须以“/”开头。

自定义事件

1、事件绑定

文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E8%AF%A6%E8%A7%A3

• 绑定事件两种写法

• 绑定冒泡事件（不会帮我们阻止冒泡）【主要】

• 语法：bind事件类型=“方法名” ​​方法名不能加括号，而且不能传参​​

• 绑定非冒泡事件（会帮我们阻止冒泡）

• 语法：catch事件类型=“方法名” ​​方法名不能加括号，而且不能传参​​

• 上述语法还支持在属性名中间加上“:”写法，例如：

• bind:事件类型
• catch:事件类型
• 自基础版本库2.8.1以后所有的事件都支持加“:”写法

• 特别需要注意，事件类型有可能其名称与之前大不同，例如以前的点击事件类型名字是​​click​​，在这里点击事件其实就是手指触摸事件，官网规定触摸事件是​​tap​​。
• 小程序事件 有哪些？查看如下对应官网地址：
  ​​​https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html​​

例如，声明一个view给其绑定一个点击事件（冒泡事件）：

<!--pages/eventBind/eventBind.wxml-->
<text>pages/eventBind/eventBind.wxml</text>

<!-- 给view标签绑定点击事件 -->
<view bindtap="tapHandler">
    点我一下有惊喜
</view>

<!-- 给view绑定长按事件 -->
<view bind:touchstart="start" bind:touchend="end">
    蓄力发动技能
</view>

随后需要在页面的js逻辑层文件中写对应的处理程序：tapHandler，参考代码如下

Page({

    /**
     * 页面的初始数据
     */
    data: {
        time: 0
    },

    /**
     * tap事件的处理程序
     */
    tapHandler() {
        console.log('的确是点了，惊喜是：这节结束就下课。');
    },

    /**
     * 蓄力开始触发的事件
     */
    start() {
        // 获取当前的时间并记录
        let now = Date.now();
        this.setData({
            time: now
        })
        console.log('吟唱中.....');
    },

    /** 蓄力结束触发的事件 */
    end() {
        let diffTime = Date.now() - this.data.time;
        console.log('技能发动完毕，cd....');
        console.log('本次蓄力耗时' + diffTime + '毫秒');
    },
    // ......
});

2、事件对象

当组件触发事件时，逻辑层绑定该事件的处理方法会收到一个事件对象。通过此对象来进行小程序的自定义事件参数据传递。

事件对象在小程序中是非常有意义的，这点与vue和react不同。在小程序中，事件对象是给事件处理程序传递参数的唯一方式。

BaseEvent基础事件对象属性列表：

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数。
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合

注意点：target属性与currentTarget，在部分场景下是一样的，当然也存在不一样的情况。

• 如果事件依附的这个组件（标签）不存在子组件（标签）并且子有属性的时候，两者一样
• 如果事件依附的这个组件（标签）存在子组件（标签）并且子有属性的时候，则两者不一样
• 如果以后要获取事件自身的组件（标签）的数据的时候，得使用currentTarget。
• 在小程序中，如果希望在视图结构中通过事件给事件对象传递参数，则可以在标签上使用​​data-数据名=“数据值”​​的形式传递，例如参考代码：

<!-- 传递参数100 -->
<view bindtap="tapHandler" id="efg" data-m="100">
    <!-- 传递参数abc -->
    <view id="abc" data-abc="abc">点我触发事件</view>
</view>

// 接收参数
/**
  * 事件对象获取
  * 所有的事件处理程序都有一个默认的参数，这个参数就是事件对象eventObj
  */
tapHandler(eventObj) {
    console.log(eventObj);
    // 接收事件组件/标签自己的数据
    console.log(eventObj.currentTarget.dataset.m);
    // 获取事件组件/标签子的数据
    console.log(eventObj.target.dataset.abc);
}

常用小程序组件

1、组件介绍

文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之间。

注意：所有组件与属性都是小写，以连字符-连接

1.1、属性值类型

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

1.2、共同属性

所有组件都有的属性：

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

2、视图容器组件

2.1、swiper

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

案例：使用swiper展示轮播图

逻辑层定义数据

data: {
        background: ["https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/bce52a5f143cd3e25c6c39c7a0fd7f276ce43bad.png?sign=f4ec5771f7eabd11226fe5f4b7f0f6e8&t=5fa403f2",
            "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/6018ac895dd29437b1d023c121c7539ecf2e9221.jpeg?sign=47da092f8a6a1650df3da3dd3dd40cb3&t=5fa4041d",
            "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/f81d133833b89a18cb1842f449810d16ec5d3c78.jpeg?sign=22eadb72caac161df642aa18b84127a8&t=5fa40431"
        ],
        // 是否显示原点
        indicatorDots: true,
        // 滑动方向是否为纵向
        vertical: false,
        // 是否自动轮播
        autoplay: true,
        // 自动切换时间间隔（单个图片显示的时长）
        interval: 2000,
        // 切换的持续时间
        duration: 500
    },

图片采用​​image​​​组件进行展示，其支持对图片进行缩放、裁剪处理。关于​​image​​组件的信息，可以访问文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

实际在wxml中展示

<!--pages/swiper/swiper.wxml-->
<text>pages/swiper/swiper.wxml</text>

<view class="page-section page-section-spacing swiper">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
            <swiper-item>
                <!-- image标签一般都需要配合图片处理属性去使用：mode。image标签除了展示图以外，还提供了一套对于图片的裁剪，缩放等功能 -->
                <image style="height: 150px;" src="{{item}}"/>
            </swiper-item>
        </block>
    </swiper>
</view>

在设计图片的时候，一定要和设计人员对接好图片的合适尺寸比例。

mode=“widthFix”: 宽度不变，高度自动变化，

2.2、scroll-view

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

案例：实现滚动切换的效果

逻辑层代码

// pages/scroll/scroll.js
const order = [
    {id:"a",url:"https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/bce52a5f143cd3e25c6c39c7a0fd7f276ce43bad.png?sign=f4ec5771f7eabd11226fe5f4b7f0f6e8&t=5fa403f2"},
    {id:"b",url:"https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/6018ac895dd29437b1d023c121c7539ecf2e9221.jpeg?sign=47da092f8a6a1650df3da3dd3dd40cb3&t=5fa4041d"},
    {id:"c",url:"https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/f81d133833b89a18cb1842f449810d16ec5d3c78.jpeg?sign=22eadb72caac161df642aa18b84127a8&t=5fa40431"}
]

Page({
    /**
     * 页面的初始数据
     */
    data: {
        // 默认要显示的元素
        toView: 'a',
        // 绑定数据给页面
        imgs: order
    },

    // 监听是否滚动到顶部
    scrollToTop() {
        this.setAction({
            scrollTop: 0
        })
    },

    // 触摸事件
    tap() {
        for (let i = 0; i < order.length; ++i) {
            // this.data.toView此时是图片的id
            if (order[i].id === this.data.toView) {
                this.setData({
                    toView: order[i + 1].id,
                    scrollTop: (i + 1) * 200
                })
                break
            }
        }
    },

    // 触摸并拖拽事件
    tapMove() {
        this.setData({
            scrollTop: this.data.scrollTop + 10
        })
    },
})

wxml文件参考代码

<!--pages/scrollView/scrollView.wxml-->
<text>pages/scrollView/scrollView.wxml</text>

<scroll-view scroll-y="true" style="height: 560rpx;" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    <block wx:for="{{imgs}}" wx:key="*this">
        <image src="{{item.url}}" />
    </block>
</scroll-view>

3、表单组件

小程序项目中但凡是涉及到表单的地方，都需要使用表单组件。表单组件的作用就是用于组成表单的。

注意点：

• 这里面表单组件部分的标签继续沿用html的标签，与之前完全同名
• 组件标签的部分属性也与之前html属性一致，但是更多的是不一致的

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/button.html

<!--pages/formComponent/form.wxml-->
<text>pages/formComponent/form.wxml</text>

<!-- 表单组件：按钮组件 -->
<!-- 常规按钮：底色灰白的，不易见，type值为default（可以不写） -->
<button>常规按钮</button>
<!-- 主要按钮：绿色按钮，最常用的按钮 -->
<button type="primary">主要按钮</button>
<!-- 警告按钮：底色灰色，但是字是红色 -->
<button type="warn">警告按钮</button>
<!-- 按钮开放功能：打开授权，需要配合授权的回调函数，综合案例中再讲 -->
<button open-type="getUserInfo" bindgetuserinfo="getInfo">授权</button>

<!-- 单选按钮组 -->
<!-- 由于单选按钮组中包含了多个redio，因此需要被包裹 -->
<radio-group>
    <radio value="1">男</radio>
    <radio value="2">女</radio>
</radio-group>

<!-- 复选框组 -->
<!-- 与单选按钮组类似，也需要被包裹 -->
<checkbox-group>
    <checkbox value="吃饭">吃饭</checkbox>
    <checkbox value="睡觉">睡觉</checkbox>
    <checkbox value="打DD">打DD</checkbox>
</checkbox-group>

<!--表单组件的标签的样式是需要自己去调节设置的 -->
<input type="text" value="zhangsan" />

提醒：按钮button组件有一个非常实用的属性​​open-type​​，后续可以通过该属性赋予按钮高级的功能（微信开放能力），例如：

• 获取用户信息的时候
• 唤起其他App的时候

• 不是任意app都可以唤起，只能唤起来源app

• 获取用户手机号
• …

4、开放组件

​​https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html​​

用于展示微信开放的数据 , 小程序插件中不能使用。

<!--拉取群名称-->
<open-data type="groupName" open-gid="xxxxxx"></open-data>
<!-- 头像 -->
<open-data type="userAvatarUrl"></open-data>  
<!-- 性别 -->
<open-data type="userGender" lang="zh_CN"></open-data>

---

自定义组件

文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

开发者可以将页面内的功能模块抽象成自定义组件（思想与vue和react一样），以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

1. 组件传参

步骤：

• 1.首先创建组件， 新建文件创建组件，右键创建文件夹，然后新建组件生成相应4个文件同页面文件一样。
• 2.在组件js文件中，定义组件得属性，如下图tag,且在页面中输出变量tag如下
  
  
• 3.在其他页面使用组件，首先需要在该页面得json配置文件中引入该组件如下图

- 4. 将引入得组件名放到对应使用位置，父组件添加属性，给子组件传递数据，子组件通过 properties 接收，如此处tag 属性，注意：传递属性名和接受得属性名 必须一致。

• 5.子组件向父组件传递参数一般通过事件传递。
• 6.子组件绑定事件，父组件页面bind:子组件事件名。

2. 组件生命周期

1.组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

• 组件实例刚刚被创建好时， ​​created​​​ 生命周期被触发。此时，组件数据 ​​this.data​​​ 就是在 ​​Component​​​ 构造器中定义的数据 ​​data​​ 。 此时还不能调用 ​​setData​​ 。 通常情况下，这个生命周期只应该用于给组件 ​​this​​ 添加一些自定义属性字段。
• 在组件完全初始化完毕、进入页面节点树后， ​​attached​​​ 生命周期被触发。此时， ​​this.data​​ 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后， ​​detached​​​ 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 ​​detached​​ 会被触发。

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

​​this​​ 添加一些自定义属性字段。

• 在组件完全初始化完毕、进入页面节点树后， ​​attached​​​ 生命周期被触发。此时， ​​this.data​​ 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后， ​​detached​​​ 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 ​​detached​​ 会被触发。

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})