经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序实现计算器小功能
来源：jb51　　时间：2021/7/19 11:49:47　　对本文有异议

微信小程序现在越来越火爆了，我也看到很多在校大学生都在自学了，那些专门从事APP开发，网页开发的工作者更是看到了小程序的前景，在小程序领域也掺上一脚，本人也是自学小程序的，初期跟很多人一样，遇到一些不懂的想问问别人，到贴吧去，一大堆广告，根本没人帮忙解决问题。

今天教一些刚入门的同学做一款计算器，如果C语言是编程的最佳入门语言，那计算器应该算得上是小程序的入门demo了，希望刚入门的同学们认真品味下面的代码，从wxml到js，再到wxss（页面的布局)，每个代码都要弄懂他的意思

废话不多说，先上效果图，这是我入门时候自己做的一款计算器，很简单，逻辑也很单一，只是我们身边最常见的计算器的逻辑，我觉得从这个demo我更深刻学习到了wxss页面的布局知识

代码附上：

app.json

  1.  {
  2.   "pages":[
  3.     "pages/index/index",
  4.     "pages/logs/logs"
  5.   ],
  6.   "window":
  7.   {
  8.   "navigationBarBackgroundColor": "#000000",
  9.   "navigationBarTextStyle": "white", 
  10.   "navigationBarTitleText": "智能计算器"
  11.   },
  12.  "tabBar": {   //补充说一下，我这个tabBar是用来设置底部tab的
  13.    "color":"#ff69b4",
  14.    "selectedColor":"#0000ff",
  15.    "backgroundColor":"#ffff00",
  16.   "list": [
  17.     {
  18.       "pagePath": "pages/index/index",
  19.       "text": "计 算 机"
  20.     },
  21.     {
  22.       "pagePath": "pages/logs/logs",
  23.       "text": "日志"
  24.     },
  25.     {
  26.       "pagePath":"pages/logs/logs",
  27.       "text":"回家"
  28.     }
  29.   ]
  30. }
  31. }

