微信小程序开发UI组件

第一  view和input和button组件

1.UI组件的通用属性

（1）id       唯一标识

（2）class 　　设置组件的样式类

（3）style　　设置组件的内联样式

（4）hidden　　设置组件的显示和隐藏

（5）data-　　设置发送给事件的参数

（6）bind/catch　　绑定事件

2.input组件的属性

（1）value　　值

（2）password　　是否是密码框

（3）placeholder　　提示信息

（4）disabled　　是否禁用

（5）maxlength　　最大输入长度

（6）bindchange　　输入框的事件绑定，当失去焦点时触发，使用event.detail.value获取输入值

3.button组件的属性

（1）size　　包括default和mini

（2）type　　包括default和primary和warn

（3）plain　　设置是否镂空

（4）disabled　　设置是否禁用

（5）loading　　是否显示图标

4.slide组件的属性

（1）min　　最小值

（2）max　　最大值

（3）step　　步长值

（4）value　　当前值

（5）show-value　　是否在组件右侧显示当前值

（6）bindchange　　组件操作完成时触发，使用event.detail.value获取当前值

例如：使用input输入框实现简单加法器

需求：

（1）在input输入框输入被加数和加数

（2）点击计算按钮显示计算结果

代码如下：

app.json

{
  "pages":[
    "pages/simpleCaculator/simpleCaculator"
  ],
  "window":{
    "backgroundColor":"#000000",
    "backgroundTextStyle":"light",
    "enablePullDownRefresh":true,
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText": "简单计算器",
    "navigationBarTextStyle":"black"
  },
  "networkTimeout":{
    "connectedSocket":10000,
    "request":10000,
    "downloadFile":10000,
    "uploadFile":10000
  }
}

　　

simpleCaculator.json

{
  "backgroundColor": "#00ff00",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true,
  "navigationBarBackgroundColor": "#ff0000",
  "navigationBarTitleText": "简单计算器",
  "navigationBarTextStyle": "black"
}

　　

simpleCaculator.js

var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "addNumValue1":"",
    "addNumValue2":"",
    "result":0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /**
   * 处理被加数的事件绑定
   */
  handleAddNumValue1: function(event){
    var addNumValue1 = event.detail.value;
    if(!isNaN(addNumValue1)){
      this.setData({ "addNumValue1": addNumValue1 })
    }
  },

  /**
   * 处理加数的事件绑定
   */
  handleAddNumValue2: function (event) {
    var addNumValue2 = event.detail.value;
    if(!isNaN(addNumValue2)){
      this.setData({ "addNumValue2": addNumValue2 })
    }
  },

  /**
   * 显示计算结果
   */
  showcaculatorResult: function(event){
    console.log(event)
    var addNumValue1 = this.data.addNumValue1
    var addNumValue2 = this.data.addNumValue2
    var result = addNumValue1 * 1 + addNumValue2 * 1
    this.setData({"result": result});
  }
})

　　

simpleCaculator.wxml

<view class="container">
  <view class='add-num'>
    <input class='add-num-input' value='{{addNumValue1}}' placeholder='请输入被加数' maxlength='8' bindblur='handleAddNumValue1'></input>
  </view>
  <view class='add-num'>
    <input class='add-num-input' value='{{addNumValue2}}' placeholder='请输入加数' maxlength='8' bindblur='handleAddNumValue2'></input>
  </view>
  <view class='result-get'>
    <button class='result-get-button' size='default' type='primary' catchtap='showcaculatorResult'>计算</button>
  </view>
  <view class='result'>
    <view class='result-text'>{{result}}</view>
  </view>
</view>

　　

simpleCaculator.wxss

.container{
  padding: 4rpx;
}
.add-num{
  width: 100%;
  padding-left: 20rpx;
  padding-right: 20rpx;
}
.add-num-input{
  width: 100%;
  height: 96rpx;
  border-bottom: 2rpx solid gray;
  text-align: right;
}
.result-get{
  width: 100%;
}
.result-get-button{
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
}
.result{
  width: 100%;
  background: gray;
  padding-left: 20rpx;
  padding-right: 20rpx;
  border: 2rpx solid gray;
  border-radius: 10rpx;
}
.result-text{
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  text-align: right;
  vertical-align: 96rpx;
}

　　

例如：使用slide组件实现简单加法器

需求：

（1）使用slide组件调整被加数和加数

（2）点击计算按钮显示计算结果

代码如下：

app.json

{
  "pages":[
    "pages/caculator/caculator"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "滑块简单计算器",
    "navigationBarTextStyle":"black"
  }
}

　　

caculator.json

{
  "backgroundColor": "#00ff00",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true,
  "navigationBarBackgroundColor": "#ff0000",
  "navigationBarTitleText": "滑块简单计算器",
  "navigationBarTextStyle": "black"
}

　　

caculator.js

var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "addNumValue1": "",
    "addNumValue2": "",
    "result": 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /**
   * 处理被加数的事件绑定
   */
  handleAddNumValue1: function (event) {
    var addNumValue1 = event.detail.value;
    if (!isNaN(addNumValue1)) {
      this.setData({ "addNumValue1": addNumValue1 })
    }
  },

  /**
   * 处理加数的事件绑定
   */
  handleAddNumValue2: function (event) {
    var addNumValue2 = event.detail.value;
    if (!isNaN(addNumValue2)) {
      this.setData({ "addNumValue2": addNumValue2 })
    }
  },

  /**
   * 显示计算结果
   */
  showcaculatorResult: function (event) {
    console.log(event)
    var addNumValue1 = this.data.addNumValue1
    var addNumValue2 = this.data.addNumValue2
    var result = addNumValue1 * 1 + addNumValue2 * 1
    this.setData({ "result": result });
  }
})

　　

caculator.wxml

<view class="container">
  <view class='add-num'>
    <slider min='0' max='99999999' step='1' value='{{addNumValue1}}' show-value bindchange='handleAddNumValue1'></slider>
  </view>
  <view class='add-num'>
    <slider min='0' max='99999999' step='1' value='{{addNumValue2}}' show-value bindchange='handleAddNumValue2'></slider>
  </view>
  <view class='result-get'>
    <button class='result-get-button' size='default' type='primary' catchtap='showcaculatorResult'>计算</button>
  </view>
  <view class='result'>
    <view class='result-text'>{{result}}</view>
  </view>
</view>

　　

caculator.wxss

.container{
  padding: 4rpx;
}
.add-num{
  width: 100%;
  padding-left: 20rpx;
  padding-right: 20rpx;
}
.add-num-input{
  width: 100%;
  height: 96rpx;
  border-bottom: 2rpx solid gray;
  text-align: right;
}
.result-get{
  width: 100%;
}
.result-get-button{
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
}
.result{
  width: 100%;
  background: gray;
  padding-left: 20rpx;
  padding-right: 20rpx;
  border: 2rpx solid gray;
  border-radius: 10rpx;
}
.result-text{
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  text-align: right;
  vertical-align: 96rpx;
}

　　

运行结果：

4.icon组件的类型

<icon type="图标类型" size="图标大小" color="图标颜色"/>

type：指定icon的类型，有success，info，warn，waiting，safe_success，safe_warn， success_circle，success_no_circle， waiting_circle，circle， download，info_circle，cancel，cancel，search，clear

size：指定图标的大小，单位为px

color：指定图标的颜色

例如：实现复杂的计算器

需求：

（1）能进行加减乘除四则运算

（2）能进行负数运算

（3）能进行小数运算

（4）输入过程中可以删除最后一位

（5）能清楚输入的数据

（6）能查看历史数据