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;
 }