笔记资料:
绪论
小程序的计算器简易制作我们将分为两个部分来讲解
- 前端展示界面
- 后台逻辑设计
一.计算器前端界面设计
我们准备利用input
组件,view
组件完成我们的界面设计
<input placeholder="请输入数字A" bindinput="dataA"></input> <view>+</view> <input placeholder="请输入数字B" bindinput="dataB"></input> <view>=</view>
我们的求和结果进行数据绑定
<view>{{sumALL}}</view>
以上我们完成了计算器的前端界面设计,非常简陋,同时写了两个事件,dataA
和dataB
,接下来完善我们的逻辑部分:
二.计算器逻辑部分设计
page({ //设置全局变量 let a=0; let b=0; dataA(e){ console.log("获取A的值",e.detail.value) a=e.detail.value }, dataB(e){ console.log("获取B的值",e.detail.value) b=e.detail.value }, sum(){ let x=parseInt(a);//把字符串的a值转化成整数 let y=parseInt(b); } })
对于求和部分怎么办呢?我们需要用到一个动态的固定绑定值
,用求和事件将它包起来:
this.setData({ sumALL:x+y })
完整版代码JS
部分:
page({ //设置全局变量 let a=0; let b=0; dataA(e){ console.log("获取A的值",e.detail.value) a=e.detail.value }, dataB(e){ console.log("获取B的值",e.detail.value) b=e.detail.value }, sum(){ let x=parseInt(a);//把字符串的a值转化成整数 let y=parseInt(b); this.setData({ sumALL:x+y }) } })