微信小程序案例——计算器

已于 2023-11-13 11:46:43 修改
阅读量2.4k 收藏 29
点赞数 7
文章标签： 微信小程序 notepad++ 小程序
于 2023-11-13 11:23:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65980443/article/details/134369051
版权

文章目录

（一）运行效果

在这里插入图片描述

（二）知识储备

在这里插入图片描述

（三）实现步骤

（一）准备工作

1、创建项目

在这里插入图片描述

  • 按照惯例，做一些初始化工作
    在这里插入图片描述

2、设置导航栏

  • 在app.json文件设置window配置项
    在这里插入图片描述

（二）实现页面结构

  • pages/index/index.wxml文件

1、编写页面整体结构

在这里插入图片描述

2、编写结果区域结构

  • 两行内容：第一行是当前的计算式，第二行是当前计算结果
    在这里插入图片描述

3、编写按钮区域第一行按钮的结构

  • 第一行包含四个按钮：清除按钮、删除按钮、正负号切换按钮、除号按钮
    在这里插入图片描述

4、编写按钮区域第二行按钮结构

  • 第二行包含四个按钮：7、8、9、×号按钮
    在这里插入图片描述
  • 四个按钮都设置了data-val自定义属性，用于区分不同按钮

5、编写按钮区域第三行按钮结构

  • 第三行包含四个按钮：4、5、6、－号按钮
    在这里插入图片描述

6、编写按钮区域第四行按钮结构

  • 第四行包含四个按钮：1、2、3、＋号按钮
    在这里插入图片描述

7、编写按钮区域第五行按钮结构

  • 第五行包含三个按钮：0、点、=号按钮
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述

8、查看页面结构的源代码

<!--index.wxml-->
<!-- 结果区域 -->
<view class="result">
<!-- 当前计算式 -->
  <view class="result-sub">{{sub}}</view>
  <!-- 当前计算结果 -->
  <view class="result-num">{{num}}</view>
</view>
<!-- 按钮区域 -->
 <view class="btns">
 <!-- 第一行按钮 -->
  <view>
  <!-- 清除按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnReset">C</view>
  <!-- 删除按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnDel">Del</view>
  <!-- 正负号切换按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnPosNeg">+/-</view>
  <!-- 除号按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnOpreate" data-val="÷">÷</view>
  </view>
 <!-- 第二行按钮 -->
  <view>
  <!-- 7按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" data-val="7">7</view>
  <!-- 8按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" data-val="8">8</view>
  <!-- 9按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" data-val="9">9</view>
  <!-- 乘号按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnOpreate" data-val="×">×</view>
  </view>
 <!-- 第三行按钮 -->
  <view>
  <!-- 4按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" data-val="4">4</view>
  <!-- 5按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" data-val="5">5</view>
  <!-- 6按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" data-val="6">6</view>
  <!-- 减号按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnOpreate" data-val="-">-</view>
  </view>
 <!-- 第四行按钮 -->
  <view>
  <!-- 1按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" data-val="1">1</view>
  <!-- 2按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" data-val="2">2</view>
  <!-- 3按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" data-val="3">3</view>
  <!-- 加号按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnOpreate" data-val="+">+</view>
  </view>
 <!-- 第五行按钮 -->
  <view>
  <!-- 0按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" data-val="0">0</view>
  <!-- .按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" bind:tap="btnDot">.</view>
  <!-- =按钮 -->
    <view hover-class="bg" hover-stay-time="60" bind:tap="btnNum" bind:tap="btnCalculate">=</view>
  </view>
</view>

（三）实现页面样式

  • pages/index/index.wxss文件

1、页面整个样式

  • 编写page样式
    在这里插入图片描述

2、编写结果区域样式

  • 结果区域有三个样式：result 、result-sub、result-num
    在这里插入图片描述
  • 修改页面结构，暂时查看效果
    在这里插入图片描述
  • 查看效果后，将页面结构改回去
    在这里插入图片描述

3、编写按钮区域样式

（1）按钮区域总体样式
  • .btns样式类
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述
（2）按钮区域中每一行的样式
  • .btns>view样式类
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述
（4）按钮区域每一行中每个按钮的样式
  • .btns>view >view样式类
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述
（5）让0按钮跨2列
  • .btns> view:last-child> view:first-child样式类
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述
（6）清除按钮样式
  • .btns>view:first-child>view:first-child样式
    在这里插入图片描述
  • 查看效果
    在这里插入图片描述
（7）最后一行按钮样式
  • .btns>view>view:last-child选择器
    在这里插入图片描述
  • 查看预览效果
    在这里插入图片描述
（8）按钮的盘旋样式
  • .bg样式
    在这里插入图片描述
  • 查看效果
    在这里插入图片描述

4、查看页面样式源码

