复习第四天

一、小程序的通讯模型
主体：
① WXML 模板和 WXSS 样式工作在渲染层
② JS 脚本工作在逻辑层
含义：
① 渲染层和逻辑层之间的通信（由微信客户端进行转发）
② 逻辑层和第三方服务器之间的通信（由微信客户端进行转发)
运行机制：
小程序启动的过程五部：

① 把小程序的代码包下载到本地
② 解析 app.json 全局配置文件
③ 执行 app.js 小程序入口文件，调用 App() 创建小程序实例
④ 渲染小程序首页
⑤ 小程序启动完成

页面渲染过程四步：

① 加载解析页面的 .json 配置文件
② 加载页面的 .wxml 模板和 .wxss 样式
③ 执行页面的 .js 文件，调用 Page() 创建页面实例
④ 页面渲染完成

二、微信小程序如何定义事件
1、定义事件

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

2、page里写上函数

Page({
  tapName: function(event) {
    console.log(event)
  }
})

3、查看log

三、微信小程序如何传参
1、dataset对象，意义在于给虚拟 dom 绑定上 data-自定义键=“值”的这种属性

<view wx:for-index="index" wx:for-item="item" wx:for="{{list}}"
 bindtap="bindtap" data-id="{{item.id}}"></view>

2、事件对象
事件函数都默认拥有一个形参，实参为事件对象。

 bindtap(e){
    //e 为事件对象
    console.log(e)
  },

3、目标对象
currentTarget 属性，指的是事件对象下的一个对象，点开控制台就能看到 currentTarget属性
这里引用张图片

它就是当前触发事件的目标对象，那么获取到当前触发事件的目标对象之后，我们就可以通过它获取它身上的一些信息，例如：dataset 对象。
我们打印下 dataset 对象：会显示{id：292}
可以看到，我们已经拿到了当前点击元素身上绑定的 data-id 的值了，也正是我们想要得到的值。