WeChatアプレットはシンプルな計算機を実装する

WeChatアプレットはシンプルな計算機を実装する

参考までにWeChatアプレットで書かれた簡単な計算機です。具体的な内容は次のとおりです。

jisaunqi.js より

// ページ/jisuanqi/jisuanqi.js
ページ({

  /**
   * ページの初期データ */
  データ: {
    結果: "0",
    弦:""、
    cal:"",
    数値1:"",
    数値2:""
  },
  btSubmit:function(e){
    コンソールログ(e);
    var num1 = this.data.num1;
    var cal = this.data.cal;
    var num2 = this.data.num2;
    var char = e.target.id;
    var 文字列 ;
    if((char>="0"&&char<="9"||char=='.')&&cal==""){
      num1=num1+文字;
      this.setData({
        数値1:数値1,
      })
    }
    そうでない場合((char>="0"&&char<="9"||char=='.')&&cal!=""){
      num2=num2+文字;
      this.setData({
        数値2:数値2,
      })
    }
    それ以外 {
      cal=文字;
      this.setData({
        cal:cal、
      })
    }
    this.setData({
     文字列:num1+cal+num2
    })
  },
  クリーン:関数(e){
    this.setData({
      弦:""、
      数値1:"",
      数値2:"",
      cal:""
    })
  },
  計算:関数(e){
    var num1 = this.data.num1;
    var num2 = this.data.num2;
    var cal = this.data.cal;
    var 結果;
    スイッチ(cal){
      case '+':結果=num1*1+num2*1;break;
      case '-':結果=num1*1-num2*1;break;
      case '*':結果=(num1*1)*(num2*1);break;
      case '/':結果=(num1*1)/(num2*1);break;
    }
    num1=結果;
    cal="";
    数値2="";
    this.setData({
      結果:結果、
      数値1:数値1,
      cal:cal、
      数値2:数値2
    })
  },
  逆関数(e){
    var cal = this.data.cal;
    var num1 = this.data.num1;
    var num2 = this.data.num2;
    if(cal==""){num1="-";}
    そうでない場合は(cal!=""){num2="-"}
    this.setData({
      数値1:数値1,
      数値2:数値2
    })
  },
  lololo:function(e){
    コンソールログ(123)
  },
  確認:関数(e){
    コンソールログ(555);
    コンソール.log(e)
  },
  イベント:関数(e){
    wx.navigateTo({
      url: '/pages/event/event',
    })
  },
  バインド入力:関数(e){
    コンソール.log(1)
  },
  ジスアンキ:function(e){
    var n1 = e.detail.value.num1;
    var n2 = e.detail.value.num2;
    var 結果 = n1 * 1 + n2 * 1;
    コンソールログ(n1);
    コンソールログ(n2);
    console.log(結果);
    this.setData({
      結果:結果
    })
  },
  tiaozhuan:function(e){
    wx.navigateTo({
      URL: '/pages/9x9form/9x9form',
    })
  },
  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {

  },

  /**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数 () {

  },

  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {

  },

  /**
   * ライフサイクル機能 - ページの非表示を監視する*/
  onHide: 関数 () {

  },

  /**
   * ライフサイクル機能 - ページのアンインストールを監視する*/
  onUnload: 関数 () {

  },

  /**
   * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */
  onPullDownRefresh: 関数 () {

  },

  /**
   * ページ上のボトムイベントを処理する関数*/
  onReachBottom: 関数 () {

  },

  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数 () {

  }
})

jisuanqi.json

{
  "コンポーネントの使用": {},
  "navigationBarTitleText": "電卓"
}

jisuanqi.wxml

<ビュークラス="コンテナ">
  <view class="view1">{{文字列}}</view>
  <view class="view2">{{結果}}</view>
  <view class="button-group">
    <button class="button">履歴</button>
    <button class="button" bindtap="clean">C</button>
    <button class="button"></button>
    <button class="button" id="/" bindtap="btSubmit">/</button>
  </ビュー>
  <view class="button-group">
    <button class="button" id="7" bindtap="btSubmit">7</button>
    <button class="button" id="8" bindtap="btSubmit">8</button>
    <button class="button" id="9" bindtap="btSubmit">9</button>
    <button class="button" id="*" bindtap="btSubmit">*</button>
  </ビュー>
  <view class="button-group">
    <button class="button" id="4" bindtap="btSubmit">4</button>
    <button class="button" id="5" bindtap="btSubmit">5</button>
    <button class="button" id="6" bindtap="btSubmit">6</button>
    <button class="button" id="-" bindtap="btSubmit">-</button>
  </ビュー>
  <view class="button-group">
    <button class="button" id="1" bindtap="btSubmit">1</button>
    <button class="button" id="2" bindtap="btSubmit">2</button>
    <button class="button" id="3" bindtap="btSubmit">3</button>
    <button class="button" id="+" bindtap="btSubmit">+</button>
  </ビュー>
  <view class="button-group">
    <button class="button" bindtap="reverse">-(マイナス記号)</button>
    <button class="button" id="0" bindtap="btSubmit">0</button>
    <button class="button" id="." bindtap="btSubmit">.</button>
    <button class="button" bindtap="計算">=</button>
  </ビュー>
