微信小程序之简易计算器的制作

微信小程序之简易计算器的制作

文章目录

• • 绪论
  • 一.计算器前端界面设计
  • 二.计算器逻辑部分设计

微信小程序课程领取：

播放地址：
笔记资料：

需要笔记资料配套视频加老师微信：JL1714873054

绪论

   小程序的计算器简易制作我们将分为两个部分来讲解

1. 前端展示界面
2. 后台逻辑设计

一.计算器前端界面设计

我们准备利用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
})}})