欢迎光临,了解微信小程序开发,就上易用通!

微信小程序实战教程:计算器demo实现及代码逻辑

发布:2017-11-23 17:42浏览: 来源:网络 作者:tianshu

本文有小码哥王维波老师制作,原文地址;由于本文写于老版本开发者工具,所以仅供参考;如有疑问,请优先对照官方开发者工具;第一部分:开始创建项目名称和存放代码位置创建新计算器页面并且设置第一个显示计算器页 ...

 
 
 
本文有小码哥王维波老师制作,原文地址;由于本文写于老版本开发者工具,所以仅供参考;如有疑问,请优先对照官方开发者工具;
第一部分:开始

微信小程序实战教程:计算器demo实现及代码逻辑(图1)

创建项目名称和存放代码位置

微信小程序实战教程:计算器demo实现及代码逻辑(图2)

创建新计算器页面并且设置第一个显示计算器页面

微信小程序实战教程:计算器demo实现及代码逻辑(图3)

微信小程序实战教程:计算器demo实现及代码逻辑(图4)

完成视图设置(cal.wxml)

微信小程序实战教程:计算器demo实现及代码逻辑(图5)

配置相应的样式配置(cal.wxss)

微信小程序实战教程:计算器demo实现及代码逻辑(图6)

微信小程序实战教程:计算器demo实现及代码逻辑(图7)

微信小程序实战教程:计算器demo实现及代码逻辑(图8)

第二部分:逻辑

每个按钮点击后需要相应事件

微信小程序实战教程:计算器demo实现及代码逻辑(图9)

在逻辑处理中实现点击事件,并打印log看运行效果

微信小程序实战教程:计算器demo实现及代码逻辑(图10)
微信小程序实战教程:计算器demo实现及代码逻辑(图11)

但是现在问题来了,怎么知道到底点击的是哪一个按钮呢?这里可以给每个按钮设置一个id,来具体的区分到底是哪一个被点击了.

微信小程序实战教程:计算器demo实现及代码逻辑(图12)
微信小程序实战教程:计算器demo实现及代码逻辑(图13)
微信小程序实战教程:计算器demo实现及代码逻辑(图14)

上面这种方法可以唯一确定点击的是哪一个按钮,但是还有一种更完美的解决方案,现在js中初始化所有的id,然后在wxml中分别设置获取.

微信小程序实战教程:计算器demo实现及代码逻辑(图15)
微信小程序实战教程:计算器demo实现及代码逻辑(图16)

看运行效果

微信小程序实战教程:计算器demo实现及代码逻辑(图17)

现在要做的就是要设置每次点击后的按钮,并做相应的运行,现重普通的开始判断,比如这个时候点击的是1,或者2 这样的数字,处理处理如下.

微信小程序实战教程:计算器demo实现及代码逻辑(图18)

微信小程序实战教程:计算器demo实现及代码逻辑(图19)

微信小程序实战教程:计算器demo实现及代码逻辑(图20)

特殊符号处理

当第一次点击的是 “*”,”-“,”+”,”/“,这样的字符时,是不能显示的,所以要做处理

微信小程序实战教程:计算器demo实现及代码逻辑(图21)

点击的是退格处理

微信小程序实战教程:计算器demo实现及代码逻辑(图22)

微信小程序实战教程:计算器demo实现及代码逻辑(图23)

点击清屏键处理

微信小程序实战教程:计算器demo实现及代码逻辑(图24)
微信小程序实战教程:计算器demo实现及代码逻辑(图25)

点击正父号处理

微信小程序实战教程:计算器demo实现及代码逻辑(图26)
微信小程序实战教程:计算器demo实现及代码逻辑(图27)

=号处理

微信小程序实战教程:计算器demo实现及代码逻辑(图28)

历史处理,效果如下

微信小程序实战教程:计算器demo实现及代码逻辑(图29)

先完成相应的页面

微信小程序实战教程:计算器demo实现及代码逻辑(图30)

完成相应的样式布局

微信小程序实战教程:计算器demo实现及代码逻辑(图31)

相应的页面布局

微信小程序实战教程:计算器demo实现及代码逻辑(图32)

保存每次结果

微信小程序实战教程:计算器demo实现及代码逻辑(图33)

取出结果

微信小程序实战教程:计算器demo实现及代码逻辑(图34)

本文未提供相关源码。但是有相关视频:
原视频地址:https://bbs.520it.com/forum.php?mod=viewthread&tid=2536





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。