欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序实战教程:计算器demo实现及代码逻辑

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:736

高端HTML5响应式企业通用网

2020-05-06   浏览:517

html5响应式外贸网站英文版

2020-05-08   浏览:505

HTML5自适应律师工作室类网

2020-04-04   浏览:501

HTML5影视传媒文化公司类网

2020-05-12   浏览:495

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

发布时间:2021-01-10  

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

 

 

 

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

第一部分:开始


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

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

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

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

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

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

完成视图设置(cal.wxml)

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

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

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

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

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

 

第二部分:逻辑

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

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

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

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


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

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

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


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


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

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

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


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

看运行效果

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

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

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

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

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

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

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

点击的是退格处理

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

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

点击清屏键处理

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


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

点击正父号处理

本文标签

:备案管家服务帮您把复杂流程变简单,解决您在进行网站备案过程中遇到的效率低下和成功率不高的问题。个人300/2个域名,企业500/5个域名,qq1650004.