微信小程序案例3-2 计算器

文章目录

一、运行效果
二、知识储备
- （一）data-*自定义属性
- （二）模块
三、实现步骤
- （一）准备工作
- - 1、创建项目
  - 2、设置导航栏
- （二）实现页面结构
- - 1、编写页面整体结构
  - 2、编写结果区域的结构
  - 3、编写按钮区域第一行按钮的结构
  - 4、编写按钮区域第二行按钮的结构
  - 5、编写按钮区域第三行按钮的结构
  - 6、编写按钮区域第四行按钮的结构
  - 7、编写按钮区域第五行按钮的结构
  - 8、查看页面结构源码
- （三）实现页面样式
- - 1、编写页面样式
  - 2、编写结果区域样式
  - 3、编写按钮区域样式
  - - （1）按钮区域总体样式
    - （2）按钮区域中每一行的样式
    - （4）按钮区域每一行中每个按钮的样式
    - （5）让0按钮跨2列
    - （6）清除按钮样式
    - （7）最后一列按钮样式
    - （8）按钮的盘旋样式类
  - 4、查看页面样式源码
- （四）创建工具模块
- - 1、数学模块 - math.js
  - 2、计算模块 - calc.js
- （五）实现页面逻辑
- （六）特殊情况处理

一、运行效果

在这里插入图片描述

二、知识储备

（一）data-*自定义属性

在这里插入图片描述

app.json

{"pages": ["pages/index/index"],"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "案例3-2知识储备","navigationBarBackgroundColor": "#eee"},"style": "v2","sitemapLocation": "sitemap.json"
}

pages/index/index.wxml

<!--index.wxml-->
<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<button bind:tap="change" data-name="陈燕文" data-age="18">修改姓名与年龄</button>

pages/index/index.js

// index.js
Page({// 定义初始数据data: {name: "未知",age: "0"},// 编写修改事件处理函数change: function(e) {// 更新数据，同步刷新页面this.setData({name: e.target.dataset.name,age: e.target.dataset.age})}
})

（二）模块

在这里插入图片描述

utils/welcome.js

// 暴露一个对象
module.exports = {message: "欢迎访问泸职院~"
}

pages/index/index.js

// index.js
// 引入`welcome.js`模块（注意路径问题）
var welcome = require('../../utils/welcome.js')
Page({// 页面加载生命周期回调函数onLoad: function() {// 访问导入模块对外暴露的数据console.log("welcome模块暴露的数据：" + welcome.message)},// 定义初始数据data: {name: "未知",age: "0"},// 编写修改事件处理函数change: function(e) {// 更新数据，同步刷新页面this.setData({name: e.target.dataset.name,age: e.target.dataset.age})}
})

三、实现步骤

（一）准备工作

1、创建项目

创建微信小程序项目 - 计算器
单击【确定】按钮
按照惯例，做一些初始化工作

2、设置导航栏

在app.json文件设置window配置项

（二）实现页面结构

pages/index/index.wxml文件

1、编写页面整体结构

在这里插入图片描述

2、编写结果区域的结构

两行内容：第一行是当前计算式，第二行是当前计算结果

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

第一行包含四个按钮：清除按钮、删除按钮、正负号切换按钮、除号按钮
第20行代码设置了data-val自定义属性，用于区分不同按钮

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

第二行包含四个按钮：7按钮、8按钮、9按钮、乘号按钮
第二行四个按钮都设置了data-val自定义属性，用于区分不同按钮

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

第三行包含四个按钮：4按钮、5按钮、6按钮、减号按钮
第三行四个按钮都设置了data-val自定义属性，用于区分不同按钮

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

第四行包含四个按钮：1按钮、2按钮、3按钮、加号按钮

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

第五行包含三个按钮：0按钮、点按钮、等号按钮
第58行代码设置了data-val自定义属性，用于区分不同按钮
查看预览效果

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="50" bind:tap="btnReset">C</view><!-- 删除按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnDel">DEL</view><!-- 正负号切换按钮 (+: Positive, -: Negative)--><view hover-class="bg" hover-stay-time="50" bind:tap="btnPosNeg">+/-</view><!-- 除号按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnOperate" data-val="÷">÷</view></view><!-- 第二行按钮 --><view><!-- 7按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="7">7</view><!-- 8按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="8">8</view><!-- 9按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="9">9</view><!-- 乘号按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnOperate" data-val="×">×</view></view><!-- 第三行按钮 --><view><!-- 4按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="4">4</view><!-- 5按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="5">5</view><!-- 6按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="6">6</view><!-- 减号按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnOperate" data-val="-">-</view></view><!-- 第四行按钮 --><view><!-- 1按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="1">1</view><!-- 2按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="2">2</view><!-- 3按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="3">3</view><!-- 加号按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnOperate" data-val="+">+</view></view><!-- 第五行按钮 --><view><!-- 0按钮 --><view hover-class="bg" hover-stay-time="50" bind:tap="btnNum" data-val="0">0</view><!-- 点按钮 -->       <view hover-class="bg" hover-stay-time="50" bind:tap="btnDot">.</view><!-- 等号按钮 —— 进行计算 --><view hover-class="bg" hover-stay-time="50" 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: #555;
}/* 结果区域样式 */
.result {    flex: 1; /* 垂直均分手机屏幕，因为flex-direction: column */background: #f3f6fe;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;
}/* 按钮区域中每一行的样式 */
.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列，view:first-child ~ view:nth-child(1) */
.btns > view:last-child > view:first-child { flex-basis: 50%;
}/* 清除按钮样式 */
.btns > view:first-child > view:first-child {color: #f00;
}/* 最后一列按钮样式 */
.btns > view > view:last-child {color: #fc8e00;
}/* 按钮的盘旋样式类 */
.bg {background: #eee;
}

（四）创建工具模块

在这里插入图片描述

1、数学模块 - math.js

在utils目录里创建math.js文件

// 精准计算功能，用于解决JavaScript浮点数运算精度不准确的问题
module.exports = {// 加法add: function (a, b) {var r1, r2, mtry {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, ntry {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 : r2return ((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, r2try {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)}
}