文章目录

页面生命周期
自定义事件
- 1、事件绑定
- 2、事件对象
常用小程序组件
自定义组件
- 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() {
    
    
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

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

文章目录

页面生命周期

自定义事件

1、事件绑定

2、事件对象

常用小程序组件

1、组件介绍

1.1、属性值类型

1.2、共同属性

2、视图容器组件

2.1、swiper

2.2、scroll-view

3、表单组件

4、开放组件

自定义组件

1. 组件传参

2. 组件生命周期

猜你喜欢

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

文章目录

页面生命周期

自定义事件

1、事件绑定

2、事件对象

常用小程序组件

1、组件介绍

1.1、属性值类型

1.2、共同属性

2、视图容器组件

2.1、swiper

2.2、scroll-view

3、表单组件

4、开放组件

自定义组件

1. 组件传参

2. 组件生命周期

猜你喜欢

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