微信小程序31~40

发布于:2025-07-07 ⋅ 阅读:(16) ⋅ 点赞:(0)
1.事件绑定和事件对象

小程序中绑定事件没有on 方式,也没有click,小程序中可以用bind方法,click事件也需要用tap事件来进行代替。
绑定事件分为两种:

  1. bind:事件名,eg:
<view bind:tap="fnName"><view/>
  1. bind事件名,eg:
<view bindtap="fnName"><view/>

事件处理函数需要写到.js文件中,在.js文件中需要调用小程序提供的Page方法来注册小程序的页面,可以直接在Page方法中创建事件处理函数。

type的三个属性可以改变按钮的样式:

1. primary 绿色底按钮
<button type="primary">绑定事件</button>
2. warn红色按钮
<button type="warn">绑定事件</button>
3. default绿色字按钮
<button type="default">绑定事件</button>

小按钮
<button type="primary" size="mini">绑定事件</button>

在小程序中,input输入框默认没有边框,需要自己添加样式

wxml页面
<input type="text" bindinput="getInputVal"/>
Page页面
getInputVal (event) {
        console.log(event);
    }
getInputVal (event) {
        console.log(event.detail.value);

在这里插入图片描述

2.事件的分类和组织事件冒泡

事件分为冒泡事件和非冒泡事件
冒泡事件:一个组件的事件被触发后,该事件会向父节点传递

<view class="catch" bind:tap="parentHandler">
	<button bind:tap="btnHandler">按钮</button>
</view>

非冒泡事件:一个组件的事件被触发后,该事件不会向父节点传递

<view class="catch" bind:tap="parentHandler">
<button catch:tap="btnHandler">按钮</button>
</view>

使用bind绑定的事件,会触发事件冒泡,如果想阻止,可以用catch来绑定事件。

3.事件传参-data-*自定义数据

事件传参:在触发事件时,将一些数据作为参数传递给事件处理函数的过程就是。
在组件上通过data-*的方式定义需要传递的数据,*是自定义的数据

<view data-id="100" bindtap="handler"/>

然后通过事件对象进行获取自定义数据

<button bind:tap="btnHandler" data-id="1" data-name="tom">按钮</button>
//currentTarget事件绑定者,即那个组件绑定了当前事件处理函数
//target事件触发者,即那个组件触发了当前事件处理函数
//currentTarget和target都是按钮,因为是按钮绑定的事件处理函数,同时触发,用谁获取数据都行
 btnHandler (event) {
        console.log(event.currentTarget.dataset.id);
        console.log(event.target.dataset.name);
    },
<view bind:tap="parentHandler" data-ppid="1" data-ppname="tom">
    <button data-id="1" data-name="tom">按钮</button>
</view>
//currentTarget事件绑定者:view
//target事件触发者:button
//想要获取view的数据用currentTarget,想要获取button的数据用target
parentHandler (event) {
        console.log(event);
    }

在这里插入图片描述

4.事件传参-mark自定义数据

mark用于识别具体触发事件的target节点,还可以承载一些自定义数据。

<view mark:id="100" bindtap="handler"/>
<view bind:tap="parentHandler" mark:ppid="1" mark:ppname="tom">
    <button mark:id="1" mark:name="tom">按钮</button>
</view>
//可以获取到触发事件的节点和父节点上所有的mark数据
parentHandler (event) {
        console.log(event);
    }
5.wxml语法-声明和绑定数据

小程序页面中使用的数据要在Page()方法的data对象中声明定义
数据声明好后,在WXML使用Mustache语法({{}})将变量包起来,从而将数据绑定
在{{ }}内部可以做一些简单的运算,如:算数运算、三元运算、逻辑判断
在{{ }}语法中,只能写表达式,不能写语句,也不能调用js相关的方法。

<view>{{ school }} </view>
<view>{{ obj.name }} </view>

<!-- 绑定属性值 ,要动态绑定一个变量时,属性值要用双大括号包裹-->
<view id="{{id}} ">绑定属性值</view>
<!-- 如果属性值是布尔值,也要用双大括号包裹 -->
<checkbox value="{{ isCheck }}"/>

在这里插入图片描述

6.setData()修改数据

小程序中修改数据不推荐赋值,赋值无法改变页面数据
要通过setData()进行修改,setData()方法接收对象作为参数,key是需要修改的数据,value是最新的值。
setData()方法有两个作用:

  1. 更新数据
  2. 驱动视图更新
data: {
        num: 1
    }, 
    updatenum () {
        console.log(this.data.num);
        this.setData({
            //key:是要更新的数据
            //value:是最新的值
            num:this.data.num + 1
        })
    }
7.setData()修改对象类型的数据

将key写成数据路径的方式a.b.c
‘userInfo.name’: ‘tom’,

<view>{{ userInfo.name }} </view>
<view>{{ userInfo.age }} </view>
<button bind:tap="updateUserInfo">修改对象类型数据</button>

 updateUserInfo () {
        // 新增单个或多个属性
        //修改同理
        this.setData({
            'userInfo.name': 'tom',
            'userInfo.age': '18'
        })
    }
    

优化:用ES6提供的展开运算符或者 Object.assign()

ES6提供的展开运算符
    const userInfo = {
        ...this.data.userInfo,
        name: 'jerry',
        age: 10
    },
    this.setData({
        userInfo
    })  
Object.assign()方法
const userInfo = Object.assign(this.data.userInfo, {name: 'jerry'}, { age: 18 })
    this.setData({
        userInfo
    })

删除对象类型的数据

//删除单个属性
    delete this.data.userInfo.age
    //此时数据已经更新
    this.setData({
        //要驱动视图更新
        userInfo: this.data.userInfo
    })

//删除多个属性
//用rest剩余参数
    const { age,test, ...rest } = this.data.userInfo

    this.setData({
        userInfo: rest
    })

8.修改数组类型数据

更改list,新增数组元素

第一种方法
updateList () {
        this.data.list.push(4)
        this.setData({
            list: this.data.list
        })
    }
    第二种方法
     updateList () {
        const newList = this.data.list.concat(4)
        this.setData({
            list: newList
        })
    }
    第三种方法
updateList () {
        const newList = [...this.data.list, 4]
        this.setData({
            list: newList
        })
    }

修改数组元素

this.setData({
//将数组的第一个元素中的name改为jerry
         'list[0].name': 'jerry'
     })

删除数组元素

第一种
this.data.list.splice(1,1)
    this.setData({
        list: this.data.list
    })
    第二种
    const newList = this.data.list.filter(item => item !== 2)
    this.setData({
        list: newList
    })
9.建议双向数据绑定

数据能影响页面,页面也能影响数据

<input model:value="{{value}}" />

注意事项:
只能是单一字段绑定,不能拼接
不能写data路径,也不支持数组和对象

10.列表渲染-基本使用

指通过循环遍历一个数组或对象,将其中的每个元素渲染到页面上。
在组件上用wx:for绑定数组或对象,重复渲染当前组件
每一项的变量名默认为item,下表变量名默认为index
要加上wx:key属性,一两种形式提供:

  1. 字符串
  2. 保留关键字*this
    在这里插入图片描述
    注意事项:
    如果不加wx:key会报错
    在给wx:key加属性值时,不用双大括号语法,直接用遍历的array中item的某个属性
<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }} </view>

<view wx:for="{{ fruitList }}" wx:key="index">{{ item.name }} </view>

<view wx:for="{{ fruitList }}" wx:key="*this">{{ item.name }} </view>

网站公告

今日签到

点亮在社区的每一天
去签到