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

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

WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。

ミニプログラムに触れたばかりの人にとって、非常に実用的なプロジェクトを始めるのは非常に困難です。ミニプログラムの使い方にすぐに慣れたい場合は、まず簡単な計算機を作ってみることができます。

スクリーンショットを実行

計算機では、インターフェースの美観に対する要求は高くありません。いくつかのビューとボタン コントロールを組み合わせただけなので、インターフェースに多くの労力を費やす必要はありません。重要なのはロジック層です。最初のプロジェクトとして電卓を選んだ理由は、電卓のロジックは単純にも複雑にもでき、初心者のミニプログラムの習熟度に完全に適応できるからです。

メインコード

js:

ページ({
  データ: {
   結果: "0",
   id1:"クリア",
   id2:"戻る",
   id3:"時間",
   id4:"div",
   id5:"mul",
   id6:"サブ",
   id7:"追加",
   id8:"ドット",
   id9:"eql",
   id10:"num_0",
   id11:"num_1",
   id12:"num_2",
   id13:"num_3",
   id14:"num_4",
   id15:"num_5",
   id16:"num_6",
   id17:"num_7",
   id18:"num_8",
   id19:"num_9",
   ボタンドット:false、
   is_time:偽
  },
  クリックボタン: 関数(e) {
   コンソールログ(e);
   var buttonVal = e.target.id;
   var res = this.data.result;
   if(this.data.is_time==true){
    解像度=0
  }
   var newbuttonDot=this.data.buttonDot;
   var 記号;
   ボタン値 >= "num_0" && ボタン値 <= "num_9") {
    var num=buttonVal.split('_')[1];
    (res == "0" || ((res.length-0) -(length-1)) == "=") の場合 {
     解像度 = 数値;
    }
    それ以外 {
     res = res + num;
    }
   }
   それ以外{
    if(buttonVal=="ドット")
    {
     if(!newbuttonDot)
     {
      res = res + '.';
     }
    }
    そうでない場合(buttonVal=="クリア")
    {
     解像度='0';
    }
    そうでない場合(buttonVal=="戻る")
    {
     var 長さ = res.length;
     長さ>1の場合
     {
      res=res.substr(0,長さ-1);
     }
     それ以外{
      解像度='0'; 
     }
    }
    そうでない場合 (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add")
    {
      長さが等しい場合{}
      それ以外{
        res = JSON.stringify(res)
      }  
      var is_sign=res.substr(res.length-1,res.length)
      is_sign=="+"||is_sign=="-"||is_sign=="×"||is_sign=="÷"){
        res=res.substr(0,res.length-1);
      }
     スイッチ(ボタン値){
      ケース "div":
       符号 = '÷';
       壊す;
      ケース「mul」:
       記号 = '×';
       壊す;
      ケース「sub」:
       符号='-';
       壊す;
      ケース「追加」:
       符号='+';
       壊す;
     }
     if(!isNaN(res.length))
     {
      解像度 1
      res=res+sign;
     }
    }
   }
   this.setData({
    is_time:false、
    結果: res、
    ボタンドット:新しいボタンドット、
   });
  },
  等しい: 関数(e){
   var str = this.data.result;
   var アイテム = '';
   var strArray = [];
   var temp = 0;
   for(var i=0;i<=str.length;i++){
    var s = str.charAt(i);
    if((s!='' && s>='0' && s<='9') || s=='.'){
     アイテム=アイテム+s;
    }
    それ以外{
     strArray[temp]=項目;
     温度++;
     strArray[temp]=s;
     温度++;
     アイテム='';
    }
   }
   if(isNaN(strArray[strArray.length-1]))
   {
    strArray.pop();
   }
   変数 数値;
   var res=strArray[0]*1;
   for(var i=1;i<=strArray.length;i=i+2){
    num = strArray[i+1];
    スイッチ(strArray[i]){
     場合 "-":
      res = (res-0)-(num-0);
      壊す;
     ケース「+」:
      res = (res-0) + (num-0);
      壊す;
     ケース「×」:
      res = (res-0)* (num-0);
      壊す;
     ケース「÷」:
     if(数値!='0')
     {
      res = (res-0)/ (num-0);
     }
     それ以外
     {
      解像度 = '∞';
      壊す;
     } 
      壊す;
    }
   }
   this.setData({
    結果:res、
   });
  },
  時間:関数(e){
   var util = require("../../utils/util.js");
   var time = util.formatTime(新しい Date());
   this.setData({
    結果:時間、
    is_time:true
   });
  }})

wxml

<!--index.wxml-->
<view class="project_name">シンプルな計算機</view>
<view class="screen_content">
  <view class="screen">{{結果}}</view>
