微信小程序 加法计算器

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

3、 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>

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":"加法计算器", "navigationBarTextStyle":"white", "usingComponents": {} }

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

/**

• 页面的初始数据 / 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 }); } } })