WeChat アプレット計算機の例

<!--pages/index/index.wxml-->
<ビュークラス="結果">
  <view class="result-num">{{num}}</view>
  <view class="result-op">{{op}}</view>
</ビュー>
<view class="btns">
  <表示>
    <view hover-class="bg" bindtap="resetBtn">C</view>
    <view hover-class="bg" bindtap="delBtn">DEL</view>
    <view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
    <view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
  </ビュー>
  <表示>
    <view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
    <view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
    <view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
    <view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
  </ビュー>
  <表示>
    <view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
    <view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
    <view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
    <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
  </ビュー>
  <表示>
    <view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
    <view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
    <view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
    <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
  </ビュー>
  <表示>
    <view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
    <view hover-class="bg" bindtap="dotBtn">.</view>
    <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
  </ビュー>
</ビュー>

/* ページ/インデックス/index.wxss */

ページ {
  ディスプレイ: フレックス;
  flex-direction: 列;
  高さ: 100%;
  色: #555;
}

。結果 {
  フレックス: 1;
  背景: #f3f6fe;
  位置: 相対的;
}

.結果番号{
  位置: 絶対;
  フォントサイズ: 27pt;
  下部：5vh;
  右：3vw;
}

.結果-op {
  フォントサイズ: 15pt;
  位置: 絶対;
  下部：1vh;
  右：3vw;
}

.btns{
  フレックス: 1;
}

/* ボタンのスタイル */

.bg {
  背景: rgb(223, 44, 20);
}

.btns{
  フレックス: 1;
  ディスプレイ: フレックス;
  flex-direction: 列;
  フォントサイズ: 17pt;
  上境界線: 1rpx 実線 #ccc;
  左境界線: 1rpx 実線 #ccc;
}

.btns > ビュー {
  フレックス: 1;
  ディスプレイ: フレックス;
}

.btns > 表示 > 表示 {
  フレックスベース: 25%;
  右境界線: 1rpx 実線 #ccc;
  下部境界線: 1rpx 実線 #ccc;
  ボックスのサイズ: 境界線ボックス;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
}

.btns > ビュー:最後の子 > ビュー:最初の子 {
  フレックスベース: 50%;
}

.btns > ビュー:最初の子 > ビュー:最初の子 {
  色: #f00;
}

.btns > ビュー > ビュー:最後の子 {
  色: #fc8e00;
}

// 正確な計算 module.exports = {
  // 追加: function(arg1, arg2) {
    変数 r1, r2, m
    試す {
      r1 = arg1.toString().split(".")[1].length
    } キャッチ (e) {
      r1 = 0
    }
    試す {
      r2 = arg2.toString().split(".")[1].length
    } キャッチ (e) {
      r2 = 0
    }
    // 計算する前にすべての小数を整数に変換します。m は 10 の累乗であり、m = Math.pow(10, Math.max(r1, r2)) に掛ける必要があります。
    // 最後に、返すときにmで割ります
    (arg1 * m + arg2 * m) / m を返す
  },
  // 減算 sub: function(arg1, arg2) {
    変数 r1, r2, m, n
    試す {
      r1 = arg1.toString().split(".")[1].length
    } キャッチ (e) {
      r1 = 0
    }
    試す {
      r2 = arg2.toString().split(".")[1].length
    } キャッチ (e) {
      r2 = 0
    }
    m = Math.pow(10, Math.max(r1, r2))
    //動的制御精度長さ n = (r1 >= r2) ? r1 : r2
    ((arg1 * m - arg2 * m) / m).toFixed(n) を返す
  },
  // mul で乗算: function(arg1, arg2) {
    var m = 0,
      s1 = arg1.toString(),
      s2 = arg2.toString()
    試す {
      m += s1.split(".")[1].length
    } キャッチ (e) {}
    試す {
      m += s2.split(".")[1].length
    } キャッチ (e) {}
    Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m) を返します。
  },
  // div以外: function(arg1, arg2) {
    var t1 = 0,
      t2 = 0、
      r1, r2
    試す {
      t1 = arg1.toString().split(".")[1].length
    } キャッチ (e) {}
    試す {
      t2 = arg2.toString().split(".")[1].length
    } キャッチ (e) {}

    r1 = Number(arg1.toString().replace(".", ""))
    r2 = Number(arg2.toString().replace(".", ""))
    戻り値 (r1 / r2) * Math.pow(10, t2 - t1)
  }
}

 //数字ボタンイベント処理関数numBtn: function(e) {
    var num = e.target.dataset.val
    if (this.data.num === '0' || this.isClear) {
      this.setData({
        番号: 番号
      })
      this.isClear = false
    } それ以外 {
      this.setData({
        数値: this.data.num + 数値
      })
    }
  },

 // オペレータイベント処理関数 opBtn: function(e) {
    var op = this.data.op
    // 前の番号を取得します var num = Number(this.data.num)
    this.setData({
      op: e.target.dataset.val
    })
    if (this.isClear) {
      戻る
    }
    this.isClear = true
    if (this.result === null) {
      this.result = 数値
      戻る
    }
    （op === '+'）の場合{
      this.result = calc.add(this.result, num)
    } そうでない場合 (op === '-') {
      ......
      その他の操作（詳細なコードについては、以下の完全なコードセクションを参照してください）
      ......
    }
    this.setData({
      数値: this.result + ''
    })
  },

// ページ/インデックス/index.js
const calc = require('../../utils/calc.js')

ページ（{

  /**
   * ページの初期データ */
  データ： {
    数値: '0',
    op: ''
  },
  // 結果 result: null,
  // 数直線をクリアするかどうか/*
  クリア済み（値は true）
    演算子をクリックした後、これを true に変更すると、次に数字を入力するときに、*/ をクリックすると表示がクリアされます。
  isClear: false、

  //数字ボタンイベント処理関数numBtn: function(e) {
    var num = e.target.dataset.val
    this.data.num === '0' の場合、 this.isClear になります。
      this.setData({
        番号: 番号
      })
      this.isClear = false
    } それ以外 {
      this.setData({
        数値: this.data.num + 数値
      })
    }
  },

  // オペレータイベント処理関数 opBtn: function(e) {
    var op = this.data.op
    // 前の番号を取得します var num = Number(this.data.num)
    this.setData({
      op: e.target.dataset.val
    })
    if (this.isClear) {
      戻る
    }
    this.isClear = true
    if (this.result === null) {
      this.result = 数値
      戻る
    }
    （op === '+'）の場合{
      this.result = calc.add(this.result, num)
    } そうでない場合 (op === '-') {
      this.result = calc.sub(this.result, num)
    } そうでない場合 (op === '*') {
      this.result = calc.mul(this.result, num)
    } そうでなければ (op === '/') {
      this.result = calc.div(this.result, num)
    } そうでない場合 (op === '%') {
      this.result = this.result % 数値
    }
    this.setData({
      数値: this.result + ''
    })
  },

  // 小数点イベント処理関数 dotBtn: function() {
    if (this.isClear) {
      this.setData({
        数値: '0.'
      })
      this.isClear = false
      戻る
    }
    (this.data.num.indexOf('.') >= 0)の場合{
      戻る
    }
    this.setData({
      数値: this.data.num + '.'
    })
  },

  // DELボタン処理関数delBtn: function() {
    var num = this.data.num.substr(0, this.data.num.length - 1)
    this.setData({
      数値: 数値 === '' ? '0' : 数値
    })
  },

  // C ボタンイベント処理関数 resetBtn: function() {
    this.result = null
    this.isClear = false
    this.setData({
      数値: '0',
      op: ''
    })
  }
})