</ビュー>
<view class="content"> 
 <view class="buttonGroup">
  <button id="{{id1}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">C</button>
  <button id="{{id2}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">BS</button>
  <button id="{{id3}}" bindtap="time" class="buttonitem color" hover-class="shadow">
  <icon type="待機中" color="#66CC33"></icon>
  </ボタン>
  <button id="{{id4}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">÷</button>
 </ビュー> 
 <view class="buttonGroup"> 
  <button id="{{id17}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">7</button>
  <button id="{{id18}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">8</button>
  <button id="{{id19}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">9</button>
  <button id="{{id5}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">×</button>
 </ビュー>
 <view class="buttonGroup">
  <button id="{{id14}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">4</button>
  <button id="{{id15}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">5</button>
  <button id="{{id16}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">6</button>
  <button id="{{id6}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">-</button>
 </ビュー>
 <view class="buttonGroup">
  <button id="{{id11}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">1</button>
  <button id="{{id12}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">2</button>
  <button id="{{id13}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">3</button>
  <button id="{{id7}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">+</button>
 </ビュー>
 <view class="buttonGroup">
  <button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">0</button>
  <button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">.</button>
  <button id="{{id9}}" bindtap="equal" class="equal" hover-class="shadow">=</button>
 </ビュー>
</ビュー>

色:

/**index.wxss**/
ページ{
  背景: #f5f5f5;
 }
 .プロジェクト名{
   位置:絶対;
   上:25px;
   幅:100%;
   テキスト配置: 中央;
   フォントサイズ: 30px;
 }
 .screen_content{
  位置: 固定;
  色: #1b1717;
  背景: #fff;
  フォントサイズ: 40px;
  下部: 390px;
  テキスト配置: 右;
  高さ:100px;
  幅: 100%;
  単語折り返し: 単語を区切る;
  上境界線:1px 実線 #a8a8a8;
  ボーダー下部:1px 実線 #a8a8a8;
 }
 。画面{
  位置: 絶対;
  フォントサイズ: 40px;
  テキスト配置: 右;
  下:0px;
  幅: 96%;
  残り:2%
  単語折り返し: 単語を区切る;
 }
 。コンテンツ{
  位置: 固定;
  下部: 0;
 }
 .ボタングループ{
  ディスプレイ: フレックス;
  flex-direction: 行;
 }
 .ボタン項目{
  テキスト配置: 中央;
  行の高さ: 120rpx;
  幅: 25%;
  境界線の半径: 0;
 }
 .ボタン項目1{
  幅: 192rpx;
  テキスト配置: 中央;
  行の高さ: 120rpx;
  境界線の半径: 0;
 }
 アイコン{
  位置: 絶対;
  上位: 20%
  左: 67rpx;
 }
 。色{
  背景: #fff;
 }
 。等しい{
   幅: 380rpx;
   テキスト配置: 中央;
   行の高さ: 120rpx;
   境界線の半径: 0;
   背景: #fff;
 }
 。影{
  背景: #e9ebe9;
 }

追記

ここでは加算と減算について大まかにしか説明していませんが、このような計算機にはすでに基本的な機能が備わっています。習熟が深まるにつれて、平方や平方根などのより複雑な機能を追加して、小さなプログラムの開発を習得することもできます。

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

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

<<:  MySQL の文字セット utf8 を utf8mb4 に変更する方法

>>:  CentOS7 は Docker のバージョン 19 をデプロイします (簡単なので、従ってください)

推薦する

uniapp は日付と時刻の選択機能を実装します

この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...

MySQL インデックス プッシュダウンを 5 分で理解する

目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...

ファイルの種類を検出するJavaScriptメソッド

目次1. 画像のバイナリデータを表示する方法2. 絵の種類の見分け方3. 画像の種類を検出する方法3...

マウスをホバーすると画像が折りたたまれる効果を実現する CSS

マウスをホバーすると画像が折りたたまれる効果を実現する CSS 1. 実施のポイント折り畳みは複数の...

Eclipse は Tomcat を構成しますが、Tomcat には無効なポート解決策があります

目次1. EclipseがTomcatを構成する2. Tomcat の無効なポートの解決方法方法1:...

React-Dropzone をベースにアップロードコンポーネント機能を開発する (サンプルデモ)

今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...

Angularの親子コンポーネント通信の詳細な説明

目次概要1. 入力および出力プロパティの概要2. 入力属性3. プロパティバインディングは親コンポー...

Linux に ASPNET.Core3.0 ランタイムをインストールするためのサンプル コード

# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...

js で下線とキャメルケースの変換を実装する (複数の方法)

目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...

Docker 経由で CentOS コンテナを作成する手順

目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...

CentOS 環境で NFS リモート ディレクトリ マウントを使用する手順の紹介

目次1. NFS の概要2. NFS構築1. NFSサーバーの構築2. NFSクライアントの構築3....

Centos7でファイルをバックアップするときは、バックアップファイルにバックアップの日付を追加します

Linux は、システム内のデバイス、インターフェース、ファイル、スタートアップ、アプリケーション ...

Vueはプルダウンとスクロールでデータを読み込む例を実装しています

目次ステップ1: インストールステップ2: 引用ステップ3: 使用Webプロジェクトでは、データを読...

Windows Server 2012 でファイル サーバーを構築するための詳細な手順

ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...

検証コード干渉を実装する js (静的)

この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...