微信小程序入门项目-做一个马马虎虎的计算器

好好打代码

2465人浏览 · 2022-10-20 14:23:42

好好打代码 · 2022-10-20 14:23:42 发布

效果：
在这里插入图片描述

打开微信开发者工具，新建小程序
在这里插入图片描述
打开app.json设置顶部的标题和颜色

由于小程序不支持JavaScript的一些函数，比如evel()，所以代码变得复杂很多。
pages\index\index.js的代码：

Page({
    data: {
        expression:"",
        result:"",
        class1:"view5",
        class2:"view6",
    },
    bindViewTap(event) {
        if(event.target.dataset.value==="C"){//按键C
            this.setData({
                expression: "",
                result:"",
            })
            return;
        }else if(event.target.dataset.value==="《X"){//按键《X
            if(this.data.expression[this.data.expression.length-2]==="E"){
                this.setData({
                    expression: this.data.expression.substring(0,this.data.expression.length-2),
                })
            }else{
                this.setData({
                    expression: this.data.expression.substring(0,this.data.expression.length-1),
                })
            }
        }else if(event.target.dataset.value==="="){//按键=
            if(this.data.result==="")return;
            this.setData({
                class1: "view5 view7",
                class2: "view6 view5",
            })
            setTimeout(()=>{
                this.setData({
                    class1: "view5 view8",
                    class2: "view6 view8",
                    expression:this.data.result,
                    result:"",
                });
            },400);
            return;
        }else if(event.target.dataset.value==="."){//按键.
            if(/\.$|\.\d+$/.test(this.data.expression));
            else if(/[%÷×\-\+]$|^$/.test(this.data.expression)){
                this.setData({
                    expression: this.data.expression+"0."
                })
            }else if(/\d+$/.test(this.data.expression)){
                this.setData({
                    expression: this.data.expression+"."
                })
            }
        }else if(event.target.dataset.value==="%"){//按键%
            if(/\d+$/.test(this.data.expression)){
                this.setData({
                    expression: this.data.expression+event.target.dataset.value
                })
            }else if(this.data.expression===""){
                this.setData({
                    expression: "0%"
                })
            }else if(/\D+$/.test(this.data.expression)){
                this.setData({
                    expression: this.data.expression.split(/\D+$/)[0]+"%",
                })
            }
        }else if(/\-/.test(event.target.dataset.value)){//按键-
            this.setData({
                expression: /(^|[÷×\-\+])\-$/.test(this.data.expression)?this.data.expression:this.data.expression+event.target.dataset.value,
            })
        }else if(/[÷×\+]/.test(event.target.dataset.value)){//按键÷×+
            let expression=this.data.expression;
            if(!expression||expression==="-")return;
            else{
                this.setData({
                    expression: (/\d[÷×\+\-\.]{2}$/.test(expression)?expression.substring(0,expression.length-2):/\d[÷×\+\-\.]$/.test(expression)?expression.substring(0,expression.length-1):expression)+event.target.dataset.value,
                })
            }
        }else if(+event.target.dataset.value===0){//按键00和0
            if(/%$/.test(this.data.expression)){
                this.setData({
                    expression:this.data.expression.substring(0,this.data.expression.length-1)
                })
            }
            var num=this.data.expression.match(/[\d\.]+$/);
            if(num===null){
                this.setData({
                    expression: this.data.expression+"0"
                })
            }else if(/\.|^[1-9]$|\d{2,}/.test(num[0])){
                this.setData({
                    expression: this.data.expression+event.target.dataset.value
                })
            }
        }else{//其它数字按键
            this.setData({
                expression: (/(^|[\+\-×÷])0%$/.test(this.data.expression)?this.data.expression.substring(0,this.data.expression.length-2):/(^|[^\.\d])0$|%$/.test(this.data.expression)?this.data.expression.substring(0,this.data.expression.length-1):this.data.expression)+event.target.dataset.value
            })
        }
        //运算
        if(/^[\d%\.E]*[÷×\+\-]?$/.test(this.data.expression)){
            this.setData({
                result:''
            })
            return;
        }
        var expression=this.data.expression.replace(/[\d\.]+%/,num=>parseFloat(num)+"÷100");//百分数转小数
        console.log(expression,"------11111");
        expression=expression.replace(/[^\+\-]+/g,equ=>{
            console.log(equ,"------33333");
            var str1="";
            equ=equ.replace(/÷[\d\.E]+/g,item=>{
                console.log(item,"------444444");
                str1+=item;
                return "";
            })+str1;
            console.log(equ,"------22222");
            var str="";
            equ=equ.replace(/[\d\.E]+/g,num=>{
                if(/E|^\d*$/.test(num))return num;
                else if(/\./.test(num)){
                    var a=10**(num.length-num.indexOf(".")-1);
                    str+="÷"+a;
                    return num*a;
                }
            })+str;
            equ=equ.replace(/[×÷]{2}/g,"÷");
            return equ;
        });//解决0.3*3=0.899999999999问题
        console.log(expression,"0000000");
        var formulas=expression.split(/(?<=[\d\.E]+)(?=[÷×\+\-])|(?<=\d[÷×\+\-])(?=[\d\-])/);//expression分割出来的 数字或运算符
        if(/\D$/.test(formulas[formulas.length-1])){
            formulas.pop();
            if(/\D$/.test(formulas[formulas.length-1]))formulas.pop();
        }
        console.log(formulas,1111111)
        if(formulas.length>1){//可以正常运算
            console.log(formulas,22222222)
            let find=true;
            while(find){
                find=formulas.find((item,index)=>{
                    let find=/[÷×]/.test(item);
                    if(find){
                        switch(item){
                            case "÷": formulas[index-1]=formulas[index-1]/formulas[index+1];break;
                            case "×": formulas[index-1]=formulas[index-1]*formulas[index+1];break;
                        }
                        formulas.splice(index,2);
                    }
                    return find;
                })
            };
            formulas.forEach((item,index)=>{
                switch(item){
                    case "-": formulas[0]=formulas[index-1]-formulas[index+1];break;
                    case "+": formulas[0]=+formulas[index-1]+(+formulas[index+1]);break;
                }
            });
            formulas.length=1;
            formulas+="";
            formulas=formulas.replace(/\.\d{13,}/,str=>str.substring(0,14));//小数过长只取13位
            this.setData({
                result:formulas.replace(/e\+/,"E")
            })
        }else{
            this.setData({
                result:''
            })
        }
    },
})

