WeChatアプレットがシンプルな計算機機能を実装

WeChatアプレットがシンプルな計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

wxml

<ビュークラス='コンテンツ'>
  <入力値='{{計算}}'></input>
  <ビュークラス='ボックス'>
    <button class='yellow-color'>バックスペース</button>
    <button class='yellow-color' bindtap='empty'>画面をクリア</button>
    <button class='yellow-color'>❤</button>
    <button bindtap='add' data-text='+' class='yellow-color'>+</button>
  </ビュー>

  <ビュークラス='ボックス'>
    <button bindtap='add' data-text='9'>9</button>
    <button bindtap='add' data-text='8'>8</button>
    <button bindtap='add' data-text='7'>7</button>
    <button bindtap='add' class='yellow-color' data-text='-'>-</button>
  </ビュー>

  <ビュークラス='ボックス'>
    <button bindtap='add' data-text='6'>6</button>
    <button bindtap='add' data-text='5'>5</button>
    <button bindtap='add' data-text='4'>4</button>
    <button bindtap='add' class='yellow-color' data-text='*'>*</button>
  </ビュー>

  <ビュークラス='ボックス'>
    <button bindtap='add' data-text='3'>3</button>
    <button bindtap='add' data-text='2'>2</button>
    <button bindtap='add' data-text='1'>1</button>
    <button bindtap='add' data-text='/' class='yellow-color'>÷</button>
  </ビュー>

  <ビュークラス='ボックス'>
    <button bindtap='add' data-text='0'>0</button>
    <button bindtap='追加' data-text='.'>.</button>
    <button>履歴</button>
    <button class='yellow-color' bindtap='res'>=</button>
  </ビュー>


</ビュー>

wxss

入力{
  幅: 95%;
  高さ: 250rpx;
  マージン: 0 自動;
  下部マージン: 20rpx;
  下部境界線: 1rpx 実線 #ccc;
}

。箱 {
  ディスプレイ: フレックス;
}
ボタン {
  幅: 20%;
  高さ: 150rpx;
  下部マージン: 20rpx;
  行の高さ: 150rpx;
  背景色:rgb(0, 150, 250);
  色: 白;
}

.黄色 {
  背景色: rgb(247, 142, 24)
}

JS

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

ページ({
  データ: {
    計算:""、
    結果:0,
    文字:[], // 演算子記号 オペランド: [], // 数値 temp:false
  },

  // データを入力するための入力ボックス add:function(e) {
    入力をe.currentTarget.dataset.textとします。
    var that = this;
    if (入力 == '+' || 入力 == '-' || 入力 == '*' || 入力 == '/') {
      this.data.temp = false; // 前回が演算子であったかどうかを記録するために使用されます var item = 'character[' + this.data.character.length+ ']';
      this.setData({
        [項目] :入力
      }) 
    } それ以外 {
      var item = 'オペランド['+this.data.operand.length+']';
     
      if (that.data.temp) {
        // 前の値を取得する var res = 'operand[' + (this.data.operand.length-1) + ']'
        
        var ress = that.data.operand.length-1;
        var xyz = that.data.operand[ress] * 10 + parseInt(input);
        that.setData({
          [解像度]:xyz
        })
      } それ以外 {
        入力 = parseInt(入力);
        .data.temp = true; となります。
        that.setData({
          [項目]: 入力
        })
      }
    }
    // すべてのコンテンツを表示ボックスに入れる this.setData({
      計算:this.data.calculation+input
    })

  },

  // 答えを計算する res:function() {
    console.log(このデータ文字の長さ);
    console.log(このデータオペランドの長さ)
    var character_len = this.data.character.length;
    var operand_len = this.data.operand.length;
    console.log(オペランド長 - 文字長)
    if (オペランド長 - 文字長 == 1) {
      this.data.result = this.data.operand[0];
      console.log("初期値"+this.data.result);
      for(var i=0;i<character_len;i++) {
        if(this.data.character[i] == '+') {
          this.data.result = this.data.result + this.data.operand[i + 1];

        }
        if (this.data.character[i] == '-') {
          this.data.result = this.data.result - this.data.operand[i + 1];

        }
        if (this.data.character[i] == '*') {
          this.data.result = this.data.result * this.data.operand[i + 1];

        }
        if (this.data.character[i] == '/') {
          this.data.result = this.data.result / this.data.operand[i + 1];

        }
        
      }
    } それ以外 {
      this.setData({
        結果: 「入力が正しくありません。データを消去して再入力してください」
      })
    }

    this.setData({
     計算:this.data.result
    })
  },

  // 画面をクリアする empty:function() {
    this.setData({
      計算: "",
      結果: 0,
      文字: [], // 演算子記号 オペランド: [], // 数値 temp: false
    }
  }
})

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットはシンプルな計算機を実装する
  • WeChatアプレットで計算機機能を実装する
  • WeChatアプレットがシンプルな計算機機能を実装
  • WeChatアプレットが計算機機能を実装
  • WeChat アプレット計算機の例
  • WeChatアプレットが計算機機能を実装
  • WeChatアプレットはシンプルな計算機を実装する
  • WeChat アプレットのシンプルな計算機の実装コード例
  • WeChat アプレット計算機の例