/**index.wxss**/
/* 页面样式 */
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: rgb(48, 46, 46);
}
/* 结果区域样式 */
.result{
  flex:1;  /* 均分手机屏幕，因为flex-direction：colum */
  background-color: #f0eeed;
  position: relative;
}
/* 当前计算式样式 */
.result-sub{
  font-size: 52rpx;
  position: absolute;
  bottom: 16vh;
  right: 3vw;
}
/* 当前计算结果样式 */
.result-num{
  font-size: 100rpx;
  position: absolute;
  bottom: 3vh;
  right: 3vw;
}
/* 按钮区域样式 */
.btns{
  flex:1;
  display: flex;
  flex-direction: column;
  font-size: 48rpx;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
  border-right: 1rpx solid #ccc;
}
/* 按钮区域中每一行的样式 */
.btns > view{
  flex:1;
  display: flex;
}
/* 按钮区域每一行中每个按钮的样式 */
.btns > view > view{
  flex-basis: 25%;/* 四个按钮均分一行空间 */
  border-right: 1rpx solid #ccc; /* 右边框线 */
  border-bottom: 1rpx solid #ccc; /* 底边框线 */
  box-sizing: border-box;
  display: flex; /* 弹性布局，默认方向是水平 */
  align-items: center;/* 交叉轴居中-垂直居中 */
  justify-content: center; /* 主轴居中-水平居中 */
}
/* 0按钮跨2列 */
.btns> view:last-child> view:first-child{
  flex-basis: 50%;
}
/* 清除按钮样式 */
.btns>view:first-child>view:first-child{
  color: rgb(201, 58, 1);
}
/* 最后一列按钮样式 */
.btns>view>view:last-child{
  color: rgba(206, 120, 7, 0.945);
}
/* 按钮的盘旋样式 */
.bg{
  background: #eee;
}

（四）创建工具模块

在这里插入图片描述

  • 在项目根目录创建utls目录
    在这里插入图片描述

1、数学模块 -math.js

  • 在utils目录里创建math.js文件
    在这里插入图片描述
  • math.js源码
