微信小程序开发简易计算器改进版
微信小程序开发计算器有多种方法,但是大部分代码比较复杂、不容易理解。本案例进行了改进,主要是组件bindtap属性绑定的自定义函数clickBtn(),采用了switch语句,使得代码结构更加清晰,学习者更容易理解,现分享如下。案例的效果如下图所示:
制作步骤如下:
1. 在微信开发者工具的全局控制app.json文件pages数组中输入“pages/calculator/calcu”,建立计算器页面相关文件,在window属性中更改导航标题为“简单计算器”。app.json的代码如下:
{
"pages":[
"pages/calculator/calcu",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "简单计算器",
"navigationBarTextStyle":"black"
}
}
2. 页面布局文件calcu.wxml的代码如下:
<view class='content'>
<view class='scr'>
{{screenData}}
</view>
<view class='btnGroup'>
<view class='item gray' bindtap='clickBtn' id='{{b01}}'>←</view>
<view class='item gray' bindtap='clickBtn' id='{{b02}}'>C </view>
<view class='item gray' bindtap='clickBtn' id='{{b03}}'> +/- </view>
<view class='item gray' bindtap='clickBtn' id='{{b04}}'>+</view>
</view>
<view class='btnGroup'>
<view class='item gray' bindtap='clickBtn' id='{{b05}}'> 9</view>
<view class='item gray' bindtap='clickBtn' id='{{b06}}'> 8 </view>
<view class='item gray' bindtap='clickBtn' id='{{b07}}'> 7 </view>
<view class='item gray' bindtap='clickBtn' id='{{b08}}'>-</view>
</view>
<view class='btnGroup'>
<view class='item gray' bindtap='clickBtn' id='{{b09}}'> 6</view>
<view class='item gray' bindtap='clickBtn' id='{{b10}}'> 5 </view>
<view class='item gray' bindtap='clickBtn' id='{{b11}}'> 4 </view>
<view class='item gray' bindtap='clickBtn' id='{{b12}}'>×</view>
</view>
<view class='btnGroup'>
<view class='item gray' bindtap='clickBtn' id='{{b13}}'> 3</view>
<view class='item gray' bindtap='clickBtn' id='{{b14}}'> 2 </view>
<view class='item gray' bindtap='clickBtn' id='{{b15}}'> 1</view>
<view class='item gray' bindtap='clickBtn' id='{{b16}}'>÷</view>
</view>
<view class='btnGroup'>
<view class='item gray'bindtap='clickBtn' id='{{b17}}' > 0</view>
<view class='item gray'bindtap='clickBtn' id='{{b18}}'> . </view>
<view class='item gray'bindtap='getSqrt' id='{{b19}}'> √</view>
<view class='item orange'bindtap='clickBtn' id='{{b20}}'>=</view>
</view>
</view>
3. 页面样式文件calcu.wxss的代码如下:
/* */
.content{
height:100%;
display: flex;
flex-direction: column;
align-items:center;
box-sizing: border-box;
background:#555;
padding:30rpx 0 20rpx 0;
}
.scr{
background:#fff;
width:700rpx;
height: 100rpx;
line-height: 100rpx;
text-align: right;
margin:0 0 10rpx 0;
padding:0 10rpx 0 0;
font-size:30px;
}
.btnGroup{
display: flex;
flex-direction: row;
}
.item{
width:175rpx;
min-height: 150rpx;
margin: 1rpx;
text-shadow:0 1px 1px rgba(255,255,255,.3);
text-align: center;
line-height: 150rpx;
}
.gray{
background:#eee;
}
.orange{
color:#fff;
background:#f60;
}
4.逻辑处理文件calcu.js的代码如下:
Page({
data: {
b01:"back",
b02: "clear",
b03: "negative",
b04: "+",
b05: "9",
b06: "8",
b07: "7",
b08: "-",
b09: "6",
b10: "5",
b11: "4",
b12: "×",
b13: "3",
b14: "2",
b15: "1",
b16: "÷",
b17: "0",
b18: ".",
b19: "sqrt",
b20: "=" ,
screenData:"0",
lastOperator:false,
arr:[],
logs:[]
},
clickBtn: function (event) {
console.log(event.target.id);
var id = event.target.id;
switch (id) {
case "back":
//退格
var data = this.data.screenData;
if (data == 0) {
return;
}
data = data.substring(0, data.length - 1);
if (data == "" || data == "-") {
data = 0;
}
this.setData({
screenData: data
});
this.data.arr.pop();
break;
case "clear":
//清屏
this.setData({
screenData: "0"
});
this.data.arr.length = 0;
break;
case "negative":
//正负号
var data = this.data.screenData;
if (data == 0) {
return;
}
var firstword = data.substring(0, 1);
if (firstword == "-") {
data = data.substring(1, data.length);
this.data.arr.shift();
} else {
data = "-" + data;
this.data.arr.unshift("-");
}
this.setData({
screenData: data
});
break;
case "=":
//等号=
var data = this.data.screenData;
if (data == 0) {
return;
}
var lastWord = data.substring(data.length - 1, data.length);
if (isNaN(lastWord)) {
return;
}
var num = "";
var lastOperator;
var arr = this.data.arr;
var optarr = [];
for (var i in arr) {
if (isNaN(arr[i]) == false || arr[i] == this.data.b18 || arr[i] == this.data.b03) {
num += arr[i];
} else {
lastOperator = arr[i];
optarr.push(num);
optarr.push(arr[i]);
num = "";
}
}
optarr.push(Number(num));
var result = Number(optarr[0]) * 1.0;
console.log(result);
for (var i = 1; i < optarr.length; i++) {
if (isNaN(optarr[i])) {
if (optarr[1] == this.data.b04) {
result += Number(optarr[i + 1]);
} else if (optarr[1] == this.data.b08) {
result -= Number(optarr[i + 1]);
} else if (optarr[1] == this.data.b12) {
result *= Number(optarr[i + 1]);
} else if (optarr[1] == this.data.b16) {
result /= Number(optarr[i + 1]);
}
}
}
//
this.data.arr.length = 0;
this.data.arr.push(result);
this.setData({
screenData: result + ""
});
break;
default:
if (id == this.data.b04 || id == this.data.b08 || id == this.data.b12 || id == this.data.b16) {
if (this.data.lastOperator == true || this.data.screenData == 0) {
return;
}
}
var num = this.data.screenData;
var data;
if (num == 0) {
data = id;
} else {
data = num + id;
}
this.setData({
screenData: data
});
this.data.arr.push(id);
if (id == this.data.b04 || id == this.data.b08 || id == this.data.b12 || id == this.data.b16) {
this.setData({
lastOperator: true
});
} else {
this.setData({
lastOperator: false
});
}
break;
}
},
getSqrt: function () {
//平方根
var data = Math.sqrt(this.data.screenData);
this.setData({
screenData: data
});
}
})
5. 至此,案例制作完成,希望对大家的学习有很好的帮助。
微信小程序开发简易计算器改进版的更多相关文章
- 微信小程序开发(2) 计算器
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发计算器功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的 ...
- 强力推荐微信小程序之简易计算器,很适合小白程序员
原文链接:https://mp.weixin.qq.com/s/gYF7GjTRpeZNoKPAPI9aXA 1 概述 前几日QQ群里的朋友问我有没有计算器小程序案例,今天我们说下小程序计算器,然后就 ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序开发的基本流程
微信小程序开发的基本流程 一,微信小程序简介 1,微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日. 2,微信小程序这个词可以分解为“微信”和“小程序 ...
- 微信小程序开发笔记01
微信小程序开发的优势 1,不用安装,即开即用,用完就走.省流量,省安装时间,不占用桌面: 2,体验上虽然没法完全媲美原生APP,但综合考虑还是更优: 3,对于小程序拥有者来说,开发成本更低,他们可以更 ...
- 初尝微信小程序开发与实践
这可能是一个java程序员最不务正业的一次分享了. 小程序的火热相信不用我多说了,年初的时候老婆去浦东某达面试,甚至都被问有没有小程序测试经验.俨然小程序成为了互联网公司自PC,WAP,安卓,IOS之 ...
- 微信小程序开发参考资料汇总
不错的微信小程序入门教程:微信小程序入门二: 条件.遍历.网络请求.获取本地图片http://blog.csdn.net/lecepin/article/details/54016701 微信小程序入 ...
- 微信小程序开发初次尝试-----实验应用制作(一)
初次尝试微信小程序开发,在此写下步骤以做记录和分享. 1.在网上找了很多资料,发现这位知乎大神提供的资料非常全面. 链接 https://www.zhihu.com/question/50907897 ...
随机推荐
- 三、函数 (SUM、MIN、MAX、COUNT、AVG)
第八章 使用数据处理函数 8.1 函数 SQL支持利用函数来处理数据.函数一般是在数据上执行的,给数据的转换和处理提供了方便. 每一个DBMS都有特定的函数.只有少数几个函数被所有主要的DBMS等同的 ...
- 深入JAVA虚拟机笔记
1.对堆的理解: a):所有的对象实例以及数据都要在堆中分配 b):新生代和老年代存在于堆中
- 使用IntelliJ IDEA配置Maven(详细操作)
一,下载Maven 进入官网http://maven.apache.org/ 点击Download 找到如下图所示的区域,注意你的操作系统. 点击安装你所需要的安装包,下载,解压. 二,Maven环 ...
- Python系列——常用第三方库
幕布视图(更加方便.明了):https://mubu.com/doc/AqoVZ8x6m0 参考文献:嵩天老师的Python讲义 模块 定义 计算机在开发过程中,代码越写越多,也就越难以维护,所以为了 ...
- zabbix--External checks 外部命令检测
概述zabbix server 运行脚本或者二进制文件来执行外部检测,外部检测不需要在被监控端运行任何 agentditem key 语法如下: 参数 定义 script shell 脚本或者二进制文 ...
- Java高并发网络编程(四)Netty
在网络应用开发的过程中,直接使用JDK提供的NIO的API,比较繁琐,而且想要进行性能提升,还需要结合多线程技术. 由于网络编程本身的复杂性,以及JDK API开发的使用难度较高,所以在开源社区中,涌 ...
- vma
linux内核的每一样技术,都是为了解决某个问题的. vma结构体的提出是为了管理"虚拟内存空间"这个资源. 像brk(),mmap()分配给用户空间的都是虚拟地址(当然),那内核就要知道哪一部分虚拟 ...
- Educational Codeforces Round 64 (Rated for Div. 2) (线段树二分)
题目:http://codeforces.com/contest/1156/problem/E 题意:给你1-n n个数,然后求有多少个区间[l,r] 满足 a[l]+a[r]=max([l, ...
- Openfire调整成自己的IM部署到LInux系统上
部署自己的IM到Linux系统下:需要生成相关jar包再部署 1.在myeclipse上把openfire源代码加在加载进来,做相应调整后,运行测试没问题 2. 编译admin-jsp.jar(所有 ...
- php的socket编程(socket关键几个函数)
php的socket编程(socket关键几个函数) 一.总结 一句话总结: socket_create.socket_connect.socket_bind.socket_listen.socket ...