微信小程序笔记基础篇

介绍

结构

组成结构

app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等Demo项目里边的app.json 配置内容如下:

事件属性

bingtap的语法格式

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

• 通过 bindtap，可以为组件绑定 tap 触摸事件，语法如下:

<button type="primary" bingtap="eventFunction">按钮</button>

• 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event 来接收:

Page({
  eventFunction(event){//按钮tap事件处理函数
    //事件参数对象event
  }
})

在.js中修改data中的参数可以用 this.setData({})方法

dataChange(){
  this.setData({
    count: this.data.count + 1
})
}

事件传参

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

<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>

参数解析

• info 会被解析为参数的名字
• 数值2会被解析为参数的值

事件接受参数

在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下

btnHandler(event) {
// dataset 是一个对象，包含了所有通过 data-* 传递过来的参数项
console.log(event.target.dataset)
// 通过 dataset 可以访问到具体参数的值
console.log(event.target.dataset.info)
}

传参注意：若想接受数值类型用{{}}语法，不然直接""传参就是字符串类型

bindinput的语法格式

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

• 通过 bindinput，可以为文本框绑定输入事件

<input bindinput="inputHandler"><input>

• 在页面的js 文件中定义事件处理函数

inputHandler(e) {
  // e.detail.value 是变化过后，文本框最新的值
  console.log(e.detail.value)
}

微信中动态绑定用 value="{{}}" 方法

input value="{{msg}}" bindinput="inputHandler"></input>