微信小程序学习笔记

一、简介

1、组件

• 视图容器

1. view
   • 普通视图区域
   • 类似于 HTML 中的 div，是一个块级元素
   • 常用来实现页面的布局效果
2. scroll-view
   • 可滚动的视图区域
   • 常用来实现滚动列表的效果
3. swiper 和 swiper-item
   • 轮播图容器组件和轮播图 item 组件

• 基础内容
• 表单组件
• 导航组件
• 媒体组件
• map 地图组件
• canvas 画布组件
• 开放能力
• 无障碍访问

---

2、API

• 事件监听 API
  • 特点：以 on 开头，用来监听某些事件的触发
  • 举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
• 同步 API
  • 特点1：以 Sync 结尾的 API 都是同步 API
  • 特点2：同步 API 的执行结果。可以通过函数返回值直接获取，如果执行出错会抛出异常
  • 举例: wx.setStorageSync('key', 'value') 向本地存储中写入内容
• 异步 API
  • 特点：类似于 jQuery 中的 $.ajax(option) 函数，需要通过 success、fail、complete 接收回调的结果
  • 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据

---

二、WXML 模板语法

1、数据绑定

• 数据绑定的基本原则

  1. 在 data 中定义数据

  2. 在 WXML 中使用数据

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

     {{要绑定的数据名称}}

• Mustache 语法的使用场景

  1. 绑定内容
  2. 绑定属性

  demo.js

  Page({
  	data: {
  		src: 'www.baidu.com'
  	}
  })
  

  demo.wxml

  <image src="{{ src }}">image>
  

  3. 运算（三元运算、算术运算等）

  demo.js

  Page({
  	data: {
  		randomNum: Math.random()*10 // 生成 10 以内的随机数
  	}
  })
  

  deom.wxml

  <view>{{ randomNum >= 5 ? '随机数字大于或等于5' : '随机数小于5' }}view>
  

2、事件绑定

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

2.2.1 小程序中常用的事件

类型	绑定方式	事件描述
tap	bindtap 或 band:tap	手指触摸后马上离开，类似于 HTML 中的
input	bindinput 或 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

2.2.2 事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下所示

2.2.3 target 和 currentTarget 的区别

target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。

点击内部的按钮，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。

此时，对于外层的 view 来说：

• e.target 指向的是触发事件得到源头组件，因此，e.target 是内部的按钮组件
• e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

2.2.4 bindtap 的语法格式

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

1. 通过 bindtap，可以为组件绑定 tap 触摸事件

   <button type="primary" bindtap="btnHandle">按钮button>
   

2. 在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event （一般简写成 e）来接受

   Page({
       // 定义按钮的事件处理函数
       btnHandle(e) {
           // 事件对象 event
           console.log(e);
           // 获取自定义属性（参数）
           console.log(e.target.dataset.val);
   	}
   })
   

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

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

Page({
    data: {
        count: 0
    }
    // 修改 count 的值
    changeCount() {
    	this.setData({
            count: this.data.count + 1
        })
	}
})

2.2.6 事件传参

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

如果不使用 Mustache 语法（双大括号），参数 2 会被解析为字符串格式
<button type="primary" bindtap="btnHandle" data-val="{{2}}">事件传参button>

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

在事件处理函数中，通过 event.target.dataset.参数名 来获取到具体参数的值

btnHandle(e) {
    // 获取自定义属性（参数）val
    console.log(e.target.dataset.val);
}

2.2.7 bindinput 的语法格式

在小程序中，通过 input 事件来响应文本框的输入事件

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

   <input bindinput="inputHandle" type="text"/>
   

2. 在页面的 .js 文件中定义对应的事件处理函数

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

2.2.8 实现文本框和 data 之间的数据同步（双向数据绑定）

实现思路：

1. 先将文本框的内容和 data 的 msg 进行动态绑定
2. 监听文本框输入事件，通过 this.setData() 将文本框的最新值（event.detail.value）赋给 msg

具体步骤：

1. 定义数据

   Page({
       data: {
           msg: '你好'
       }
   })
   

2. 渲染结构

3. 绑定 input 事件处理函数

   inputHandle(e) {
       this.setData({
           // 通过 e.detail.value 获取文本框最新的值
           msg: e.detail.value	
       })
   }
   

3、条件渲染

2.3.1 wx:if

在小程序中，使用 wx:if="{{ condition }}" 来判断是否需要渲染该代码块

<view wx:if="{{ condition }}">Trueview>

也可以使用 wx:elif 和 wx:else 来添加判断

<view wx:if="{{ type === 1 }}">男view>
<view wx:elif="{{ type === 2 }}">女view>
<view wx:else>保密view>

2.3.2 结合 标签使用 wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个 标签将多个组件包装起来，并在 标签上使用 wx:if 控制属性。 标签只起包裹作用，不参与页面渲染，相当于 vue 中的