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 をデプロイします (簡単なので、従ってください)

推薦する

JavaScriptのプリコンパイルを見てみましょう(概要)

JSランニング三部作js実行コードは3つのステップに分かれています構文解析プリコンパイル解釈Jav...

Vue Element-ui テーブルはツリー構造テーブルを実現します

この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...

画像拡大鏡効果のJSバージョン

この記事では、画像拡大鏡効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容...

Linux でユーザーをグループに追加する 4 つの方法の概要

序文Linux グループは、Linux でユーザー アカウントを管理するために使用される組織単位です...

この記事はPReact10.5.13のソースコードを理解するのに役立ちます

目次render.js 部分create-context.js 部分差分部分Reactのソースコード...

JavaScriptで配列かどうかを判断するためのさまざまな方法のまとめ

目次序文配列.isArrayコンストラクタインスタンスプロトタイプオブジェクト.プロトタイプ.toS...

選択にスタイルを追加するための純粋な CSS (スクリプトなし) 実装

通常は ul、li を介して選択のデフォルト スタイルを変更して、実現をシミュレートします。このよう...

Windows に異なる (2 つの) バージョンの MySQL データベースをインストールする詳細なチュートリアル

1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...

MySQL の高度な機能 - データ テーブル パーティショニングの概念とメカニズムの詳細な説明

目次パーティション分割メカニズムSELECTクエリINSERT操作DELETE操作更新操作パーティシ...

Python スクリプトを Ubuntu で直接実行する方法

翻訳プログラムを例に挙げてみます。前回はWindowsでのアプリケーションのパッケージ化についてお話...

CocosCreatorメッセージ配信メカニズムの詳細な説明

概要この記事は、ゲームビジネスアーキテクチャに関連するコンテンツの紹介から始まります。ゲームビジネス...

Reactは二次連結(左右連結)を実現する

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...

MySQL 権限昇格のさまざまな形態の概要

目次1. Webshel​​lを書く出力ファイルにシェルを書き込むログファイル書き込みシェル2. U...

nginx keepaliveの具体的な使い方

http1.1 プロトコルのデフォルトのリクエスト ヘッダーでは、図に示すように、デフォルトで ke...

Linux RabbitMQ クラスタ構築プロセス図

1. 全体的な手順冒頭で、RabbitMQ サービスをインストールして実行する方法を紹介しましたが、...