pages\index\index.wxml的代码：

<view class="container">
    <view class="view4">
        <view class="view5" class="{{class1}}">{{expression}}</view>
        <view class="view6" class="{{class2}}">{{result}}</view>
    </view>
    <view class="view1" bindtap="bindViewTap">
        <view class="view2 view3" data-value="C">C</view>
        <view class="view2 view3" data-value="%">%</view>
        <view class="view2 view3" data-value="《X">《X</view>
        <view class="view2 view3" data-value="÷">÷</view>
        <view class="view2" data-value="7">7</view>
        <view class="view2" data-value="8">8</view>
        <view class="view2" data-value="9">9</view>
        <view class="view2 view3" data-value="×">×</view>
        <view class="view2" data-value="4">4</view>
        <view class="view2" data-value="5">5</view>
        <view class="view2" data-value="6">6</view>
        <view class="view2 view3" data-value="-">-</view>
        <view class="view2" data-value="1">1</view>
        <view class="view2" data-value="2">2</view>
        <view class="view2" data-value="3">3</view>
        <view class="view2 view3" data-value="+">+</view>
        <view class="view2" data-value="00">00</view>
        <view class="view2" data-value="0">0</view>
        <view class="view2" data-value=".">.</view>
        <view class="view2 view3" data-value="=">=</view>
    </view>
</view>

pages\index\index.wxss的代码：

.container{
    height: 100vh;
    padding: 0;
    height: 100%;
}
.view1{
    width: 100%;
    height: 60vh;
    bottom: 0;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: -webkit-gradient(linear, 0 0, 0 7%,from(rgb(44 255 244 / 19%)), to(rgb(0 255 243 / 4%)));
}
.view2{
    font-family: 'iconfont';
    /* background-color: rgb(191, 212, 142); */
    width: 25vw;
    height: 12vh;
    text-align: center;
    line-height: 12vh;
    font-size: 55rpx;
}
.view3{
    color: rgb(36, 194, 173);
}
.view4{
    /* background-color: rgb(245, 242, 106); */
    height: 40vh;
    text-align: end;
    position: relative;
}
.view6{
    /* background-color: rgba(82, 211, 243, 0.651); */
    font-size: 60rpx;
    color: rgb(170, 170, 170);
    line-height: 90rpx;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: color 4000ms,bottom 400ms,font-size 400ms;
}
.view5{
    /* background-color: rgb(106, 245, 152); */
    line-height: 90rpx;
    font-size: 90rpx;
    position: absolute;
    right: 0;
    bottom: 90rpx;
    transition: color 400ms,bottom 400ms,font-size 400ms;
}
.view7{
    /* background-color: rgba(138, 82, 243, 0.651); */
    color: rgb(128, 128, 128);
    font-size: 60rpx;
    line-height: 90rpx;
    position: absolute;
    right: 0;
    bottom: 180rpx;
}
.view8{
    transition: color 0s,bottom 0s,font-size 0s;
}
.icon-backspace:before {
    content: "《X";
}

接下来调一下符号：
在这里插入图片描述

