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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL の文字セット utf8 を utf8mb4 に変更する方法
>>: CentOS7 は Docker のバージョン 19 をデプロイします (簡単なので、従ってください)
JSランニング三部作js実行コードは3つのステップに分かれています構文解析プリコンパイル解釈Jav...
この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...
この記事では、画像拡大鏡効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容...
序文Linux グループは、Linux でユーザー アカウントを管理するために使用される組織単位です...
目次render.js 部分create-context.js 部分差分部分Reactのソースコード...
目次序文配列.isArrayコンストラクタインスタンスプロトタイプオブジェクト.プロトタイプ.toS...
通常は ul、li を介して選択のデフォルト スタイルを変更して、実現をシミュレートします。このよう...
1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...
目次パーティション分割メカニズムSELECTクエリINSERT操作DELETE操作更新操作パーティシ...
翻訳プログラムを例に挙げてみます。前回はWindowsでのアプリケーションのパッケージ化についてお話...
概要この記事は、ゲームビジネスアーキテクチャに関連するコンテンツの紹介から始まります。ゲームビジネス...
この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...
目次1. Webshellを書く出力ファイルにシェルを書き込むログファイル書き込みシェル2. U...
http1.1 プロトコルのデフォルトのリクエスト ヘッダーでは、図に示すように、デフォルトで ke...
1. 全体的な手順冒頭で、RabbitMQ サービスをインストールして実行する方法を紹介しましたが、...