从零开始学微信小程序开发：2

第三章  快速开发UI界面

     目前提供8累24中基础组件，还会增加新的组件

3.1 认识组件

     提供了视图容器组件、基础内容组件、表单组件、操作反馈组件、导航组件、媒体组件、地图组件、画布组件等8类组件。

     组件是对HTML5元素的封装。

     组件的通用属性：

          id属性：字符串类型，唯一标示

          class属性：字符串类型，设置组件的样式类。如果与动态数据绑定相结合，具有动态变换的能力。

          style属性：字符串类型，设置组件的内联样式。

          hidden属性：逻辑值，是否显示

          data-*属性：可为任何类型，设置自定义属性值。当绑定的事件触发时，作为参数发送给事件处理函数，通过传入参数对象currentTarget.dataset方式来获取自定义属性的值。

          bind*/catch*属性：为组件定义事件的。如bindtap绑定触摸按下事件

3.2 加法计算器

      view组件：一个容器组件，所谓容器组件是指可在其中放置其他组件，当然也可使用view组件显示具体文字内容。

      input组件：用户输入的组件，接收text, number, idcard, digit, time, date等类型的数据。常用的属性有：

           value属性（输入框的内容）、password属性（是否为密码框），placeholder属性（提示信息）

           disabled属性（是否禁用）、maxlength属性（输入字符的最大长度），bindchange属性（失去焦点时，将触发bindchange事件）    

      button组件：常用的属性有size,type,plain,disabled,loading等几个

      计算机器UI：

            在pages目录下新建一个名为calc的目录

            app.js添加calc页面

                   "page/calc/calc"

            calc.json设置页面参数

{
    "navigationBarBackgroundColor": "#00ff00",
    "navigationBarTitleText": "加法计算器",
    "navigationBarTextStyle": "white"
}

             calc.wxml

<view class="container">
    <input placeholder="被加数" bindinput="bindInput1"/>
    <input placeholder="加数" bindinput="bindInput2"/>
    <button type="primary" bindtap="bindAdd">计算</button>
    <input placeholder="结果" value="{{result}}" disabled/>
</view>

              calc.wxss

.container {
    justify-content: flex-start;
    padding: 30rpx 0;
}


.container input {
    background-color: #eee;
    border-radius: 3px;
    text-align: left;
    width: 720rpx;
    height: 100rpx;
    line-height: 100rpx;
    margin:20rpx
}


.container button {
    width:80%;
}

            calc.json

  data: {
     num1:"",
     num2:"",
     result:""
  },
  //
  bindAdd:function(e) {
    var r = this.data.num1 * 1 + this.data.num2*1;
    this.setData({result:r});
  },
  //
  bindInput1:function(e) {
    var n=e.detail.value;
    if (!isNaN(n)) {
      this.setData({num1:n});
    }
  },
  //
  bindInput2: function (e) {
    var n = e.detail.value;
    if (!isNaN(n)) {
      this.setData({ num2: n });
    }
  },

3.3 另一种输入数据的方式

      slider组件：滑动条组件，通过拖动这个组件的滑块，可以设置一个值

      常见属性：

• min：组件的最小值
• max：组件的最大值
• step：步长值
• value：组件的当前值
• Show-value：是否在右侧显示当前值
• bindchange：操作完成时触发，通过event.detail.value传递值。