/*app.wxss/*

  1. .container {
  2.   height: 100%;
  3.   display: flex;
  4.   flex-direction: column;
  5.   align-items: center;
  6.   justify-content: space-between;
  7.   padding: 200rpx 0;
  8.   box-sizing: border-box;
  9. }

**其中一些组件不认识的话， 建议到微信小程序官网多看几遍

index.wxml:

  1. <template name="calculator-key">
  2.   <button hover-start-time="{{5}}" hover-stay-time="{{100}}" hover-class="calculator-key-hover" data-key="{{className}}" class="calculator-key {{className}}">{{display}}</button>
  3. </template>
  4.  
  5. <view class="calculator">
  6.   <view class="calculator-display">
  7.     <view class="calculator-display-text">{{displayValue}}</view>
  8.   </view>
  9.   <view class="calculator-keypad">
  10.     <view class="input-keys">
  11.       <view class="function-keys" catchtap="onTapFunction">
  12.         <template is="calculator-key" data="{{className: 'key-clear', display: clearDisplay ? 'C' : 'C'}}"/>
  13.         <template is="calculator-key" data="{{className: 'key-sign', display: '+/-'}}"/>
  14.         <template is="calculator-key" data="{{className: 'key-percent', display: '%'}}"/>
  15.    </view>
  16.       <view class="digit-keys" catchtap="onTapDigit">
  17.         <template is="calculator-key" data="{{className: 'key-0', display: '0'}}"/>
  18.         <template is="calculator-key" data="{{className: 'key-dot', display: '●'}}"/>
  19.         <template is="calculator-key" data="{{className: 'key-1', display: '1'}}"/>
  20.         <template is="calculator-key" data="{{className: 'key-2', display: '2'}}"/>
  21.         <template is="calculator-key" data="{{className: 'key-3', display: '3'}}"/>
  22.         <template is="calculator-key" data="{{className: 'key-4', display: '4'}}"/>
  23.         <template is="calculator-key" data="{{className: 'key-5', display: '5'}}"/>
  24.         <template is="calculator-key" data="{{className: 'key-6', display: '6'}}"/>
  25.         <template is="calculator-key" data="{{className: 'key-7', display: '7'}}"/>
  26.         <template is="calculator-key" data="{{className: 'key-8', display: '8'}}"/>
  27.         <template is="calculator-key" data="{{className: 'key-9', display: '9'}}"/>
  28.       </view>
  29.     </view>
  30.     <view class="operator-keys" catchtap="onTapOperator">
  31.         <template is="calculator-key" data="{{className: 'key-divide', display: '÷'}}"/>
  32.         <template is="calculator-key" data="{{className: 'key-multiply', display: '×'}}"/>
  33.         <template is="calculator-key" data="{{className: 'key-subtract', display: '−'}}"/>
  34.         <template is="calculator-key" data="{{className: 'key-add', display: '+'}}"/>
  35.         <template is="calculator-key" data="{{className: 'key-equals', display: '='}}"/>
  36.     </view>
  37.   </view>
  38. </view>

index.js:

  1. Page({
  2.   data: {
  3.     value: null, // 上次计算后的结果，null表示没有上次计算的结果
  4.     displayValue: '0', // 显示数值
  5.     operator: null, // 上次计算符号，null表示没有未完成的计算
  6.     waitingForOperand: false // 前一按键是否为计算符号
  7.   },
  8.  
  9.   onLoad: function (options) {
  10.     this.calculatorOperations = {
  11.       'key-divide': (prevValue, nextValue) => prevValue / nextValue,
  12.       'key-multiply': (prevValue, nextValue) => prevValue * nextValue,
  13.       'key-add': (prevValue, nextValue) => prevValue + nextValue,
  14.       'key-subtract': (prevValue, nextValue) => prevValue - nextValue,
  15.       'key-equals': (prevValue, nextValue) => nextValue
  16.     }
  17.   },
  18.  
  19.   /* AC操作，一下回到解放前 */
  20.   clearAll() {
  21.     this.setData({
  22.       value: null,
  23.       displayValue: '0',
  24.       operator: null,
  25.       waitingForOperand: false
  26.     })
  27.   },
  28.  
  29.   /* 仅清空当前显示的输入值 */
  30.   clearDisplay() {
  31.     this.setData({
  32.       displayValue: '0'
  33.     })
  34.   },
  35.  
  36.   onTapFunction: function (event) {
  37.     const key = event.target.dataset.key;
  38.  
  39.     switch (key) {
  40.       case 'key-clear':
  41.         if (this.data.displayValue !== '0') {
  42.           this.clearDisplay();
  43.         } else {
  44.           this.clearAll();
  45.         }
  46.  
  47.         break;
  48.  
  49.       case 'key-sign':
  50.         var newValue = parseFloat(this.data.displayValue) * -1
  51.  
  52.         this.setData({
  53.           displayValue: String(newValue)
  54.         })
  55.  
  56.         break;
  57.  
  58.       case 'key-percent':
  59.         const fixedDigits = this.data.displayValue.replace(/^-?\d*\.?/, '')
  60.         var newValue = parseFloat(this.data.displayValue) / 100
  61.  
  62.         this.setData({
  63.           displayValue: String(newValue.toFixed(fixedDigits.length + 2))
  64.         });
  65.  
  66.         break;
  67.  
  68.       default:
  69.         break;
  70.     }
  71.   },
  72.  
  73.   onTapOperator: function (event) {
  74.     const nextOperator = event.target.dataset.key;
  75.     const inputValue = parseFloat(this.data.displayValue);
  76.  
  77.     if (this.data.value == null) {
  78.       this.setData({
  79.         value: inputValue
  80.       });
  81.     } else if (this.data.operator) {
  82.       const currentValue = this.data.value || 0;
  83.       const newValue = this.calculatorOperations[this.data.operator](currentValue, inputValue);
  84.  
  85.       this.setData({
  86.         value: newValue,
  87.         displayValue: String(newValue)
  88.       });
  89.     }
  90.  
  91.     this.setData({
  92.       waitingForOperand: true,
  93.       operator: nextOperator
  94.     });
  95.   },
  96.  
  97.   onTapDigit: function (event) {
  98.     const key = event.target.dataset.key; // 根据data-key标记按键
  99.  
  100.     if (key == 'key-dot') {
  101.       // 按下点号
  102.       if (!(/\./).test(this.data.displayValue)) {
  103.         this.setData({
  104.           displayValue: this.data.displayValue + '.',
  105.           waitingForOperand: false
  106.         })
  107.       }
  108.     } else {
  109.       // 按下数字键
  110.       const digit = key[key.length - 1];
  111.  
  112.       if (this.data.waitingForOperand) {
  113.         this.setData({
  114.           displayValue: String(digit),
  115.           waitingForOperand: false
  116.         })
  117.       } else {
  118.         this.setData({
  119.           displayValue: this.data.displayValue === '0' ? String(digit) : this.data.displayValue + digit
  120.         })
  121.       }
  122.     }
  123.   }
  124. })

