柚子快報(bào)激活碼778899分享：微信小程序案例3-2 計(jì)算器
柚子快報(bào)激活碼778899分享：微信小程序案例3-2 計(jì)算器
文章目錄
一、運(yùn)行效果二、知識(shí)儲(chǔ)備（一）data-* 自定義屬性（二）模塊
三、實(shí)現(xiàn)步驟（一）準(zhǔn)備工作1、創(chuàng)建項(xiàng)目2、設(shè)置導(dǎo)航欄
（二）實(shí)現(xiàn)頁面結(jié)構(gòu)1、編寫頁面整體結(jié)構(gòu)2、編寫結(jié)果區(qū)域3、編寫按鈕區(qū)域第一行按鈕的結(jié)構(gòu)4、編寫按鈕區(qū)域第二行按鈕的結(jié)構(gòu)5、編寫按鈕區(qū)域第三行按鈕的結(jié)構(gòu)6、編寫按鈕區(qū)域第四行按鈕的結(jié)構(gòu)7、編寫按鈕區(qū)域第五行按鈕的結(jié)構(gòu)8、查看頁面結(jié)構(gòu)源代碼
（三）實(shí)現(xiàn)頁面樣式1、頁面樣式2、編寫結(jié)果區(qū)域樣式3、編寫按鈕區(qū)域樣式（1）按鈕區(qū)域總體樣式（2）按鈕區(qū)域中每一行的樣式（3）按鈕區(qū)域每一行中每個(gè)按鈕的樣式（4）讓0按鈕占兩列（5）清除按鈕樣式（6）最后一列按鈕樣式（7）按鈕的盤旋樣式類
4、查看頁面樣式源代碼
（四）創(chuàng)建工具模塊1、數(shù)學(xué)模塊 - math.js2、計(jì)算模塊 - calc.js
（五）實(shí)現(xiàn)頁面邏輯1、引入calc.js文件2、編寫頁面所需數(shù)據(jù)3、設(shè)置變量標(biāo)識(shí)4、編寫數(shù)字按鈕的點(diǎn)擊事件處理函數(shù)5、編寫運(yùn)算符按鈕的點(diǎn)擊事件處理函數(shù)6、修改數(shù)字按鈕點(diǎn)擊事件代碼7、等號(hào)按鈕的點(diǎn)擊事件處理函數(shù)8、重置按鈕的點(diǎn)擊事件處理函數(shù)9、小數(shù)點(diǎn)按鈕的點(diǎn)擊事件處理函數(shù)
（六）特殊情況處理
一、運(yùn)行效果
二、知識(shí)儲(chǔ)備
（一）data-* 自定義屬性
（二）模塊
三、實(shí)現(xiàn)步驟
（一）準(zhǔn)備工作
1、創(chuàng)建項(xiàng)目
創(chuàng)建微信小程序項(xiàng)目 - 計(jì)算器 單擊【確定】按鈕 按照管理，做一些初始化工作
2、設(shè)置導(dǎo)航欄
在APP.json文件設(shè)置唯你懂配置項(xiàng)
（二）實(shí)現(xiàn)頁面結(jié)構(gòu)
pages/index/index.wxml文件
1、編寫頁面整體結(jié)構(gòu)
2、編寫結(jié)果區(qū)域
兩行內(nèi)容：第一行是當(dāng)前的計(jì)算式，第二行是當(dāng)前計(jì)算結(jié)果
3、編寫按鈕區(qū)域第一行按鈕的結(jié)構(gòu)
第一行包含四個(gè)按鈕：清除按鈕，刪除按鈕，正負(fù)號(hào)切換按鈕，除號(hào)按鈕 第20行代碼設(shè)置了data-val自定義屬性，用于區(qū)分不同按鈕
4、編寫按鈕區(qū)域第二行按鈕的結(jié)構(gòu)
第二行包含四個(gè)按鈕：7按鈕，8按鈕，9按鈕，乘號(hào)按鈕 四個(gè)按鈕都設(shè)置了data-val自定義屬性，用于區(qū)分不同按鈕
5、編寫按鈕區(qū)域第三行按鈕的結(jié)構(gòu)
第三行包含四個(gè)按鈕：4按鈕，5按鈕，6按鈕，減號(hào)按鈕 四個(gè)按鈕都設(shè)置了data-val自定義屬性，用于區(qū)分不同按鈕
6、編寫按鈕區(qū)域第四行按鈕的結(jié)構(gòu)
第四行包含四個(gè)按鈕：1按鈕，2按鈕，3按鈕，加號(hào)按鈕 四個(gè)按鈕都設(shè)置了data-val自定義屬性，用于區(qū)分不同按鈕
7、編寫按鈕區(qū)域第五行按鈕的結(jié)構(gòu)
第五行包含三個(gè)按鈕：0按鈕，點(diǎn)按鈕，等于按鈕第58行代碼設(shè)置了data-val自定義屬性，用于區(qū)分不同按鈕查看預(yù)覽效果
8、查看頁面結(jié)構(gòu)源代碼
（三）實(shí)現(xiàn)頁面樣式
pages/index/index.wxss文件
1、頁面樣式
設(shè)置page樣式
2、編寫結(jié)果區(qū)域樣式
結(jié)果區(qū)域有三個(gè)樣式類：result，result-sub，result-num查看頁面結(jié)構(gòu)源代碼
/* 結(jié)果區(qū)域樣式 */
.result{
flex: 1;/* 垂直均分手機(jī)屏幕，因?yàn)閒lex-direction：column */
background: #f3f6f6;
position: relative;
}
/* 當(dāng)前計(jì)算式樣式 */
.result-sub{
font-size: 52rpx;
position: absolute;
bottom: 16vh;
right: 3vw;
}
/* 當(dāng)前計(jì)算結(jié)果樣式 */
.result-num{
font-size: 100rpx;
position: absolute;
bottom: 3vh;
right: 3vw;
}
修改頁面結(jié)構(gòu)，暫時(shí)查看預(yù)覽效果查看預(yù)覽效果后，將頁面結(jié)構(gòu)改回去
3、編寫按鈕區(qū)域樣式
（1）按鈕區(qū)域總體樣式
查看預(yù)覽效果
（2）按鈕區(qū)域中每一行的樣式
.btns>view選擇器查看預(yù)覽效果
（3）按鈕區(qū)域每一行中每個(gè)按鈕的樣式
.btns>view>view選擇器 查看預(yù)覽效果
（4）讓0按鈕占兩列
.btns > view:last-child>view:first-child選擇器查看預(yù)覽效果
（5）清除按鈕樣式
.btns > view:first-child > view:first-child選擇器
查看預(yù)覽效果
（6）最后一列按鈕樣式
.btns > view > view:last-child選擇器 查看預(yù)覽效果
（7）按鈕的盤旋樣式類
.bg選擇器查看預(yù)覽效果
4、查看頁面樣式源代碼
/**index.wxss**/
/* 頁面樣式 */
page {
height: 100vh;
display: flex;
flex-direction: column;
color: black;
}
/* 結(jié)果區(qū)域樣式 */
.result{
flex: 1;/* 垂直均分手機(jī)屏幕，因?yàn)閒lex-direction：column */
background: #f3f6f6;
position: relative;
}
/* 當(dāng)前計(jì)算式樣式 */
.result-sub{
font-size: 52rpx;
position: absolute;
bottom: 16vh;
right: 3vw;
}
/* 當(dāng)前計(jì)算結(jié)果樣式 */
.result-num{
font-size: 100rpx;
position: absolute;
bottom: 3vh;
right: 3vw;
}
/* 按鈕區(qū)域樣式 */
.btns{
flex: 1;
display: flex;
flex-direction: column;
font-size: 48rpx;
border-top: 1rpx solid #ccc;
border-left: 1rpx solid #ccc;
}
/* 按鈕區(qū)域中每一行的樣式 */
.btns>view{
flex: 1;
display: flex;
}
/* 按鈕區(qū)域每一行中每個(gè)按鈕的樣式 */
.btns>view>view{
flex-basis: 25%;/* 四個(gè)按鈕均分一行的空間 */
border-right: 1rpx solid #ccc;/* 右邊框線 */
border-bottom: 1rpx solid #ccc;/* 底邊框線 */
box-sizing: border-box;/* 控制盒模型的尺寸計(jì)算方式 */
display: flex;/* 彈性布局，默認(rèn)方向：水平 */
align-items: center;/* 交叉軸居中-垂直居中 */
justify-content: center;/* */
}
/* 0按鈕占兩列 */
.btns > view:last-child>view:first-child{
flex-basis: 50%;
}
/* 清除按鈕樣式 */
.btns > view:first-child > view:first-child{
color: #ff0000;
}
/* 最后一列按鈕樣式 */
.btns > view > view:last-child{
color: #fc8e00;
}
/* 按鈕的盤旋樣式類 */
.bg{
background: #aaaaaa;
}
（四）創(chuàng)建工具模塊
在項(xiàng)目根目錄創(chuàng)建utils目錄
1、數(shù)學(xué)模塊 - math.js
在utils目錄里創(chuàng)建math.js文件
// 精準(zhǔn)計(jì)算功能，用于解決JavaScript浮點(diǎn)數(shù)運(yùn)算精度不準(zhǔn)確的問題
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))
// 動(dòng)態(tài)控制精度長度
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)
}
}
2、計(jì)算模塊 - calc.js
在utils目錄里創(chuàng)建calc.js文件
//引入math.js模塊，獲取math對(duì)象
const math = require('./math.js')
//計(jì)算器中的數(shù)字處理
module.exports = {
target:'num1',//表示當(dāng)前正在輸入哪個(gè)數(shù)字
num1:'0',//保存第1個(gè)數(shù)字
num2:'0',//保存第2個(gè)數(shù)字
op:'',//運(yùn)算符，值可以是+，-，×，÷
//設(shè)置當(dāng)前數(shù)字
setNum(num){
this[this.target] = num
},
//獲取當(dāng)前數(shù)字
getNum(){
return this[this.target]
},
//切換到第二個(gè)數(shù)字
changeNum2(){
this.target ='num2'
},
//重置
reset(){
this.num1 ='0'
this.num2 ='0'
this.target ='num1'
this.op =''
},
//運(yùn)算結(jié)果
getResult(){
let result = 0
if (this.op === '+'){
result = math.add(this.num1,this.num2)
}else if (this.op === '-'){
result = math.sub(this.num1,this.num2)
}else if (this.op === '×'){
result = math.mul(this.num1,this.num2)
}else if (this.op === '÷'){
result = math.div(this.num1,this.num2)
}
return result
}
}
（五）實(shí)現(xiàn)頁面邏輯
pages/index/index.js文件
1、引入calc.js文件
引入calc.js文件，獲取計(jì)算器對(duì)象
2、編寫頁面所需數(shù)據(jù)
data里包含兩個(gè)數(shù)據(jù)：sub與num
3、設(shè)置變量標(biāo)識(shí)
設(shè)置三個(gè)變量標(biāo)識(shí)：numChangeFlag、execFlag、resultFlag
4、編寫數(shù)字按鈕的點(diǎn)擊事件處理函數(shù)
數(shù)字按鈕的點(diǎn)擊事件處理函數(shù)：btnNum() 查看預(yù)覽效果
5、編寫運(yùn)算符按鈕的點(diǎn)擊事件處理函數(shù)
運(yùn)算符按鈕的點(diǎn)擊事件處理函數(shù)：btnOperate 重新編譯，查看預(yù)覽效果
6、修改數(shù)字按鈕點(diǎn)擊事件代碼
數(shù)字按鈕點(diǎn)擊事件代碼 重新編譯，查看預(yù)覽效果
7、等號(hào)按鈕的點(diǎn)擊事件處理函數(shù)
等號(hào)按鈕的點(diǎn)擊事件處理函數(shù)：btnCalculate 重新編譯，查看預(yù)覽效果
8、重置按鈕的點(diǎn)擊事件處理函數(shù)
重置按鈕的點(diǎn)擊事件處理函數(shù)：btnReset() 重新編譯，查看預(yù)覽效果
9、小數(shù)點(diǎn)按鈕的點(diǎn)擊事件處理函數(shù)
（六）特殊情況處理
柚子快報(bào)激活碼778899分享：微信小程序案例3-2 計(jì)算器
文章來源
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Jimoty優(yōu)選鋪