// 精准计算功能，用于解决JavaScript浮点数运算精度不准确的问题
module.exports = {
    add: function(a, b) {
      var r1, r2, m
      try {
        r1 = a.toString().split('.')[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = b.toString().split('.')[1].length
      } catch (e) {
        r2 = 0
      }
      m = Math.pow(10, Math.max(r1, r2))
      return (a * m + b * m) / m
    },
    sub: function(a, b) {
      var r1, r2, m, n
      try {
        r1 = a.toString().split('.')[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = b.toString().split('.')[1].length
      } catch (e) {
        r2 = 0
      }
      m = Math.pow(10, Math.max(r1, r2))
      // 动态控制精度长度
      n = (r1 >= r2) ? r1 : r2
      return ((a * m - b * m) / m).toFixed(n)
    },
    mul: function(a, b) {
      var m = 0,
        s1 = a.toString(),
        s2 = b.toString()
      try {
        m += s1.split('.')[1].length
      } catch (e) {}
      try {
        m += s2.split('.')[1].length
      } catch (e) {}
      return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
    },
    div: function(a, b) {
      var t1 = 0,
        t2 = 0,
        r1, r2
      try {
        t1 = a.toString().split('.')[1].length
      } catch (e) {}
      try {
        t2 = b.toString().split('.')[1].length
      } catch (e) {}
  
      r1 = Number(a.toString().replace('.', ''))
      r2 = Number(b.toString().replace('.', ''))
      return (r1 / r2) * Math.pow(10, t2 - t1)
    }
  }

（五）实现页面逻辑

（六）特殊情况处理

Sun2019.9
关注
  • 7
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序————简易计算器
zx3331681336的博客
11-16 5646
计算器小程序
微信小程序 -简易计算器-实现简单加减乘除平方根（源码+截图）
02-02
微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等） 微信小程序实现的简易计算器，可以实现简单的运算（包括：加减乘除、平方根等）
微信小程序 小工具类 简易计算器 （源代码+截图）
06-21
微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）微信小程序 小工具类 简易计算器 （源代码+截图）
微信小程序 简易计算器实现代码实例
10-16
主要介绍了微信小程序 简易计算器实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
如何使用微信小程序运行代码
2301_79474431的博客
03-02 621
在浏览器中输入网址"github.com/dunizb/wxapp - sCale"，进入页面后下载小程序简易计算器源码demo。打开微信小程序开发工具导入该项目。
微信小程序——简单计算器
01-29
【初学者】微信小程序，实现简单的计算功能，包括index界面、计算界面
微信小程序计算器源码
12-10
闲着无聊，开发了微信小程序里的计算器程序，可以加减乘除，清零，历史记录等 可以集成到自己的程序里 闲着无聊，开发了微信小程序里的计算器程序，可以加减乘除，清零，历史记录等 可以集成到自己的程序里
微信小程序入门实例：简易计算器
03-29
今天继续玩一些微信小程序的api来做例子，感觉自己可能创造力不很足，只能模仿着别人的例子来做一个自己的计算器了。老规矩，github源码地址我会附在文章末尾，供大家参考。用微信 ...       今天继续玩一些微信小程序的api来做例子，感觉自己可能创造力不很足，只能模仿着别人的例子来做一个自己的计算器了。老规矩，github源码地址我会附在文章末尾，供大家参考。用微信开发者工具新建的项目，index.wxss我也不去改了。只在index.wxml界面加一个到计算器页面的入口。index.js里面加入一个参数.  下面是index.wxml   <view class="container"
微信小程序之计算器
一指流沙的博客
07-13 6475
效果图：代码：calculator.wxml calculator.wxss calculator.js
【微信小程序】计算器案例
m0_55394328的博客
03-05 6750
嗨嗨嗨，好久没更新小程序专栏了，本期浅浅用小程序写一个计算器。最终代码会上传至资源噢~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
微信小程序计算器（含源码）、含js精确运算代码
m0_64130892的博客
03-03 6505
最近在做一个记账本小程序，其中需要用到计算器，但是在网上找的代码，用起来不是不符合我的想法，就是看着非常难受，于是还是自己写了一个。js精确计算、微信小程序计算器、含有源码
微信小程序 简易计算器 (源码)
05-30
微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程序 简易计算器 (源码)微信小程
微信小程序实战教程：计算器demo实现及代码逻辑
03-29
本文有小码哥王维波老师制作，原文地址；由于本文写于老版本开发者工具，所以仅供参考；如有疑问，请优先对照官方开发者工具；第一部分：开始创建项目名称和存放代码位置创建新计算器页面并且设置第一个显示计算器页 ...       本文有小码哥王维波老师制作，原文地址；由于本文写于老版本开发者工具，所以仅供参考；如有疑问，请优先对照官方开发者工具； 第一部分：开始 (此图片来源于网络，如有侵权，请联系删除! ) 创建项目名称和存放代码位置 (此图片来源于网络，如有侵权，请联系删除! ) 创建新计算器页面并且设置第一个显示计算器页面 (此图片来源于网络，如有侵权，请联系删除! ) (此图片来源于网络，如有
微信小程序——简易计算器（截图+源码）.zip
04-17
微信小程序——简易计算器（截图+源码）.zip 微信小程序——简易计算器（截图+源码）.zip 微信小程序——简易计算器（截图+源码）.zip 微信小程序——简易计算器（截图+源码）.zip 微信小程序——简易计算器（截图+...
微信小程序——科学计算器（截图+源码）.zip
04-17
微信小程序——科学计算器（截图+源码）.zip 微信小程序——科学计算器（截图+源码）.zip 微信小程序——科学计算器（截图+源码）.zip 微信小程序——科学计算器（截图+源码）.zip 微信小程序——科学计算器（截图+...
微信小程序 iOS计算器（截图+源码）
05-11
微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）微信小程序 iOS计算器（截图+源码）...
基于微信小程序的图书馆座位预约系统的设计与实现
最新发布
No_Name_Cao_Ni_Mei的博客
04-22 636
本文主要介绍了基于微信小程序的图书馆座位预约系统的设计与实现。随着图书馆座位需求的增加，传统的人工管理方式已经无法满足用户的需求。因此，设计并实现一个高效的座位预约系统具有重要意义。首先，本文对图书馆座位预约系统的需求进行了分析。通过调研用户的座位预约习惯、座位类型和预约规则等，确定了系统的功能模块和实现目标。系统的主要模块包括用户登录模块、座位浏览模块、座位预约模块以及管理模块。接着，本文详细介绍了微信小程序的设计与实现过程。借助微信小程序的便利性和开发工具的支持，开发者能够快速搭建座位预约系统。
【微信小程序从入门到精通（项目实战）】——微电影小程序
php优质创造者
04-18 3312
如果还要不懂运行不出效果可以私信博主
csdn微信小程序案例记账本
08-04
CSDN微信小程序案例——记账本，是一款方便用户记录日常收支的应用程序。这款小程序不仅具有简洁、实用的特点，还提供了个性化定制的功能，让用户能够根据自己的需求进行个性化设置。 这个记账本小程序的主要功能包括：添加记账记录、分类管理、数据统计与分析以及数据导出。 首先，用户可以通过该小程序快速添加自己的记账记录。用户只需要点击“添加”按钮，填写相关信息，如金额、日期、备注等，就能够轻松记录每一笔账目。 其次，记账本小程序还有分类管理功能。用户可以根据个人需求自定义收支分类，例如设置餐饮、服饰、娱乐等不同类型的账目分类。这样一来，用户可以更加清晰地了解自己的消费情况，并根据分类进行数据统计。 第三，数据统计与分析是该小程序的重点功能之一。用户可以随时查看自己的账目统计信息，包括总收入、总支出、当前余额等，以便进行财务管理。通过统计分析，用户可以清晰地了解自己的消费习惯，找到自己的理财盲点，并做出相应的调整。 最后，记账本小程序还提供了数据导出功能，方便用户将记账记录导出为Excel或PDF文件，以便于用户在需要的时候进行打印或分享。 综上所述，CSDN微信小程序案例——记账本提供了简洁实用的记账功能，用户可以方便地记录每一笔收支，在分类管理下进行数据统计与分析，并提供数据导出功能。这款小程序为用户提供了一个便捷的财务管理工具，帮助用户更好地了解自己的消费情况，实现理财目标。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值