微信小程序?qū)崿F(xiàn)計算器功能

更新時間：2021年07月19日 09:12:36 作者：dyfc3sfd3s

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)計算器功能的具體代碼，供大家參考，具體內(nèi)容如下

一、微信小程序開發(fā)工具界面

二、目錄結(jié)構(gòu)

第一次進到頁面它的目錄結(jié)構(gòu)如下：

三、需要注意的問題

(1)添加的新頁面文件，都需要在app.json中進行配置，否則頁面報錯。

(2)工作原理通過在<view></view>中添加事件 bindtap="btnClick" id="{{n9}}" 相當于click事件。

在js代碼中，可以通過this.data.n9獲取數(shù)據(jù)，這些數(shù)據(jù)的定義都是在js中

通過在<view id="{{btn_a}}"><view>填寫id，在具體的函數(shù)中，event.target.id去判斷id是多少，進行區(qū)分。就可以實現(xiàn)，不同標簽的點擊，然后進行業(yè)務(wù)邏輯。如果需要訪問數(shù)據(jù)，則是通過this.data.xx。

計算器的wxml頁面

<view class="content">
  <view class="xianshi">{{screenNum}}</view>
  <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n9}}">9</view>
    <view class="item blue" bindtap="btnClick" id="{{n8}}">8</view>
    <view class="item blue" bindtap="btnClick" id="{{n7}}">7</view>
    <view class="item blue" bindtap="btnClick" id="{{na}}">+</view>
  </view>
   <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n6}}">6</view>
    <view class="item blue" bindtap="btnClick" id="{{n5}}">5</view>
    <view class="item blue" bindtap="btnClick" id="{{n4}}">4</view>
    <view class="item blue" bindtap="btnClick" id="{{nb}}">-</view>
  </view>
   <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n3}}">3</view>
    <view class="item blue" bindtap="btnClick" id="{{n2}}">2</view>
    <view class="item blue" bindtap="btnClick" id="{{n1}}">1</view>
    <view class="item blue" bindtap="btnClick" id="{{nc}}">*</view>
  </view>
   <view class="anniu">
    <view class="item blue" bindtap="btnClick" id="{{n0}}">0</view>
    <view class="item blue" bindtap="btnClear">AC</view>
    <view class="item blue" bindtap="btnJs">=</view>
    <view class="item blue" bindtap="btnClick" id="{{nd}}">/</view>
  </view>
</view>

// pages/cal/cal.js
Page({
 
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
   n0: 0,
   n1: 1,
   n2: 2,
   n3: 3,
   n4: 4,
   n5: 5,
   n6: 6,
   n7: 7,
   n8: 8,
   n9: 9,
   na: '+',
   nb: '-',
   nc: '*',
   nd: '/',
   screenNum: 0,
   screenStr: 0,
   is_num:1
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
  
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
  
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
  
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
  
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
  
  },
 
  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {
  
  },
 
  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
  
  },
 
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  },
  btnClick:function(event){
    //console.log('你按得鍵是'+event.target.id);
    //console.log('上一次' + this.data.is_num);
    var op='';
    var data=0;
    var last_is_num = this.data.is_num;
    //這次輸入的是什么
    if (event.target.id == '9' || event.target.id == '8' || event.target.id == '7' || event.target.id == '6' || event.target.id == '5' || event.target.id == '4' || event.target.id == '3' || event.target.id == '2' || event.target.id == '1' || event.target.id == '0') {
      data = event.target.id;
      this.setData({ is_num: 1 });
    }
    if (event.target.id == '+' || event.target.id == '-' || event.target.id == '*' || event.target.id == '/') {
      op = event.target.id;
      this.setData({ is_num: 0 });
    }
    if (last_is_num==1){
      //如果上一次是數(shù)字
      if (op == ''){
        //這一次是數(shù)字
        if (this.data.screenNum!=0){
          this.setData({ screenNum: this.data.screenNum + data });
          this.setData({ screenStr: this.data.screenStr + data });
        }else{
          this.setData({ screenNum: data});
          this.setData({ screenStr: data });
        }
      }else{
        this.setData({ screenNum: this.data.screenNum + op });
        this.setData({ screenStr: this.data.screenStr +',' +op+',' });
      }
    }else{
      //上次不是數(shù)字
      if (data != 0) {
        //這一次是數(shù)字
        this.setData({ screenNum: this.data.screenNum + data });
        this.setData({ screenStr: this.data.screenStr + data });
      } else {
        return;
      }
    }
    //console.log(op+'aaaaa'+data);
    //console.log('現(xiàn)在是'+this.data.is_num);
    //console.log('screenNum' + this.data.screenNum);
    //console.log(this.data.screenStr);
  },
  btnJs:function(){
    console.log(this.data.screenNum);
    console.log(this.data.screenStr);
    var result=0;
    var strs = new Array(); //定義一數(shù)組 
    strs = this.data.screenStr.split(","); //字符分割
    for (var i = 0; i < strs.length; i++) {
      //console.log(strs[i] + i); //分割后的字符輸出
      if (strs[i]=='+'){
        result = parseInt(strs[i - 1]) + parseInt(strs[i+1]);
      }
      if (strs[i] == '-') {
        result = strs[i - 1] - strs[i + 1];
      }
      if (strs[i] == '*') {
        result = strs[i - 1] * strs[i + 1];
      }
      if (strs[i] == '/') {
        result = strs[i - 1] / strs[i + 1];
      }    
    }
    console.log('result:'+result);
    this.setData({ screenNum: result});
    this.setData({ screenStr: result });    
  },
  btnClear:function(){
    //把標記恢復成默認狀態(tài)
    this.setData({ screenNum: 0 });
    this.setData({ screenStr: 0 });
    this.setData({ is_num: 1 });      
  }
})

總結(jié)，在小程序的布局方面引入了相對單位rpx，需要在學習一下彈性盒子flex布局。對于js部分，和vue.js有些類似，都是對數(shù)據(jù)進行綁定，簡化js的dom操作。這兩點還是需要再看看。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: