一、界面
1、主要界面：基本计算

2、扩展界面：单位计算

3、其它界面
房贷计算、正则表达式等，具体可扫码参考

二、代码
1、index.js
//加载第三方组件，处理四则运算，代替禁用的eval函数
var rpn = require("…/utils/rpn.js");

Page
(
{
data:
{
idb: “back”,
idc: “clear”,
idt: “toggle”,
id9: “9”,
id8: “8”,
id7: “7”,
id6: “6”,
id5: “5”,
id4: “4”,
id3: “3”,
id2: “2”,
id1: “1”,
id0: “0”,
idadd: “＋”,
idj: “-”,
idx: “×”,
iddiv: “÷”,
idd: “.”,
ide: “＝”,
screenData: “0”,
operaSymbo: { “＋”: “+”, “－”: “-”, “×”: “*”, “÷”: “/”},
lastIsOperaSymbo: false,
lastIsPoint: false,
iconType: ‘waiting_circle’,
iconColor: ‘white’,
arr: [],
logs: []
},

onLoad: function (options) 
{
// 页面初始化 options为页面跳转所带来的参数
},

onReady: function () 
{
// 页面渲染完成
},

onShow: function () 
{
// 页面显示
},

onHide: function () 
{
// 页面隐藏
},

onUnload: function () 
{
// 页面关闭
},


/**
 * 用户点击右上角分享
 */
onShareAppMessage: function () {

},

//点击函数
clickBtn: function (event) 
{
  var id = event.target.id;
      if (id == this.data.idb) 
      {  //退格←
        var data = this.data.screenData.toString();
        if (data == "0") 
        {
          return;
        }
        data = data.substring(0, data.length - 1);
        if (data == "" || data == "－") 
        {
          data = 0;
        }
        this.setData({ "screenData": data });
        this.data.arr.pop();
      } 
      else if (id == this.data.idc)
      {  //清屏C
        this.setData({ "screenData": "0" });
        this.data.arr.length = 0;
        this.data.lastIsPoint = false;
      } 
      else if (id == this.data.idt) 
      {  //正负号+/-
        var data = this.data.screenData;
        if (data == "0") 
        {
          return;
        }
        var firstWord = data.charAt(0);
        if (firstWord == "－") 
        {
          data = data.substr(1);
          this.data.arr.shift();
        } 
        else 
        {
          data = "－" + data;
          this.data.arr.unshift("－");
        }
        this.setData({ "screenData": data });
      } 
      else if (id == this.data.ide) 
      {  //等于＝
        var data = this.data.screenData;
        if (data == "0") 
        {
          return;
        }          
        var lastWord = data.charAt(data.length);
        if (isNaN(lastWord))
        {
          return;
        }

        console.log("parseFloat(data)" + parseFloat(data));
        console.log("data" + data)
        if (parseFloat(data) == data) {
          return;
        }
        var log = data;
        var data = rpn.calCommonExp(data);


        // 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.idd || arr[i] == this.data.idt) 
        //   {
        //     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[i] == this.data.idadd) 
        //     {
        //       result += Number(optarr[i + 1]);
        //     }
        //     else if (optarr[i] == this.data.idj) 
        //     {
        //       result -= Number(optarr[i + 1]);
        //     } 
        //     else if (optarr[i] == this.data.idx) 
        //     {
        //       result *= Number(optarr[i + 1]);
        //     } 
        //     else if (optarr[i] == this.data.iddiv) 
        //     {
        //       result /= Number(optarr[i + 1]);
        //     }
        //   }
        // }
          //存储历史记录
         // this.data.logs.push(data + '=' + result);
          wx.setStorageSync("calclogs", this.data.logs);
          this.data.arr.length = 0;
          //this.data.arr.push(result);
        //this.setData({ "screenData": result + "" });
          this.setData({ "screenData": data});
        } 
        else 
        {
            if (this.data.operaSymbo[id]) 
            { //如果是符号+-*/
              this.data.lastIsPoint = false;
              //如果上一个输入字符是符号，或者屏幕是0，则再输入符号时不处理。
              if (this.data.lastIsOperaSymbo || this.data.screenData == "0") 
              {
                return;
              }
            }
            //对于不是符号的其它字符
            var sd = this.data.screenData;
            var data;
            if(id == this.data.idd)
            {
              if (this.data.lastIsPoint)
                return;
              else
              {
                data = sd + id;
                this.data.lastIsPoint = true;
              }
            }
            else
            {
              if (sd === '0') 
              {
                  data = id;
              } 
              else 
              {
                data = sd + id;
              }
            }
            this.setData({ "screenData": data });//更新屏幕数据
            this.data.arr.push(id);

            //更新本次输入的字符是否是运算符
            if (this.data.operaSymbo[id]) 
            {
              this.setData({ "lastIsOperaSymbo": true });
            } 
            else 
            {
              this.setData({ "lastIsOperaSymbo": false });
            }
         }
    },

}
)

