⼩程序学习记录（⼀）⼩实战——加法计算器⼩实战——加法计算器
1. 在【app.json】⽂件下添加计算器页⾯：
"pages":[
"pages/calc/calc",//新建计算器页⾯
"pages/index/index",
"pages/logs/logs"
]
注意：页⾯默认显⽰pages[0]，现在即新增的计算器页⾯。
2. 若第⼀步完成后系统没有在pages⽂件夹下⾃动创建calc⽬录，则⼿动新建：
3. 编写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>
placeholder属性：当输⼊框为空时显⽰的内容
bindinput属性：绑定输⼊函数，即有输⼊时调⽤bindInput1函数bindtap属性：绑定点击函数，即点击按钮时调⽤bindAdd函数value属性：绑定变量为result
disabled属性：使输⼊框不能输⼊
calc.wxss：对页⾯UI美化、设置控件的属性、整体页⾯布局等
.container{
justify-content: flex-start;
padding:30rpx 0;
}
.container input{
background-color: #eee;
border-radius:3px;
text-align: left;
input标签placeholder属性
width:720rpx;
height:100rpx;
line-height:100rpx;
margin:20rpx;
}
.container button{
width:80%;
}
calc.js：页⾯的逻辑实现，如点击、输⼊事件等
Page({
/**
* 页⾯的初始数据
*/
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
});
}
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。