E企盈营销工具技术服务商 热线:4006-838-530

微信小程序入门之计算器

E企盈直播平台营销卖货系统

微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景,在小程序领域也掺上一脚,本人也是自学小程序的,初期跟很多人一样,遇到一些不懂的想问问别人,到贴吧去,一大堆广告,根本没人帮忙解决问题。今天教一些刚入门的同学做一款计算器,如果C语言是编程的最佳入门语言,那计算器应该算得上是小程序的入门demo了,希望刚入门的同学们认真品味下面的代码,从wxml到js,再到wxss(页面的布局),每个代码都要弄懂他的意思废话不多说,先上效果图,这是我入门时候自己做的一款计算器,很简单,逻辑也很单一,只是我们身边最常见的计算器的逻辑,我觉得从这个demo我更深刻学习到了wxss页面的布局知识 代码附上: app.json {  “pages”:[    “pages/index/index”,    “pages/logs/logs”  ],  “window”:  {  “navigationBarBackgroundColor”: “#000000”,  “navigationBarTextStyle”: “white”,   “navigationBarTitleText”: “智能计算器”  }, “tabBar”: {                         //补充说一下,我这个tabBar是用来设置底部tab的   “color”:”#ff69b4″,   “selectedColor”:”#0000ff”,   “backgroundColor”:”#ffff00″,  “list”: [    {      “pagePath”: “pages/index/index”,      “text”: “计 算 机”    },    {      “pagePath”: “pages/logs/logs”,      “text”: “日志”    },    {      “pagePath”:”pages/logs/logs”,      “text”:”回家”    }  ]}}/*app.wxss/*.container {  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  padding: 200rpx 0;  box-sizing: border-box;} **其中一些组件不认识的话, 建议到微信小程序官网多看几遍  https://developers.weixin.qq.com/miniprogram/dev/framework/config.html**index.wxml:template name=”calculator-key”  button hover-start-time=”{{5}}” hover-stay-time=”{{100}}” hover-class=”calculator-key-hover” data-key=”{{className}}” class=”calculator-key {{className}}”{{display}}/button/templateview class=”calculator”  view class=”calculator-display”    view class=”calculator-display-text”{{displayValue}}/view  /view  view class=”calculator-keypad”    view class=”input-keys”      view class=”function-keys” catchtap=”onTapFunction”        template is=”calculator-key” data=”{{className: ‘key-clear’, display: clearDisplay ? ‘C’ : ‘C’}}”/        template is=”calculator-key” data=”{{className: ‘key-sign’, display: ‘+/-‘}}”/        template is=”calculator-key” data=”{{className: ‘key-percent’, display: ‘%’}}”/   /view      view class=”digit-keys” catchtap=”onTapDigit”        template is=”calculator-key” data=”{{className: ‘key-0’, display: ‘0’}}”/        template is=”calculator-key” data=”{{className: ‘key-dot’, display: ‘●’}}”/        template is=”calculator-key” data=”{{className: ‘key-1’, display: ‘1’}}”/        template is=”calculator-key” data=”{{className: ‘key-2’, display: ‘2’}}”/        template is=”calculator-key” data=”{{className: ‘key-3’, display: ‘3’}}”/        template is=”calculator-key” data=”{{className: ‘key-4’, display: ‘4’}}”/        template is=”calculator-key” data=”{{className: ‘key-5’, display: ‘5’}}”/        template is=”calculator-key” data=”{{className: ‘key-6’, display: ‘6’}}”/        template is=”calculator-key” data=”{{className: ‘key-7’, display: ‘7’}}”/        template is=”calculator-key” data=”{{className: ‘key-8’, display: ‘8’}}”/        template is=”calculator-key” data=”{{className: ‘key-9’, display: ‘9’}}”/      /view    /view    view class=”operator-keys” catchtap=”onTapOperator”        template is=”calculator-key” data=”{{className: ‘key-divide’, display: ‘÷’}}”/        template is=”calculator-key” data=”{{className: ‘key-multiply’, display: ‘×’}}”/        template is=”calculator-key” data=”{{className: ‘key-subtract’, display: ‘−’}}”/        template is=”calculator-key” data=”{{className: ‘key-add’, display: ‘+’}}”/        template is=”calculator-key” data=”{{className: ‘key-equals’, display: ‘=’}}”/    /view  /view/viewindex.js:Page({  data: {    value: null, // 上次计算后的结果,null表示没有上次计算的结果    displayValue: ‘0’, // 显示数值    operator: null, // 上次计算符号,null表示没有未完成的计算    waitingForOperand: false // 前一按键是否为计算符号  },  onLoad: function (options) {    this.calculatorOperations = {      ‘key-divide’: (prevValue, nextValue) = prevValue / nextValue,      ‘key-multiply’: (prevValue, nextValue) = prevValue * nextValue,      ‘key-add’: (prevValue, nextValue) = prevValue + nextValue,      ‘key-subtract’: (prevValue, nextValue) = prevValue – nextValue,      ‘key-equals’: (prevValue, nextValue) = nextValue    }  },  /* AC操作,一下回到解放前 */  clearAll() {    this.setData({      value: null,      displayValue: ‘0’,      operator: null,      waitingForOperand: false    })  },  /* 仅清空当前显示的输入值 */  clearDisplay() {    this.setData({      displayValue: ‘0’    })  },  onTapFunction: function (event) {    const key = event.target.dataset.key;    switch (key) {      case ‘key-clear’:        if (this.data.displayValue !== ‘0’) {          this.clearDisplay();        } else {          this.clearAll();        }        break;      case ‘key-sign’:        var newValue = parseFloat(this.data.displayValue) * -1        this.setData({          displayValue: String(newValue)        })        break;      case ‘key-percent’:        const fixedDigits = this.data.displayValue.replace(/^-?d*.?/, ”)        var newValue = parseFloat(this.data.displayValue) / 100        this.setData({          displayValue: String(newValue.toFixed(fixedDigits.length + 2))        });        break;      default:        break;    }  },  onTapOperator: function (event) {    const nextOperator = event.target.dataset.key;    const inputValue = parseFloat(this.data.displayValue);    if (this.data.value == null) {      this.setData({        value: inputValue      });    } else if (this.data.operator) {      const currentValue = this.data.value || 0;      const newValue = this.calculatorOperations[this.data.operator](currentValue, inputValue);      this.setData({        value: newValue,        displayValue: String(newValue)      });    }    this.setData({      waitingForOperand: true,      operator: nextOperator    });  },  onTapDigit: function (event) {    const key = event.target.dataset.key; // 根据data-key标记按键    if (key == ‘key-dot’) {      // 按下点号      if (!(/./).test(this.data.displayValue)) {        this.setData({          displayValue: this.data.displayValue + ‘.’,          waitingForOperand: false        })      }    } else {      // 按下数字键      const digit = key[key.length – 1];      if (this.data.waitingForOperand) {        this.setData({          displayValue: String(digit),          waitingForOperand: false        })      } else {        this.setData({          displayValue: this.data.displayValue === ‘0’ ? String(digit) : this.data.displayValue + digit        })      }    }  }})index.wxss:page {  height:100%;}.calculator {  width: 100%;  height: 100vh;  border:solid 1px;  background: rgb(238, 5, 5);  position: relative;  box-shadow: 0px 0px 20px 0px rgb(211, 41, 41);  display: flex;  flex-direction: column;  box-sizing: border-box;}.calculator-display {     /*显示器背景颜色*/  background: #2c2a2c;  flex: 1;}/*TODO:解决文本垂直居中问题,显示器数字颜色*/.calculator-display-text {  padding: 0 30px;  font-size: 3em;  color: rgb(245, 245, 248);  text-align: right;}.calculator-keypad {  display: flex;}.calculator .function-keys {  display: flex;  color:rgb(245, 13, 13);}.calculator .digit-keys {  background: #0808f7;  display: flex;  flex-direction: row;  flex-wrap: wrap-reverse;}.calculator-key-hover {   /*按钮按下以后的颜色*/  box-shadow: inset 0px 0px 25vw 0px hsla(71, 90%, 48%, 0.898);}.calculator-key {background-color:aqua;  display: block;  width: 25vw;  height: 25vw;  line-height: 25vw;  border-top: 1px solid rgb(6, 245, 78);  border-right: 1px solid rgb(19, 241, 12);  text-align: center;  box-sizing: border-box;}.calculator .function-keys .calculator-key {  font-size: 2em;}.calculator .digit-keys .calculator-key {  font-size: 3em;}.calculator .digit-keys .key-0 {  AD:【E企盈直播系统开发公司】E企盈系统专业开发:万商直播系统开发,直播系统,直播平台系统源码,小程序直播,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序入门之计算器
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