</ビュー>
<navigator url="/pages/event/event">イベントへジャンプ</navigator>//

jisuanqi.wxss

。ボタン{
  幅: 160rpx;
  高さ: 100rpx;
  左マージン: 10rpx;
  左パディング: 10rpx;
  上マージン: 10rpx;
  テキスト配置: 中央;
  行の高さ: 100rpx;
  パディング: 5px;
  境界線の半径: 5px;
}
.ボタングループ{
  ディスプレイ: フレックス;
  flex-direction: 行;
  align-content: flex-start;
}
。容器{
  ディスプレイ: フレックス;
  flex-direction: 列;
  コンテンツの端揃え: flex-end;
  /* align-content: flex-end; */
}
.view1{
  高さ: 100rpx;
  背景色: #e4e4e4;
  行の高さ: 100rpx;
  フォントサイズ: 20px;
}
.view2{
  高さ: 100rpx;
  上マージン: 5px;
  背景色: #e4e4e4;
  行の高さ: 100rpx;
  フォントサイズ: 20px;
}

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

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

<<:  Mysql5.7.18 のインストールとマスタースレーブレプリケーションの詳細なグラフィック説明

>>:  nginx プロキシ サーバーで双方向証明書検証を構成する方法

推薦する

Mailtoを使えばHTMLでメールを送るのは簡単

最近、顧客のフッターメールボックスにクリックして送信するメール機能を追加しました。Baidu で検索...

LNMP と phpMyAdmin を Docker にデプロイする方法

環境準備:複数のコンテナに基づいてホストに lnmp をデプロイします。 nginx サービス: 1...

WEB中国語フォントアプリケーションガイド

Web 上でフォントを使用することは、基本的なスキルであると同時に芸術でもあります。英語のフォントに...

Vueコンポーネント通信のさまざまな方法の詳細な説明

目次1. 父から息子へ2. 息子から父へ3. 親子関係のないコンポーネントの値の転送4. ヴュークス...

JavaScript の静的スコープと動的スコープを例を使って説明します

目次序文静的スコープと動的スコープ静的スコープ実行プロセス動的スコープ実行プロセスエクササイズ練習1...

HTMLヘッダータグの使用に関する詳細な説明

HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...

Ubuntu 18.04 Linux システムに JDK と Mysql をインストールする方法

プラットフォームの展開1. JDKをインストールするステップ1. OracleJDKをダウンロードす...

Ubuntu で .sh ファイルを実行するいくつかの方法の違いについて簡単に説明します。

序文特に bash 環境では、スクリプトの実行方法によって結果が異なります。スクリプトを実行する方法...

ウェブアニメーションのフレームレートFPSを計算する方法

目次スムーズなアニメーションの基準方法1: Chromeデベロッパーツールを使用する方法 2: フレ...

JavaScript が重複したネットワークリクエストを防ぐ方法の例

序文開発中は、インターフェース要求の繰り返しによってさまざまな問題が発生することがよくあります。ネッ...

MySQL の結合クエリとサブクエリの問題

目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...

HTML テーブル マークアップ チュートリアル (5): ライト ボーダー カラー属性 BORDERCOLORLIGHT

表では、左上の境界線の色を個別に定義したり、セルの右下の境界線の色を定義したりできます。これら 2 ...

HTML に埋め込まれた Flash HTML ウェブページ コードに Flash ファイルを埋め込むソリューション (パート 1)

中国の習慣では、旧暦の1月15日より前に新年を祝います。ここで、庭にいる友人たちに新年の幸せを祈りた...

Linux ソースコードからのソケット (TCP) クライアント側での接続の例の詳細な説明

序文著者は、アプリケーションからフレームワーク、オペレーティング システムに至るまで、あらゆるコード...

Mysql での結合操作

結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...