微信小程序学习之模板与配置

一.WXML模板语法

1.数据绑定的基本原则

1. 在data中定义数据
2. 在WXML中使用数据

2.在data中定义数据

在页面对应的.js文件中，把数据定义到data对象中。

3.Mustache语法的格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。

4.Mustache语法的应用场景

1. 绑定内容
2. 绑定属性
3. 运算（三元运算、算数运算等）

使用效果：wxml文件：

{{info}}

{{randomNum1 >= 5 ? '数字大于或等于5':'数字小于5'}}
{{randomNum2*100}}

 .js文件：

Page({
    data: {
        info:'hello world',
        imgSrc:'https://img-home.csdnimg.cn/images/20221009091924.jpg',
        randomNum1:Math.random()*10,
        randomNum2:Math.random().toFixed(2)
    }
}) 

运行结果图：

 5.事件

事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

 6.小程序中常用的事件

 7.事件对象的属性列表

 8.target和currentTarget的区别

 9.bindtap的语法格式

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

 10.在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，实例如下：

//wxml文件
按钮
+1

//.js文件
Page({
    data: {
        info:'hello world',
        imgSrc:'https://img-home.csdnimg.cn/images/20221009091924.jpg',
        randomNum1:Math.random()*10,
        randomNum2:Math.random().toFixed(2),
        count:0
    },
    //定义按钮的事件处理函数
    btnTapHandler(e){
      console.log(e)
    },
    CountChange(){
      this.setData({
        count:this.data.count+1
      })
    }
}) 

 使用效果：

点击+1按钮，count进行+1操作： 

 11.事件传参

小程序中的事件传参比较特殊，不能再绑定事件的同时为事件处理函数传递参数。错误示例：

事件传参

 可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，实例如下：

事件传参

 完成实例代码：

//wxml文件
按钮
+1
+2

//.js文件
Page({
    data: {
        info:'hello world',
        imgSrc:'https://img-home.csdnimg.cn/images/20221009091924.jpg',
        randomNum1:Math.random()*10,
        randomNum2:Math.random().toFixed(2),
        count:0
    },
    //定义按钮的事件处理函数
    btnTapHandler(e){
      console.log(e)
    },
    CountChange(){
      this.setData({
        count:this.data.count+1
      })
    },
    btnTap1(e){
      this.setData({
        count:this.data.count+e.target.dataset.info
      })
    }
}) 

 12.bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：

 13.实现文本框和data之间的数据同步

实现步骤：

1. 定义数据
2. 渲染结构
3. 美化样式
4. 绑定input事件处理函数

 实例（根据输入值，实时改变msg值）：

//wxml文件
按钮
+1
+2


//wxss文件
  input{
    border: 1px solid #eee;
    margin: 5px;
    padding: 5px;
    border-radius: 3px;
  }

//.js文件

Page({
    data: {
        info:'hello world',
        imgSrc:'https://img-home.csdnimg.cn/images/20221009091924.jpg',
        randomNum1:Math.random()*10,
        randomNum2:Math.random().toFixed(2),
        count:0,
        msg:'你好，'
    },
    //定义按钮的事件处理函数
    btnTapHandler(e){
      console.log(e)
    },
    CountChange(){
      this.setData({
        count:this.data.count+1
      })
    },
    btnTap1(e){
      this.setData({
        count:this.data.count+e.target.dataset.info
      })
    },
    inputHandler(e){
      // console.log(e.detail.value)
      this.setData({
        msg: e.detail.value
      })
    },
})