index.wxss:

  1. page {
  2.   height:100%;
  3. }
  4.  
  5. .calculator {
  6.   width: 100%;
  7.   height: 100vh;
  8.   border:solid 1px;
  9.   background: rgb(238, 5, 5);
  10.   position: relative;
  11.   box-shadow: 0px 0px 20px 0px rgb(211, 41, 41);
  12.   display: flex;
  13.   flex-direction: column;
  14.   box-sizing: border-box;
  15. }
  16.  
  17. .calculator-display {     /*显示器背景颜色*/
  18.   background: #2c2a2c;
  19.   flex: 1;
  20. }
  21.  
  22. /*TODO:解决文本垂直居中问题,显示器数字颜色*/
  23. .calculator-display-text {
  24.   padding: 0 30px;
  25.   font-size: 3em;
  26.   color: rgb(245, 245, 248);
  27.   text-align: right;
  28. }
  29.  
  30. .calculator-keypad {
  31.   display: flex;
  32.  
  33. }
  34.  
  35. .calculator .function-keys {
  36.   display: flex;
  37.   color:rgb(245, 13, 13);
  38.  
  39. }
  40.  
  41. .calculator .digit-keys {
  42.   background: #0808f7;
  43.   display: flex;
  44.   flex-direction: row;
  45.   flex-wrap: wrap-reverse;
  46. }
  47.  
  48. .calculator-key-hover {   /*按钮按下以后的颜色*/
  49.   box-shadow: inset 0px 0px 25vw 0px hsla(71, 90%, 48%, 0.898);
  50. }
  51.  
  52.  
  53.  
  54. .calculator-key {
  55. background-color:aqua;
  56.  
  57.   display: block;
  58.   width: 25vw;
  59.   height: 25vw;
  60.   line-height: 25vw;
  61.   border-top: 1px solid rgb(6, 245, 78);
  62.   border-right: 1px solid rgb(19, 241, 12);
  63.   text-align: center;
  64.   box-sizing: border-box;
  65. }
  66.  
  67. .calculator .function-keys .calculator-key {
  68.   font-size: 2em;
  69.  
  70. }
  71.  
  72. .calculator .digit-keys .calculator-key {
  73.   font-size: 3em;
  74. }
  75.  
  76. .calculator .digit-keys .key-0 {
  77.   width: 50vw;
  78.   text-align: left;
  79.   padding-left: 9vw;
  80. }
  81.  
  82. .calculator .digit-keys .key-dot {
  83.   padding-top: 1em;
  84.   font-size: 0.75em;
  85. }
  86.  
  87. .calculator .operator-keys .calculator-key {
  88.   color: rgb(248, 165, 10);
  89.   border-right: 0;
  90.   font-size: 3em;
  91. }
  92.  
  93. .calculator .function-keys {
  94.   background: linear-gradient(to bottom, rgb(6, 6, 240) 0%, rgb(52, 5, 240) 100%);
  95. }
  96.  
  97. .calculator .operator-keys {
  98.   background:  linear-gradient(to bottom, rgba(252,156,23,1) 0%, rgba(247,126,27,1) 100%);
  99. }
  100.  
  101. .input-keys {
  102.   width: 100%;
  103. }
  104.  
  105. .operator-keys {
  106.   width: 100%;
  107. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号