1、新建目錄calc
2、pages加上
"pages/calc/calc",

3、 calc.wxml

<view class="container">
<input placeholder="被加數(shù)" bindinput="bindInput1" />
<input placeholder="加數(shù)" bindinput="bindInput2" />
<button type="primary" bindtap="bindAdd">計(jì)算</button>
<input placeholder="結(jié)果" value="{{result}}" disabled />
</view>

4、calc.wxss
/* pages/calc/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%;
}

5、calc.json
{
"navigationBarBackgroundColor":"#00ff00",
"navigationBarTitleText":"加法計(jì)算器",
"navigationBarTextStyle":"white",
"usingComponents": {}
}

6、calc.js
// pages/calc/calc.js
Page({

/**

• 頁面的初始數(shù)據(jù)
  /
  data: {
  num1:"",
  num2:"",
  result:""
  },
  bindAdd:function(e){
  var r=this.data.num11+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
  });
  }
  }
  })

image.png