WeChat アプレット計算機の例

WeChat アプレット計算機の例

この記事では、参考までに、計算機を実装するための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;
}

ページロジック

ユーティリティ–>calc.js

計算プロセスは、2 つの数値のうち最も大きい 10 の累乗を小数点に掛けて整数に変換し、高精度の計算を実行できるようにし、最後に結果を対応する 10 の累乗で割ります。

例えば

// 正確な計算 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 + ''
    })
  },

すべてのjs

// ページ/インデックス/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: ''
    })
  }
})

事例ダウンロード: WeChat アプレット計算機事例

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

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

<<:  同じ日の最初の3つのデータを取得するためのMySQLタイムラインデータ

>>:  Linux centos7 に phpMyAdmin をインストールするチュートリアル

推薦する

MySQL グループ化クエリと集計関数

概要私たちは、双十一に天猫で化粧品を購入する人の平均支出額を知りたい(商品の価格帯を見つけるのに役立...

重要なmysqlログファイルの概要

著者: 丁易出典: https://chengxuzhixin.com/blog/post/mysq...

MySQL 8.0.12 クイックインストールチュートリアル

MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...

一般的な XHTML タグの使用方法の紹介

XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...

HTML メタタグの一般的な使用例のコレクション

マタタグとは<meta> 要素は、検索エンジン向けの説明やキーワード、更新頻度など、ペー...

カルーセル効果を実現するための純粋なjs

この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...

Linux で最も頻繁に使用されるターミナル コマンドのトップ 10 のリストを取得します。

私が最も頻繁に使用するコマンドは次の通りです:選択肢CDギットls ssh須藤数週間前、私はこの R...

MySQLはデフォルトのエンジンと文字セットの詳細を変更します

目次1. データベースエンジン1.1 ビューデータベースエンジン1.2 デフォルトのデータベースエン...

MySql テーブル、データベース、シャーディング、パーティショニングの知識の詳細な説明

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

Mysql で自動増分主キー ID を更新するときに問題が発生しました

目次自動インクリメント ID を更新する理由は何ですか?質問解決方法これは私が知っている問題ですが、...

HTML の基本 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細

1.位置:固定一部の Web サイトの右下隅にあるポップアップ ウィンドウなどの、ブラウザーを基準と...

MySQLの指定されたテーブルからデータをエクスポートする例の詳細な説明

指定されたテーブルからデータをエクスポートするMySQLの詳細な説明必要とする: 1. テーブルはす...

iptables および firewalld ツールを使用して Linux ファイアウォール接続ルールを管理する

ファイアウォールファイアウォールは一連のルールです。パケットが保護されたネットワーク空間に出入りする...

より人気がありクリエイティブなダーク背景のウェブデザインの例

暗い背景スタイルのページ デザインは非常に人気があり、シックでエレガント、そして非常にクリエイティブ...