小实战——加法计算器
在【app.json】文件下添加计算器页面："pages": ["pages/calc/calc",//新建计算器页面"pages/index/index","pages/logs/logs"]
注意：页面默认显示pages[0]，现在即新增的计算器页面。
若第一步完成后系统没有在pages文件夹下自动创建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>
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;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});}}})