去阿里云 iconfont下载对应的图标
教程：微信小程序：如何使用阿里云 iconfont 图标字体？
在这里插入图片描述

在app.wxss文件中加入@import "./styles/iconfont.wxss";
然后，按ctrl键单击路径在这里插入图片描述
创建文件iconfont.wxss，把刚才下载的iconfont.css的内容复制到iconfont.wxss里面
由于小程序不支持使用woff2，只能使用base64的路径，这里就需要用到转码工具，将刚才下载的iconfont.woff2文件转出来的字符串复制到iconfont.wxss文件的url中：

@font-face {
  font-family: "iconfont";
  src: url('data:application/octet-stream;base64,d09GMgABAAAAAAPIAAsAAAAACEgAAAN8AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqDaIMlATYCJAMQCwoABCAFhGcHURs2B1FUTlJkX2IqMtJdSZHMGI4NjwFWgEgfHQDAwZ8BQojyAgYA8fDf2Lf7ZmZFJLk2sdM3bVIHSiVBx0vcSOnWvIT/037uhpgenkQtqdz/e/f3xe7frCGhUKqHNkuESIIlWAOPpIItc5mrD93PX1iHpTZNB1JFCRp5Zy90a6zUaLANqOr/Blna+552wsdWPJ+4d9w6T/NnCWUhzjE1/GDfWkCBjbUswq7zAAPgNMLzr6BTePMzAvUWTEjaW1jbRHmPhBuoSgqHHOTl8ShLBGXIBqWHGWrV1ejSIt6qIr1OQ97E74//eiKDpCpzdtm/nnej6FtBm3xWAeRvQpJAwxOqkDFzMFPc9jvOJaeJGcnq276TYg1Sq1biV4Ha9rtCokspal2FqX+8RFRzShvBCiUzvwp8Qa6sJTbBPzst4VNR1VLRezxzNIPL/E4orbm5C3l5aV5RWLcLez0qE+90QLtNCWDTIRzN8MkA9Mf+wqhkHvA2c5hgu4DFgMKdIgTO38rjfCQf8CWsUKjW5GVJQR0s73XtXM7lHDRsKtiuQOlOdUal4ztEAltm67bypVN6RDLsUmgY79pUdL3Ci/pxD8db9hEeCr+GXmHgo9osI8VQvRYZr4r6bP2hP2DF470USZG7h8qhiTdwFjpTM54neGswQESfFdHIWqMhgi8qQkLa3qExn0Xfyyz7X3+0m1giSsre2yLqB3/Gv4mDPHwJFb3nzzOHbP/vooURryBU5HcZ5KOkZ7HrS+q7Hebr36b6JH/sr7bhZTX89HrDXKCimCb4boSw4JtUHoKExQxSSpvEF/07lDuFHAn1rpmvLkO7lyVUHXCMUFsSSkhqDCCrNUQpjClUabCEarXWUW/a/OoGHSzJotRhzCVDaHWNpNkzslaPlMJ4QpVuCVRr9Y96B5G7XYOxEGcZEA5uLASxLJoG9dQ87nYdJK9GWFN0G5gjUxh3d3RV04tgAJtjhuOTejinmDJTxwviaaBpJraYqYDIOzycWyOdnbTtJR2iqaNZDCA44IYJgjCZyGSgITEvf946IPHSEAykbNsYh+dz3WPdOnQBlEWFAdU9yC4OH0kPjqMwirGUDluQbUAzEibMah+kACKug2dCzDKi0yWiqKJje5X+9nZAPef6EilylKjScOEBQxJApmDk6l6Ny5YWbKdJlZYpEFF1rMAOCAE=');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-chengbeifen:before {
  content: "\e61d";
}

.icon-multiply-full:before {
  content: "\ea71";
}

.icon-backspace:before {
  content: "\e610"
}

然后将index.wxml中的

<view class=“view2 view3” data-value=“《X”>《X</view>

替换成

<view class=“view2 view3” data-value=“《X”><text class=“iconfont icon-backspace” data-value=“《X”></text></view>

“icon-backspace”是从图标字体网站复制
在这里插入图片描述
最终效果：
请添加图片描述
全部代码：https://download.csdn.net/download/weixin_46057576/86791761

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

人形机器人自动化产线启用：80%自动化率意味着什么

DAMO开发者矩阵

全球 AI / 科技简报|2026 年 9 月 12 日

DAMO开发者矩阵

什么是 VPC？从传统网络、VLAN、VRF 到云数据中心 Overlay 的完整解析

DAMO开发者矩阵

所有评论(0)

查看更多评论

好好打代码

@weixin_46057576

已为社区贡献1条内容

微信小程序入门项目-做一个马马虎虎的计算器

好好打代码

所有评论(0)

温馨提示：您尚未绑定手机号

好好打代码