第一 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）能查看历史数据