WeChatアプレットが計算機機能を実装

WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきました。APP開発やWeb開発を専門とする人たちもミニプログラムの将来性に気づき、ミニプログラムの分野に参入しています。私も独学でミニプログラムの学習方法を学びました。初期の頃は、多くの人と同じように、わからないことがあり、他の人に聞きたいと思っていました。Tiebaに行きましたが、広告が多く、問題解決を手伝ってくれる人はいませんでした。

今日は初心者に電卓の作り方を教えます。C がプログラミング初心者に最適な言語だとしたら、電卓は小さなプログラムの入門デモと考えるべきです。初心者が次のコードを注意深く理解し、 wxml から js、そして wxss (ページレイアウト) まで理解してくれることを願っています。各コードの意味を理解する必要があります。

さっそく、効果図をご紹介します。これは私が始めた頃に作った計算機です。とてもシンプルで、ロジックもとてもシンプルです。私たちの周りで最も一般的な計算機のロジックです。このデモから、wxss ページのレイアウトに関する知識がさらに深まったと思います。

添付コード:

アプリ.json

 {
  「ページ」:[
    「ページ/インデックス/インデックス」、
    「ページ/ログ/ログ」
  ]、
  "ウィンドウ"：
  {
  "ナビゲーションバーの背景色": "#000000",
  "ナビゲーションバーのテキストスタイル": "白", 
  "navigationBarTitleText": "スマート計算機"
  },
 "tabBar": { //さらに、私のtabBarは下のタブを設定するために使用されます "color":"#ff69b4",
   "選択された色":"#0000ff",
   "背景色":"#ffff00",
  「リスト」: [
    {
      "ページパス": "ページ/インデックス/インデックス",
      "テキスト": "コンピューター"
    },
    {
      "pagePath": "ページ/ログ/ログ",
      "text": "ログ"
    },
    {
      "pagePath":"ページ/ログ/ログ",
      "text":"家に帰る"
    }
  ]
}
}

/*app.wxss/*

。容器 {
  高さ: 100%;
  ディスプレイ: フレックス;
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
  パディング: 200rpx 0;
  ボックスのサイズ: 境界線ボックス;
}

**これらのコンポーネントの一部がわからない場合は、WeChatミニプログラムの公式Webサイトにアクセスして、何度か読んでみることをお勧めします。

インデックス.wxml:

<テンプレート名="計算機キー">
  <button hover-start-time="{{5}}" hover-stay-time="{{100}}" hover-class="calculator-key-hover" data-key="{{className}}" class="calculator-key {{className}}">{{display}}</button>
</テンプレート>

<view class="計算機">
  <view class="calculator-display">
    <view class="calculator-display-text">{{displayValue}}</view>
  </ビュー>
  <view class="電卓キーパッド">
    <view class="入力キー">
      <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 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 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: '='}}"/>
    </ビュー>
  </ビュー>
</ビュー>

インデックス:

ページ（{
  データ： {
    value: null, // 最後の計算の結果。null は最後の計算の結果がないことを意味します。displayValue: '0', // 値を表示します。operator: null, // 最後の計算の記号。null は未完了の計算がないことを意味します。waitingForOperand: false // 前のキーが計算記号であるかどうか。},

  onLoad: 関数 (オプション) {
    this.calculatorOperations = {
      'キー分割': (前の値、次の値) => 前の値 / 次の値、
      'キー乗算': (前の値、次の値) => 前の値 * 次の値、
      'key-add': (前の値、次の値) => 前の値 + 次の値、
      'key-subtract': (前の値、次の値) => 前の値 - 次の値、
      'key-equals': (前の値、次の値) => 次の値
    }
  },

  /* AC 操作、解放前の時間に戻る*/
  すべてクリア() {
    this.setData({
      値: null、
      表示値: '0',
      演算子: null、
      オペランド待ち: false
    })
  },

  /* 現在表示されている入力値のみをクリアします*/
  クリアディスプレイ() {
    this.setData({
      表示値: '0'
    })
  },

  onTapFunction: 関数 (イベント) {
    定数キー = event.target.dataset.key;

    スイッチ（キー）{
      ケース 'キークリア':
        if (this.data.displayValue !== '0') {
          this.clearDisplay();
        } それ以外 {
          this.clearAll();
        }

        壊す;

      case 'キー-サイン':
        var newValue = parseFloat(this.data.displayValue) * -1

        this.setData({
          表示値: 文字列(新しい値)
        })

        壊す;

      ケース 'キーパーセント':
        const fixedDigits = this.data.displayValue.replace(/^-?\d*\.?/, '')
        var newValue = parseFloat(this.data.displayValue) / 100

        this.setData({
          表示値: 文字列(newValue.toFixed(fixedDigits.length + 2))
        });

        壊す;

      デフォルト：
        壊す;
    }
  },

  onTapOperator: 関数 (イベント) {
    次の演算子は、event.target.dataset.key に設定されます。
    const inputValue = parseFloat(this.data.displayValue);

    if (this.data.value == null) {
      this.setData({
        値: 入力値
      });
    } それ以外の場合 (this.data.operator) {
      const currentValue = this.data.value || 0;
      const newValue = this.calculatorOperations[this.data.operator](currentValue, inputValue);

      this.setData({
        値: 新しい値、
        表示値: 文字列(新しい値)
      });
    }

    this.setData({
      オペランド待ち: true、
      演算子: nextOperator
    });
  },

  onTapDigit: 関数 (イベント) {
    const key = event.target.dataset.key; // データキーに従ってキーをマークします if (key == 'key-dot') {
      // ピリオドを押します if (!(/\./).test(this.data.displayValue)) {
        this.setData({
          表示値: this.data.displayValue + '.',
          オペランド待ち: false
        })
      }
    } それ以外 {
      // 数字キーを押します const digit = key[key.length - 1];

      if (this.data.waitingForOperand) {
        this.setData({
          displayValue: 文字列(数字)、
          オペランド待ち: false
        })
      } それ以外 {
        this.setData({
          displayValue: this.data.displayValue === '0' ? 文字列(数字): this.data.displayValue + 数字
        })
      }
    }
  }
})

インデックス.wxss:

ページ {
  高さ:100%;
}

.計算機{
  幅: 100%;
  高さ：100vh;
  境界線:実線 1px;
  背景: rgb(238, 5, 5);
  位置: 相対的;
  ボックスシャドウ: 0px 0px 20px 0px rgb(211, 41, 41);
  ディスプレイ: フレックス;
  flex-direction: 列;
  ボックスのサイズ: 境界線ボックス;
}

.calculator-display { /*背景色を表示*/
  背景: #2c2a2c;
  フレックス: 1;
}

/*TODO: テキストの垂直中央揃えの問題を解決し、デジタルカラーを表示する*/
.計算機の表示テキスト{
  パディング: 0 30px;
  フォントサイズ: 3em;
  色: rgb(245, 245, 248);
  テキスト配置: 右;
}

.電卓キーパッド{
  ディスプレイ: フレックス;

}

.計算機 .ファンクションキー {
  ディスプレイ: フレックス;
  色:rgb(245, 13, 13);

}

.計算機 .数字キー {
  背景: #0808f7;
  ディスプレイ: フレックス;
  flex-direction: 行;
  flex-wrap: ラップを逆にする;
}

.calculator-key-hover { /*ボタンを押した後のボタンの色*/
  ボックスシャドウ: インセット 0px 0px 25vw 0px hsla(71, 90%, 48%, 0.898);
}



.計算機キー{
背景色:水色;

  表示: ブロック;
  幅: 25vw;
  高さ：25vw;
  行の高さ: 25vw;
  上境界線: 1px実線rgb(6, 245, 78);
  右境界線: 1px実線rgb(19, 241, 12);
  テキスト配置: 中央;
  ボックスのサイズ: 境界線ボックス;
}

.計算機 .関数キー .計算機キー {
  フォントサイズ: 2em;

}

.計算機 .数字キー .計算機キー {
  フォントサイズ: 3em;
}

.計算機 .数字キー .キー0 {
  幅：50vw;
  テキスト配置: 左;
  左パディング: 9vw;
}

.計算機 .数字キー .ドットキー {
  パディングトップ: 1em;
  フォントサイズ: 0.75em;
}

.計算機 .演算子キー .計算機キー {
  色: rgb(248, 165, 10);
  右境界線: 0;
  フォントサイズ: 3em;
}

.計算機 .ファンクションキー {
  背景: linear-gradient(下へ、rgb(6, 6, 240) 0%、rgb(52, 5, 240) 100%);
}

.計算機 .演算子キー {
  背景: linear-gradient(下へ、rgba(252,156,23,1) 0%、rgba(247,126,27,1) 100%);
}

.入力キー{
  幅: 100%;
}

.演算子キー {
  幅: 100%;
}