事件、页面跳转、wxml语法——微信小程序学习笔记

发布于：2025-03-20 ⋅ 阅读:(22) ⋅ 点赞:(0)

1. 事件

1.1 事件绑定

<!--pages/infoPage/infoPage.wxml-->

<button type="primary" bind:tap="childrenClicked">子按钮</button>
// pages/infoPage/infoPage.js

Page({

    childrenClicked(){
        console.log("childrenClicked")
    }
})

1.2 事件冒泡

<!--pages/infoPage/infoPage.wxml-->

<view class="parentContainer" style="background-color: burlywood;" bind:tap="parentClicked">
    <button type="primary" bind:tap="childrenClicked">子按钮</button>
</view>
// pages/infoPage/infoPage.js

Page({

    parentClicked(){
        console.log("parentClicked")
    },
    childrenClicked(){
        console.log("childrenClicked")
    }
})

点击子按钮，会先执行子按钮“bind:tap”绑定的函数，再执行父控件“bind:tap”绑定的函数，如下图，

也就是此事件传递了下去，称为“事件冒泡”，如果不想传递给父控件，即阻止事件冒泡，使用“catch:tap”进行绑定，即

<!--pages/infoPage/infoPage.wxml-->

<view class="parentContainer" style="background-color: burlywood;" bind:tap="parentClicked">
    <button type="primary" catch:tap="childrenClicked">子按钮</button>
</view>

1.3 事件对象-传参

当绑定了事件后 --》函数都可以接收一个参数 事件对象（event）

    childrenClicked(event) {
        console.log("childrenClicked")
        // 通过打印查看event结构
        console.log(event);
        //获取数据
        var dataset = event.target.dataset;
        console.log("name:" + dataset.name);
        console.log("customName:" + event.mark.customName);
    }

其中，targert 为事件触发者，currentTarget:事件绑定者，当有事件冒泡时，两个值可能不一样。

传参方式

  • data-*
  • mark:自定义属性

2. 页面跳转

2.1 navigator组件跳转（声明式导航）

导航 / navigator

  1. 最基本的跳转 
    <navigator url="/pages/loginPage/loginPage">
    <button type="primary">登录</button>
</navigator>
  2. 更多跳转方式--》open-type属性跳转方式：

    navigate：保存当前页面，跳转到应用内的某个页面，但不能跳到 tabbar 页面；

    redirect：关闭当前页面，跳转到应用内的某个页面，但不能跳到t abbar 页面；

    switchTab：跳转到 tabbar 页面，并关闭其他所有非 tabbar页面；

    reLaunch：关闭所有页面，打开到应用内的某个页面；

    navigateBack：关闭当前页面，返回上一页面或多级页面。(感觉像导航的返回按钮的功能)，如果退回两级页面，delta代码退回的层数，代码这样写

    <navigator open-type="navigateBack" delta="2">返回两级</navigator>

  3. 跳转携带数据

        携带数据的格式是单参数：[url]?[key1]=[val1] 或多参数[url]?[key1]=[val1]&[key2]=[key2]...

        携带参数： 


<!--pages/infoPage/infoPage.wxml-->
<navigator url="/pages/loginPage/loginPage?name=小米&age=12">点击跳转到新页面
</navigator>

        获取参数：

// pages/loginPage/loginPage.js
Page({

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        console.log(options);
    }
 })

 

2.2 js跳转（编程式导航）

比如：

<!--pages/infoPage/infoPage.wxml-->
<button type="primary" bind:tap="switchLoginPage">跳转到登录页</button>
// pages/infoPage/infoPage.js

Page({

    switchLoginPage(){
        wx.navigateTo({
          url: '/pages/loginPage/loginPage',
        })
    }
})

3. wxml 语法

3.1 模版语法

  1.  页面的js中定义一些变量
  2. 在wxml中使用 {{}} 包裹，显示数据
  3. 可以显示变量、算数运算、三元运算和逻辑判断，不能编写js语句或js方法 
    <!--pages/loginPage/loginPage.wxml-->