2、index.wxml
<view class=“content”>
<view class=“layout-top”>
<view class=“screen”>
{{screenData}}
</view>
</view>

<view class=“layout-bottom”>
<view class=“btnGroup”>
<view class=“item orange” bindtap=“clickBtn” id="{{idc}}">С</view>
<view class=“item orange” bindtap=“clickBtn” id="{{idb}}">←</view>
<view class=“item orange” bindtap=“clickBtn” id="{{idt}}">＋/－</view>
<view class=“item orange” bindtap=“clickBtn” id="{{idadd}}">＋</view>
</view>
<view class=“btnGroup”>
<view class=“item blue” bindtap=“clickBtn” id="{{id9}}">9</view>
<view class=“item blue” bindtap=“clickBtn” id="{{id8}}">8</view>
<view class=“item blue” bindtap=“clickBtn” id="{{id7}}">7</view>
<view class=“item orange” bindtap=“clickBtn” id="{{idj}}">－</view>
</view>
<view class=“btnGroup”>
<view class=“item blue” bindtap=“clickBtn” id="{{id6}}">6</view>
<view class=“item blue” bindtap=“clickBtn” id="{{id5}}">5</view>
<view class=“item blue” bindtap=“clickBtn” id="{{id4}}">4</view>
<view class=“item orange” bindtap=“clickBtn” id="{{idx}}">×</view>
</view>
<view class=“btnGroup”>
<view class=“item blue” bindtap=“clickBtn” id="{{id3}}">3</view>
<view class=“item blue” bindtap=“clickBtn” id="{{id2}}">2</view>
<view class=“item blue” bindtap=“clickBtn” id="{{id1}}">1</view>
<view class=“item orange” bindtap=“clickBtn” id="{{iddiv}}">÷</view>
</view>
<view class=“btnGroup”>
<view class=“item blue zero” bindtap=“clickBtn” id="{{id0}}">0</view>
<view class=“item blue” bindtap=“clickBtn” id="{{idd}}">.</view>
<view class=“item orange” bindtap=“clickBtn” id="{{ide}}">＝</view>
</view>
</view>
</view>
3、index.wcss
/* //height: 90%;*/
.content {
display: flex;
flex-direction: column;
align-items: center;
background-color: #ccc;
font-family: “Microsoft YaHei”;
overflow-x: hidden;
}
.layout-top{
width: 100%;
margin-bottom: 10rpx;
}
.layout-bottom{
width: 100%;
}
.screen {
text-align: right;
width: 100%;
line-height: 200rpx;
padding: 0 10rpx;
font-weight: bold;
font-size: 60px;
box-sizing: border-box;
border-top: 1px solid #fff;
}
.btnGroup {
display: flex;
flex-direction: row;
flex: 1;
width: 100%;
height: 5rem;
background-color: #fff;
}
.item {
width:25%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: 1px;
margin-right: 1px;
}
.item:active {
background-color: #ff0000;
}
.zero{
width: 50%;
}
.orange {
color: #fef4e9;
background: #f78d1d;
font-weight: bold;
}
.blue {
color:#d9eef7;
background-color: #0095cd;
}
.iconBtn{
display: flex;
}
.icon{
display: flex;
align-items: center;
width:100%;
justify-content: center;
}

三、完整工程下载链接
[](https://download.csdn.net/download/kevin_lp/11931364