微信小程序快速入门 个人学习心得（一）

1、关于界面层的数据绑定

1.1 数据在哪里

数据在当前页面（xxxx.js）对象中data属性中。

1.2 绑定到哪里

想在哪里用就在哪里用，用 {{ }} 语法形式输出

2、关于列表渲染

在当前页面(xxxx.js)中的data属性中定义一个对象数组

然后在对应xxxx.wxml中

这样就可以有如下显示

但是，这样代码繁琐，我们可以用wx:for方式动态获取：

这里item代表当前页面被遍历元素，可以使用wx:for-item来给当前被遍历元素起别名

3、关于事件

基本事件的使用就是通过给组件添加一个 “bind +事件名” 的属性，属性的值指向一个定义在当前页面对象中的js方法。即：

<button bindtap="buttonTapHandle">点我</button>

其中bind+事件 为bindtap，指定方法为buttonTapHandle


事件冒泡就是点击蓝色的时候也相当于点击了红色，因为蓝色是在红色的内部，有些时候我们需要阻止冒泡。可以使用catch+事件名

事件传参



数据流
从后到前是可以通过{{}}来进行传值

  <view class="container">
    <input value="{{message}}" bindinput="inputHandle"/>
    <text>{{message}}</text>
  </view>

从前到后则是通过监听输入事件，然后通过setData传值

  inputHandle: function(e){
      this.setData({
        message:e.detail.value
      })
  }

4、一个简单的登录案例

这是要完成的页面，我们主要是进行逻辑的代码编写

首先
需要设计数据结构，也就是js中的data属性
根据页面可以知道，我们需要一个用户名和一个密码属性

然后
需要将数据绑定到指定元素（使用**{{}}**），给按钮添加点击事件，并写相对应逻辑

因为对用户名和密码的判断函数相似，我们可以把它抽象出来。
值得注意的是，小程序中不可以自己定义传递参数，想要传递参数的话需要借助DataSet。
在知道属性名称的时候可以通过 xxxx.属性名去取值，当不知道的时候通过xxxx[对象名]去取值。


通过dataset去拿我们自定义的属性（约定前后名称一样），target是触发当前事件的对象。

from表单组件
表单中想要被提交的属性必须有name属性，还需要有一个提交按钮。

5、条件渲染

使用wx:if