微信小程序数据交互

目录

微信小程序事件绑定

1.事件类别

2.事件绑定

3.接收参数

---

微信小程序事件绑定

1.事件类别

bindtap	点击事件
bindinput	输入事件
longtap	长按事件
touchstart	触摸开始
touchend	触摸结束
touchcansce	取消触摸

  小程序绑值

     1.单向绑定 M --> V
                                       setData 
     2.单向绑定其实绑定的是M的一个副本M--------->副本-->V

     注1：小程序中请求处理方法是不能传递参数，正确方式：通过data-xxx属性传递参数，再通过事件源获得参数
          错误
          <button bindtap="handletap(-1)"
          正确
          <button bindtap="handletap" data-number="{{-1}}"

          正解：传递固定值-1 
                data-number="{{-1}}"
                还可以绑值
                data-number="{{n}}" 

                再从事件对象中获取
                 e.currentTarget.dataset.number
          

     注2：在微信小程序中，js的数据和前端显示的数据是单数据流。
          即js里边的数据变了，前端能立刻显示，但如果前端数据变了，js不能改变，怎么办呢！

          我们可以通过bindinput方法，来实现双向数据绑定。

 

          原理：我们使用bindinput事件来获取input的输入值，然后根据dataset获取要跟 data数组里的对象进行数据绑定
          具体写法
                  1.在data中定义dataList属性，并在其中定义要双向绑定的属性名
                  2.定义bindInput方法
                  3.<input class="input" bindinput="bindInput" data-name="realName" placeholder="请输入帐号" auto-focus/>
            bindInput(e) {
              console.log("bindInput");
                //debugger
                //表单双向数据绑定
              var that = this;
              var dataset = e.target.dataset;
              // data-开头的是自定义属性，可以通过dataset获取到，dataset是一个json对象
              var name = dataset.name;
              var value = e.detail.value;

              //小问题：规则接收数据属性只能叫dataList
              that.data.dataList[name] = value; //逻辑层数据的更改
              // 拼接对象属性名，用于为对象属性赋值
              var attributeName = "dataList." + name;
              that.setData({//视图层数据的更改
                [attributeName]: value
              });
              console.log(that.data.dataList);
            }
    

2.事件绑定

     bind绑定；
     catch绑定；（能阻止事件冒泡）
     例如：绑定点击事件 bindtap
     page.wxml 文件

3.接收参数

     Page({
          onLoad: function(options) {
            //小程序Data的赋值必须使用setData方法，错误：this.Data.title='xxx'; 
            this.setData({
              title: options.title
            })
          }
        })