文章目录
（一）运行效果（二）知识储备（三）实现步骤（一）准备工作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
（五）实现页面逻辑（六）特殊情况处理
（一）运行效果
（二）知识储备
（三）实现步骤
（一）准备工作
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、查看页面结构的源代码
（三）实现页面样式
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)
}
}
（五）实现页面逻辑
（六）特殊情况处理
推荐阅读
您阅读本篇文章共花了： 大家都在找：
微信小程序：微信小程序备案
notepad++：notepad++中文破解版下载安装
小程序：小程序商城
发表评论