03-WxApp数据绑定与事件对象

1. swiper滑块视图容器

容器提供滑动功能，容器里面的内容可以灵活丰富。因为可以滑动，所以在这基础上，可以构建相应展示服务，文字，图片，按钮等。

1. 容器的宽度与高度在swiper中设定
2. swiper-item同时也可以当容器使用，在里面丰富内容。

1.1 指示点

indicator-dots

还有滑块的间隔事件，滑动方向等，具体属性可以看文档。文档说明中有些看不懂的，可以自己去试一试,通过尝试来提高理解。

2. 垂直布局

在分析页面布局时，应该从整体上来分析，整个元素的大致走向。

1. 可以充分利用弹性盒子模型flex 并且弹性盒子模型是可以嵌套的。
2. css的充分表达，需要html元素骨架的正确构建。
3. 图片与文字的在同一行的垂直居中，vertical-align: middle;第二种方法，通过使用 弹性盒子模型（在父容器中设置，以便对子元素产生效果）

   display: flex;
   flex-direction: row;
   align-items: center;
   

4. 标题颜色用#333,显得不是那么黑，正文颜色#666

   color: #333;
   letter-spacing: 2rpx; 
   

3. 图片的路径

1. 相对路径
2. 绝对路径

4. 页面生命周期

Page对象的封装处理，真的很轻便简洁

1. onLoad 监听页面加载
   1. 从服务器获取数据
2. onShow 监听页面显示
3. onReady 监听页面数据渲染完成
4. onHide 监听页面隐藏
5. onUnload 监听页面卸载

4.1 页面的其他三个重要方法

1. onPullDownRefresh 监听用户下拉动作
2. onShareAppMessage 用户点击右上角分享
3. onReachBottom 页面上拉触底事件
   1. 如：分页加载更多内容

5. 数据传输

本次的数据传输是指，从javascript中数据如何传递给wxml进行处理。在wxss中平台是默认使用了改文件，wxml不需要导入，那么js文件中获取的数据呢？— ---答案就是： 数据绑定

1. 网页中是通过获取DOM节点，然后通过该节点来设置值；而小程序中采用了数据绑定（vue，AngularJS框架等也是用了数据优先的思想），数据在JS到WXML，这是单向数据绑定（自动）。js中data是数据绑定的中转站,在wxml中通过{{}}；来取值。

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

2. 从服务器中加载的数据需要放到中转站data中，通过this.setData({})
3. wxml中{{}}能进行简单的运算，支持对象展开 文档->更多关于数据绑定的知识

5.1 boolean属性数据绑定

boolean作为属性时

<swiper vertical="false" >还是为true</swiper>
<swiper vertical="{{false}}" >为false</swiper>

6. 列表循环渲染

1. wx:for="{{数据容器}}"遍历的数据集
2. wx:for-item="item"循环中的单个元素，默认为item
3. wx:for-index="index"遍历时的数据索引下标

7. 用户行为交互-事件机制

无论在web浏览器，还是在小程序中系统都会产生内部的事件，通过系统触发产生的事件，我们需要进行捕获（即on，监听，在小程序中用bind，或者catch来捕获），然后传入回调函数，在回调函数中处理我们要实现的逻辑。
在web浏览器中，用户是通过鼠标与应用程序 进行交互，但是小程序中是通过手指的触控，虽然交互方式不一样，但是其背后系统产生相应的触发事件，都是一样的。

1. 手指触摸tap

bind不能阻止自元素的事件冒泡，catch 可以阻止子元素的事件冒泡，如，自元素监听一个事件，其外围的父容器也监听了这个事件，如果是触发在子元素上，通过阻止事件冒泡，则父元素就监听不到该事件的触发。

2. 在捕获事件之后，会触发回调函数，那么如何在触发回调函数的时候，携带一些信息参数呢？如点击列表下面的文章标题，然后进入到这篇文章的详情页，这时候需要携带ID唯一标识符这样的信息。目前见到的不是将ID直接传入回调函数，而是作为属性放到组件中，如data-postId,这个属性在js中的回调函数的event参数中的event.currentTarget.dataset.postId(自定义的属性名称)

8. 小程序Page页面之间的羁绊

从一个页面跳转到另外一个页面，微信小程序平台提供了wx.navigateToAPI，具体到传递参数，通过看文档以及实战经验之后，再回来补充

wx.redirectTo与wx.navigateTo方法的调用会分别出发Page生命周期的方法onUpload与onHide

---

我们程序开发者，在使用语言的时候，既要通过语言让我们和软件系统，硬件系统打交道，还需要考虑到用户对我们开发的系统打交道，我们开发者处于一个中间模式，要让用户的表达方式，在我们的帮助下，来轻松便捷的与系统进行有效的沟通，让碳水化合去和金属元素的世界产生连接，这是我们的担当，也是我们崇高的责任：打造有机无机虚拟现实的命运共同体。