小程序是什么就不用介绍了，虽然网上各种小程序火不起来的论调，但是在微信强大的平台支持下，小程序不火都不可能。

大家百度计算器小程序都会搜到同一个入门教程，当时也是照着那个教程入门的，但是功能太简单了，只能计算两个数的四则运算，而且界面不够美观，bug一大堆。

今天要介绍的是一款科学计算器小程序“one计算器”，可以进行三角函数、反三角函数、求根、求幂等科学计算，最牛逼的是可以进行混合四则运算（不要问我这是什么，就是你可以直接输入1*(2+3)进行计算，而不需要先计算出2+3再乘以1）。

设计这款计算器的初衷是目前线上的计算器类小程序确实不好用，我的目的是：

你的所有计算需求，一个计算器就够。

首先看看界面：

one计算器

一、开发环境

官方的微信web开发者工具，截止目前最新版

二、代码结构

结构先简单，只有一个主界面和一个弹窗。具体文件功能请参考官方文档。

三、wxml布局结构

官方推荐使用flex布局，于是按照这个思路编写wxml代码，对节点进行分块处理，如图：

布局分块

整个是按钮组btnGroup，布局为垂直flex布局。一共有10行，每个item的高度设置成10%即可。

上方为分块A，水平flex布局，设置flex-wrap: wrap可换行，每个按钮item的宽度为flex: 20%，这样一行就显示5个，且每个按钮宽度一样（这种也叫流式布局）。

下方为分块B，高度为2个item，因此高度为20%。里面又左右分为B1和B2，其中B1的布局方式和A一样，B2中item直接填充整个窗口，宽高均为100%即可。

注意！！！可能很多人不知道怎么让界面自适应屏幕，其实很简单，只要设置根节点的height: 100vh，自行百度vh是什么单位。

四、js代码逻辑思路

计算器看似很简单，如果想做好其实很难，特别是支持混合四则运算的计算器，其中涉及的逻辑判断非常复杂，需要你有很强的逻辑思维能力。

你可以简单地思考几个问题，看看能不能想到解决方案：

①如果用户输入的第一个不是数字而是符号怎么办？如果连续输入几个四则运算符怎么办？如果一个数字输入多个小数点怎么办？

②如果用户输入左括号，右括号没有闭合就计算怎么办？

③如果用户输入的表达式不合法就计算了，怎么判断具体是哪里不合法然后提示用户修改？

上面只是简单列举了几个小问题，如果你能想到很好的解决方案，那么你可以尝试做出这样一个科学计算器。

如果你觉得自己的解决方案很高效，欢迎在下方回复我，或者到“one计算器”里面反馈给我。