微信小程序（一）计算器

客官°小女子只卖身不卖艺 2022-01-30 03:55 225阅读 0赞

源码下载：[https://download.csdn.net/download/qq\_29914837/11189315][https_download.csdn.net_download_qq_29914837_11189315]

## 一、功能效果图预览 ##

![在这里插入图片描述][20190520123621594.gif]

## 二、实现案例 ##

**1.目录结构**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5OTE0ODM3_size_16_color_FFFFFF_t_70]

**2. app.json文件**

{
      "pages": [
        "pages/calculator/calculator",
        "pages/index/index",
        "pages/history/history",
        "pages/logs/logs"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "计算器",
        "navigationBarTextStyle": "black"
      },
      "sitemapLocation": "sitemap.json"
    }

**3 app.wxss文件**

/**app.wxss**/
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
    }

**4 calculator.js文件**

**5 calculator.wxml文件**

<view class="main-view">
    
    <view class="content">
        <view class="screen">
          {
       {screenData}}  
      </view>
    </view>
    
    <view class="layout-bottom">
      <view class="btnGroup">
        <view class="item black" bindtap="clickBtn" id="{
       {idc}}">С</view>
        <view class="item black" bindtap="clickBtn" id="{
       {idb}}">←</view>
        <view class="item black iconBtn" bindtap="history">
          <icon type="{
       {iconType}}" color="{
       {iconColor}}" class="icon" size="25" />
        </view>
        <view class="item red" bindtap="clickBtn" id="{
       {idadd}}">+</view>
      </view>
    
      <view class="btnGroup">
        <view class="item black" bindtap="clickBtn" id="{
       {id7}}">7</view>
        <view class="item black" bindtap="clickBtn" id="{
       {id8}}">8</view>
        <view class="item black" bindtap="clickBtn" id="{
       {id9}}">9</view>
        <view class="item red" bindtap="clickBtn" id="{
       {idj}}">－</view>
      </view>
      <view class="btnGroup">
        <view class="item black" bindtap="clickBtn" id="{
       {id4}}">4</view>
        <view class="item black" bindtap="clickBtn" id="{
       {id5}}">5</view>
        <view class="item black" bindtap="clickBtn" id="{
       {id6}}">6</view>
        <view class="item red" bindtap="clickBtn" id="{
       {idx}}">×</view>
      </view>
      <view class="btnGroup">
        <view class="item black" bindtap="clickBtn" id="{
       {id1}}">1</view>
        <view class="item black" bindtap="clickBtn" id="{
       {id2}}">2</view>
        <view class="item black" bindtap="clickBtn" id="{
       {id3}}">3</view>
        <view class="item red" bindtap="clickBtn" id="{
       {iddiv}}">÷</view>
      </view>
      <view class="btnGroup">
        <view class="item black zero" bindtap="clickBtn" id="{
       {id0}}">0</view>
        <view class="item black" bindtap="clickBtn" id="{
       {idd}}">.</view>
        <view class="item red" bindtap="clickBtn" id="{
       {ide}}">＝</view>
      </view>
    </view>
    </view>

**6 calculator.wxss文件**

.main-view {
     height: 100%;
     width: 100%;
     
    }
    .content {
        height: 250rpx;
        flex-direction: column;
        align-items: center;
        background-color: rgb(0, 0, 0);
        font-family: "Microsoft YaHei";
        overflow-x: hidden;
        position:relative;
    }
     .screen {   
       text-align: right;  
        margin-top: 180rpx;
        margin-right: 20rpx;
        font-weight: bold;
        font-size: 50rpx;
        color: #fff;
        word-wrap:break-word; overflow:hidden; 
    }
    
    .layout-bottom{
        width: 100%;
        height:  calc(100% - 250rpx);
    }
    
    .btnGroup {
        display: flex;
        flex-direction: row;
        flex: 1;
        width: 100%;
        height: 5rem;
        background-color: #fff;
    }
    .item {
        width:25%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin-top: 1px;
        margin-right: 1px;
        border-color: #838485;
    }
    .item:active {
        background-color: #424040;
    }
    .zero{
        width: 50%;
    }
    .orange {
        color: #fef4e9;
        background: #f78d1d;
        font-weight: bold;
    }
    .red {
        color:#d9eef7;
        background-color: #f80606;
    }
    .black {
      color: #fff;
      background-color: #838485;
    border-style:solid;
    border-color: #050505;
    border: 0rpx;
    
    }
    .iconBtn{
        display: flex;
    }
    .icon{
       display: flex;
       align-items: center;
       width:100%;
       justify-content: center;
    }

**7 history.js文件**

// pages/history/history.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        var logs = wx.getStorageSync('calclogs');
        this.setData({ "logs": logs });
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

**8 history.wxml文件**

[https_download.csdn.net_download_qq_29914837_11189315]: https://download.csdn.net/download/qq_29914837/11189315
[20190520123621594.gif]: /images/20220130/ae57d0b44bf7424d8e5e498b15e61c11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5OTE0ODM3_size_16_color_FFFFFF_t_70]: /images/20220130/9f2492439b734e0e9bc16b3451663960.png