<<:  MySQL インデックス カバレッジの例の分析

>>:  Windows 10 の仮想マシンに Mac システムをインストールするグラフィック チュートリアル

推薦する

Mac に MySQL データベースをインストールし、環境変数を設定するためのグラフィック チュートリアル

目次MySQLをインストールする環境変数の設定MySQLをインストールするmysqlをダウンロードし...

必見の JavaScript 面接質問 10 選のまとめ (おすすめ)

1.これは1. 誰が誰に電話をかけますか?例: 関数foo(){ console.log(&quo...

js タグ構文の使用法の詳細

目次1. ラベルステートメントの紹介2. ラベルステートメントの使用序文:日常の開発では、プログラム...

純粋な CSS3 で蝶が羽ばたく様子を再現する例

純粋なCSS3で蝶が羽ばたく様子を再現。まずはその効果をご覧ください どうですか?効果はかなりいいで...

フレックスレイアウトにおけるflex-growとflex-shrinkの計算方法の詳しい説明

CSS のFlex(彈性布局)すると、Web ページのレイアウトを柔軟に制御できます。Flex Fl...

Vue データ内のプロパティをランダムに変更すると、ビューは更新されますか?

インタビュアー: Vue のソースコードを読んだことはありますか?応募者:あります。インタビュアー:...

MySQLデータベースを別のマシンに移行する方法の詳細な説明

1. まず、移行サーバー上のデータ ファイルを見つけます。MySQL 5.7 とデフォルトのインスト...

Alibaba Cloud Centos7.X で外部にポートを開く方法

一言で言えば、大手メーカーからクラウド サーバーを購入する場合は、セキュリティ グループに移動して、...

HTML テーブル マークアップ チュートリアル (15): テーブル タイトル

<br />このタグを使用すると、表のタイトルを直接追加し、タイトル テキストの配置プロ...

CentOS 7.x に ZSH ターミナルをインストールする方法

1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...

Dockerカスタムネットワークの詳細な紹介

目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...

MySQL でテーブルデータをクリアする 2 つの方法とその違い

MySQL でデータを削除するには 2 つの方法があります。切り詰めは大まかな伐採の一種である削除は...

MySQL複合インデックスの概要

目次1. 背景2. 複合インデックスを理解する3. 左端一致原則4. フィールド順序の影響5. 単一...

Navicat で MySQL データベースのパスワードを変更する複数の方法

方法1: SET PASSWORDコマンドを使用するまずMySQLにログインします。フォーマット: ...

Centos7にTenda U12ワイヤレスネットワークカードドライバーをインストールする際の問題を解決する

解決プロセス:方法1: CentOS7.3 のデフォルトのカーネル バージョンは低く、3.10.0-...