推荐的网站,wordpress相关,网站开发vsc网站开发公司,无锡市做企业网站的文章目录 一、运行效果二、知识储备#xff08;一#xff09;data-*自定义属性#xff08;二#xff09;模块 三、实现步骤#xff08;一#xff09;准备工作1、创建项目2、设置导航栏 #xff08;二#xff09;实现页面结构1、编写页面整体结构2、编写结果区域的结构3… 文章目录 一、运行效果二、知识储备一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.js2、计算模块 - 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:tapchange data-name陈燕文 data-age18修改姓名与年龄/buttonpages/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 classresult!-- 当前计算式 --view classresult-sub{{sub}}/view!-- 当前计算结果 --view classresult-num{{num}}/view
/view
!-- 按钮区域 --
view classbtns!-- 第一行按钮 --view!-- 清除按钮 --view hover-classbg hover-stay-time50 bind:tapbtnResetC/view!-- 删除按钮 --view hover-classbg hover-stay-time50 bind:tapbtnDelDEL/view!-- 正负号切换按钮 (: Positive, -: Negative)--view hover-classbg hover-stay-time50 bind:tapbtnPosNeg/-/view!-- 除号按钮 --view hover-classbg hover-stay-time50 bind:tapbtnOperate data-val÷÷/view/view!-- 第二行按钮 --view!-- 7按钮 --view hover-classbg hover-stay-time50 bind:tapbtnNum data-val77/view!-- 8按钮 --view hover-classbg hover-stay-time50 bind:tapbtnNum data-val88/view!-- 9按钮 --view hover-classbg hover-stay-time50 bind:tapbtnNum data-val99/view!-- 乘号按钮 --view hover-classbg hover-stay-time50 bind:tapbtnOperate data-val××/view/view!-- 第三行按钮 --view!-- 4按钮 --view hover-classbg hover-stay-time50 bind:tapbtnNum data-val44/view!-- 5按钮 --view hover-classbg hover-stay-time50 bind:tapbtnNum data-val55/view!-- 6按钮 --view hover-classbg hover-stay-time50 bind:tapbtnNum data-val66/view!-- 减号按钮 --view hover-classbg hover-stay-time50 bind:tapbtnOperate data-val--/view/view!-- 第四行按钮 --view!-- 1按钮 --view hover-classbg hover-stay-time50 bind:tapbtnNum data-val11/view!-- 2按钮 --view hover-classbg hover-stay-time50 bind:tapbtnNum data-val22/view!-- 3按钮 --view hover-classbg hover-stay-time50 bind:tapbtnNum data-val33/view!-- 加号按钮 --view hover-classbg hover-stay-time50 bind:tapbtnOperate data-val/view/view!-- 第五行按钮 --view!-- 0按钮 --view hover-classbg hover-stay-time50 bind:tapbtnNum data-val00/view!-- 点按钮 -- view hover-classbg hover-stay-time50 bind:tapbtnDot./view!-- 等号按钮 —— 进行计算 --view hover-classbg hover-stay-time50 bind:tapbtnCalculate/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;
}四创建工具模块 在项目根目录创建utils目录
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)}
}2、计算模块 - calc.js
五实现页面逻辑
六特殊情况处理
