微信小程序开发计算器有多种方法,但是大部分代码比较复杂、不容易理解。本案例进行了改进,主要是组件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. 至此,案例制作完成,希望对大家的学习有很好的帮助。

微信小程序开发简易计算器改进版的更多相关文章

  1. 微信小程序开发(2) 计算器

    在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发计算器功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的 ...

  2. 强力推荐微信小程序之简易计算器,很适合小白程序员

    原文链接:https://mp.weixin.qq.com/s/gYF7GjTRpeZNoKPAPI9aXA 1 概述 前几日QQ群里的朋友问我有没有计算器小程序案例,今天我们说下小程序计算器,然后就 ...

  3. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

  4. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  5. 微信小程序开发的基本流程

    微信小程序开发的基本流程 一,微信小程序简介 1,微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日. 2,微信小程序这个词可以分解为“微信”和“小程序 ...

  6. 微信小程序开发笔记01

    微信小程序开发的优势 1,不用安装,即开即用,用完就走.省流量,省安装时间,不占用桌面: 2,体验上虽然没法完全媲美原生APP,但综合考虑还是更优: 3,对于小程序拥有者来说,开发成本更低,他们可以更 ...

  7. 初尝微信小程序开发与实践

    这可能是一个java程序员最不务正业的一次分享了. 小程序的火热相信不用我多说了,年初的时候老婆去浦东某达面试,甚至都被问有没有小程序测试经验.俨然小程序成为了互联网公司自PC,WAP,安卓,IOS之 ...

  8. 微信小程序开发参考资料汇总

    不错的微信小程序入门教程:微信小程序入门二: 条件.遍历.网络请求.获取本地图片http://blog.csdn.net/lecepin/article/details/54016701 微信小程序入 ...

  9. 微信小程序开发初次尝试-----实验应用制作(一)

    初次尝试微信小程序开发,在此写下步骤以做记录和分享. 1.在网上找了很多资料,发现这位知乎大神提供的资料非常全面. 链接 https://www.zhihu.com/question/50907897 ...

随机推荐

  1. 前端面试题,js预处理部分小结,函数声明提升和变量声明提升

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/25/%e5%89%8d%e7%ab%af%e9%9d%a2%e8%af%95%e9% ...

  2. android meta_data配置数据

  3. mysql-视图及索引简介

    一.视图的创建.作用及注意事项 1.创建:create view 视图名 as select 语句: 2.删除:drop view 视图名 3.作用: 数据库视图允许简化复杂查询 数据库视图有助于限制 ...

  4. python os模块用法

    import os   #os主要做路径管理import glob  #glob主要做搜索查询匹配import sys inputpath = r"C:\Users\Administrato ...

  5. 矩阵的 Frobenius 范数及其求偏导法则

    cr:http://blog.csdn.net/txwh0820/article/details/46392293 一.矩阵的迹求导法则   1. 复杂矩阵问题求导方法:可以从小到大,从scalar到 ...

  6. 【扯淡篇】CTSC/APIO/SDOI R2时在干什么?有没有空?可以来做分母吗?

    注意: 我比较弱, 并没有办法把外链bgm搞成https, 所以大家可以选择"加载不安全的脚本"或者把https改成http以获得更好的阅读体验! 据说, 退役了要写写回忆录. 但 ...

  7. Java工程师面试linux操作选择面试题大全

    1.请写出常用的linux指令不低于10个,请写出linux tomcat启动.linux指令arch 显示机器的处理器架构(1)uname -m 显示机器的处理器架构(2)shutdown -h n ...

  8. Excel处理

    转载:https://www.cnblogs.com/cang12138/p/5606130.html 上面的博友已经讲的很清楚了,但是我们在服务端是获取不到前端上传文件的绝对路径的(因为新浏览器有安 ...

  9. leetcode-161周赛-1250-检查好数组

    题目描述: 唯一的结论是如果数组中所有数的最大公约数为 1,则存在解,否则不存在.所以只需要计算所有数最大公约数即可,时间复杂度O(nlog(m)),其中 m 为数字大小. class Solutio ...

  10. Comet Contest#11 F arewell(DAG计数+FWT子集卷积)

    传送门. 题解: 4月YY集训时做过DAG计数,和这个基本上是一样的,但是当时好像直接暴力子集卷积,不然我省选时不至于不会,这个就多了个边不选的概率和子集卷积. DAG计数是个套路来的,利用的是DAG ...