<view>-------wxml语法------</view>
<view>- 字符串</view>
<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>籍贯：{{postion}}</view>
<view>----------------------</view>
<view>- 对象</view>
<view>名称：{{userInfo.name}}</view>
<view>宽：{{userInfo.width}}</view>
<view>高：{{userInfo.height}}</view>
<view>颜色：{{userInfo.color}}</view>
<view>----------------------</view>
<view>- 数组</view>
<view>狗：{{animalsArr[0]}}</view>
<view>猫：{{animalsArr[1]}}</view>
<view>猴：{{animalsArr[2]}}</view>
<view>----------------------</view>
<view>算数运算：10+20={{10+20}}</view>
<view>三元运算：num>11 {{num>11?'真':'假'}}</view>
<view>逻辑判断：num>11 {{num>11}}</view>


// pages/loginPage/loginPage.js
Page({

    /**
     * 页面的初始数据
     * wxml 中使用的变量，必须放在data中
     */
    data: {
        name:"王小明",
        age:14,
        postion:"河北",
        userInfo:{
            width:100,
            height:200
        },
        animalsArr:["dog","cat","monkey"],
        num:10

    }
})
  4. 如果在js中改变了变量值，想与页面中的一起变化，使用this.setData({key:val}) 
        //改变数据
    onChangeNumVal(){
        this.setData({
            age:this.data.age+1
        })
    },
    //改变对象
    onChangeObjectName(){
        //修改对象值
        // this.setData({
        //     'userInfo.name':"矩形"
        // });
        //增加对象参数值和修改
        //解压赋值
        // const info = {...this.data.userInfo,color:"red",name:"矩形"};
        // this.setData({
        //     userInfo:info
        // });
       //简写 
        const userInfo = {...this.data.userInfo,color:"red",name:"矩形"};
        this.setData({
            userInfo
        });
    },

    //数组
    //增加
    onAddOfArr(){
        // //方法一
        // this.data.animalsArr.push("cow");
        // this.setData({
        //     animalsArr:this.data.animalsArr
        // })
        // //方法二
        // const animalsArr = this.data.animalsArr.concat("sheep");
        // this.setData({
        //     animalsArr
        // })
        //方法三
        const animalsArr = [...this.data.animalsArr,'rabbit'];
        this.setData({
            animalsArr
        })
    },
    //删除
    onDelOfArr(){
        this.data.animalsArr.pop();
        this.setData({
            animalsArr:this.data.animalsArr
        })
    },
    //修改
    onModifyOfArr(){
        this.data.animalsArr[0]="puppy";
        this.setData({
            // animalsArr:this.data.animalsArr
            'animalsArr[0]':"puppy"
        })
    },

3.2 列表渲染

列表渲染 | 微信开放文档

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

## js
goodsList:[{id:'1001',name:'牙膏',price:10},{id:'1002',name:'香皂',price:5},{id:'1003',name:'牛奶',price:50},{id:'1004',name:'八宝粥',price:60}]


## wxml
<view>-----------列表渲染-----------</view>
<view wx:for="{{goodsList}}" wx:key="index">
    <text>{{item.id}}--{{item.name}}--{{item.price}}</text>
</view>
<view>-----------列表渲染-block-----------</view>
<view wx:for="{{goodsList}}" wx:key="index">
    <block>{{item.id}}--{{item.name}}--{{item.price}}</block>
</view>

3.3 条件渲染

3.3.1  wx:if wx:elif wx:else 的简单用法

## js
score:60,

## wxml
<view>
    <input type="text" model:value='{{score}}' style="border: 1px solid #555555;" />
    <text wx:if="{{score>=90&& score<=100}}">优秀</text>
    <text wx:elif="{{score>=80&& score<90}}">良好</text>
    <text wx:elif="{{score>=60&& score<80}}">及格</text>
    <text wx:else>不及格</text>
</view>

 3.3.2  wx:if 与 hidden 的区别

  • wx:if 删除元素
  • hidden 不删除元素（隐藏元素）
<view>
    <!-- <image  src="/img/head.jpg" mode="aspectFit" style="width: 100rpx; height: 100rpx;" hidden="{{isShowImage}}"/> -->
    <image  src="/img/head.jpg" mode="aspectFit" style="width: 100rpx; height: 100rpx;" wx:if="{{isShowImage}}"/>
    <button type="primary" size="mini" bind:tap="onChangeImgVisible">是否显示图片</button>
</view>

网站公告

今日签到

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

热门文章

最新发布