WeChatアプレットで計算機機能を実装する

この記事は、WeChat アプレットを使用して作成された簡単な計算機です。興味のある方はご覧ください。

ページセクション

<ビュークラス='ボックス'>
     <view class='txt'>{{screenNum}}</view> 
    <view capture-bind:touchstart="compute">
     <表示>
       <button data-val='clear' class='boxtn btn1'>AC</button>
       <button data-val='back' class='boxtn btn1'>←</button>
       <button data-val='#' class='boxtn btn1'>#</button>
       <button data-val='/' class='boxtn btn'>/</button>
     </ビュー>
       <表示>
       <button data-val='7' class='boxtn'>7</button>
       <button data-val='8' class='boxtn'>8</button>
       <button data-val='9' class='boxtn'>9</button>
       <button data-val='*' class='boxtn btn'>*</button>
     </ビュー>
       <表示>
       <button data-val='4' class='boxtn'>4</button>
       <button data-val='5' class='boxtn'>5</button>
       <button data-val='6' class='boxtn'>6</button>
       <button data-val='-' class='boxtn btn'>-</button>
     </ビュー>
       <表示>
       <button data-val='1' class='boxtn'>1</button>
       <button data-val='2' class='boxtn'>2</button>
       <button data-val='3' class='boxtn'>3</button>
       <button data-val='+' class='boxtn btn'>+</button>
     </ビュー>
       <表示>
       <button data-val='1' class='boxtn btn2'>0</button>
       <button data-val='.' class='boxtn'>.</button>
       <button data-val='=' class='boxtn btn'>=</button>
     </ビュー>
    </ビュー>
</ビュー>

スタイルセクション

。箱{
  幅:100%;
  高さ: 700ピクセル;
  背景: #000;
}
。TXT{
  色: #fff;
  幅: 100%;
  高さ:120px;
  フォントサイズ: 50px;
  テキスト配置: 右;
}
.boxtn{
  幅: 90ピクセル;
  高さ:90px;
  表示:ブロック;
  フロート:左;
  境界線の半径: 50%;
  行の高さ: 90px;
  テキスト配置: 中央;
  左マージン: 3px;
  上マージン: 5px;
  色:#fff;
  背景: #333333;
  フォントの太さ: 太字;
  フォントサイズ: 25px;
}
.btn{
  背景: #f09a37;
}
.btn1{
  背景: #a5a5a5;
  色:#000;
}
.btn2{
  幅: 180ピクセル;
  境界線の半径: 40px;
}

js部分

//index.js
//アプリケーションインスタンスを取得する const app = getApp()

ページ（{

  /**
   * ページの初期データ */
  データ： {
    screenNum: 0, //画面に表示される数値 currentNum: '', //現在の入力数値 storage: 0, //保存されている数値 operator: '', //演算子 off: false,
  },

  計算: 関数 (e) {
    var btn_num = e.target.dataset.val;
    var obj = this;
    if (!isNaN(btn_num)) {
      obj.data.off == trueの場合{
        obj.data.currentNum = ''
        obj.data.off = false;
      }
      obj.data.currentNum += btn_num
      obj.data.currentNum = 数値(obj.data.currentNum);
      obj.data.currentNum = obj.data.currentNum.toString();
    } それ以外 {
      スイッチ (btn_num) {
        ケース '+':
        場合 '-'：
        場合 '*'：
        場合 '/'：
        '='の場合:
          // 画面上の現在の数値と演算子を変数に格納します。if (obj.data.storage == 0) {
            obj.data.storage = obj.data.currentNum;
            obj.data.operator = btn_num;
          } それ以外 {
            obj.data.off が true の場合 {
              （obj.data.operator == '+'）の場合{
                obj.data.currentNum = 数値(obj.data.storage) + 数値(obj.data.currentNum)
              } そうでない場合 (obj.data.operator == '-') {
                obj.data.currentNum = 数値(obj.data.storage) - 数値(obj.data.currentNum)
              } そうでない場合 (obj.data.operator == '*') {
                obj.data.currentNum = 数値(obj.data.storage) * 数値(obj.data.currentNum)
              } そうでない場合 (obj.data.operator == '/') {
                obj.data.currentNum = 数値(obj.data.storage) / 数値(obj.data.currentNum)
              }
            }
            obj.data.storage = obj.data.currentNum;
            obj.data.operator = btn_num;
          }

          obj.data.off = true;
          壊す;
        ケース 'クリア':
          obj.data.storage = 0;
          obj.data.currentNum = '0';
          obj.data.operator = '';
          壊す;
        ケース「戻る」:
          obj.data.currentNum = obj.data.currentNum.slice(0, -1);
          obj.data.currentNum == ''の場合{
            obj.data.currentNum = '0';
          }
          壊す;
        場合 '。'：
          if (obj.data.currentNum.indexOf('.') == -1) { // "." が含まれているかどうかを確認します
            obj.data.currentNum += btn_num
          }
          壊す;
      }
    }
    obj.setData({
      画面番号: obj.data.currentNum
    })
  },

})

効果図は以下のとおりです