微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器
更新時(shí)間：2022年06月02日 15:57:15 作者：springsnow
這篇文章介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、項(xiàng)目概述
功能：
- 實(shí)現(xiàn)加減乘除
- 去余(%)
- 刪除(Delete)
- 全部清空( C)
html界面要在app.json里面注冊(cè)。
不注冊(cè)的話會(huì)報(bào)錯(cuò)：navigateTo:fail url "pages/index/talkPage" is not in app.json
注冊(cè)完畢之后編譯，開發(fā)工具會(huì)自動(dòng)為你創(chuàng)建一個(gè)對(duì)應(yīng)的js和wxss文件，而且js里面會(huì)自動(dòng)搭好基本函數(shù)：
頁面如下：
二、WXML文件編寫
首先我們對(duì)計(jì)算器頁面進(jìn)行設(shè)計(jì)，這里我們主要分為兩部分，上部分和下部，顯示部分分為操作數(shù)和操作符。
計(jì)算器分為五行四列，最外面為縱向布局，里面為橫向布局。布局通過樣式表操作，
代碼如下：
<view class="result">
<!-- 當(dāng)前view表示的是顯示部分 -->
<view class="result_num">{{num}}</view>
<!--顯示操作數(shù) -->
<view class="result_op">{{op}}</view>
<!--顯示操作符 -->
</view>
<view class="btns">
<!-- 當(dāng)前view表示的是操作部分 -->
<view>
<!--第一行 -->
<view hover-class="bg" bindtap="resetBtn">C</view>
<view hover-class="bg" bindtap="delBtn">DEL</view>
<view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
<view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
</view>
<view>
<!--第二行 -->
<view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
<view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
<view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
<view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
</view>
<view>
<!--第三行 -->
<view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
<view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
<view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
<view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
</view>
<view>
<!--第四行 -->
<view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
<view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
<view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
<view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
</view>
<view>
<!--第五行 -->
<view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
<view hover-class="bg" bindtap="doBtn">.</view>
<view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
</view>
</view>三、WXSS文件編寫
這里分兩部分，計(jì)算結(jié)果展示區(qū)，計(jì)算按鈕區(qū)?？梢妛xml文件注釋。
這里在補(bǔ)充一點(diǎn)樣式設(shè)計(jì)：
- display:flex 表示彈性布局，block塊布局（后面接換行符）
flex：1表示占滿剩余空間（flex-grow,flex-shrink,flex-basis的簡(jiǎn)寫）默認(rèn)值為:0，1，auto， 不伸不縮 - flex-direction：容器內(nèi)元素的排列方向（默認(rèn)橫向排列）
1.flex-direction:row;沿水平主軸讓元素從左向右排列。此時(shí)flex-basis相當(dāng)于width。
2.flex-direction：colimn；沿垂直主軸從上到下排列。此時(shí)flex-basis相當(dāng)于height
3.flex-direction:roe-reverse;沿水平主軸從右向左排列 - hover-class： 按下去的樣式
- **box-sizing：border-box；**將邊框先計(jì)入寬度之內(nèi),用于確定準(zhǔn)確邊框?qū)挾?，任何像素都?huì)影響頁面效果
- align-items：**垂直對(duì)齊,**display要設(shè)置成flex才能對(duì)齊屬性賦值
- justify-content：水平對(duì)齊方式
- 樣式表的設(shè)置“>”符號(hào)：表示嵌套級(jí)聯(lián)關(guān)系
.btns>view>view
view>view - 視口單位
代碼如下：
/* pages/cal/index.wxss */
.result {
flex: 1; /* 彈性填充滿*/
background: #f3f6fe;
position: relative;
}
.btns {
flex: 1;
display: flex; /*彈性顯示結(jié)構(gòu)*/
flex-direction: column; /*縱向顯示*/
font-size: 17pt;
border-top: 1rpx solid #ccc;
border-left: 1rpx solid #ccc;
}
page {
display: flex;
flex-direction: column;
height: 100%;
}
.btns>view {
flex: 1;
display: flex;
flex-direction: row;
}
.btns>view>view {
flex-basis: 25%;
border-right: 1rpx solid #ccc;
border-bottom: 1rpx solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.btns>view:last-child>view:first-child {
flex-basis: 50%;
}
.bg {
background-color: #eee;
}
.result_num {
font-size: 17pt;
position: absolute;
bottom: 5vh;
right: 3vw;
}
.result_op {
font-size: 17pt;
position: absolute;
bottom: 1vh;
right: 3vw;
}四、JS頁面設(shè)計(jì)
主要實(shí)現(xiàn)
代碼如下：
Page({
data: {
num: "", //前臺(tái)頁面顯示的輸入數(shù)字或者結(jié)果
op: "" //前臺(tái)頁面顯示的操作符
},
result: null, //裝載計(jì)算結(jié)果
isClear: true, //是否需要清理前面的數(shù)字，true是要清理
numBtn: function(e) {
var num = e.target.dataset.val; //獲取你輸入的數(shù)字
if (this.isClear || this.data.num == "0") //如果需要清理前面的數(shù)字，那么前面的數(shù)字就不需要保存
{
this.isClear = false; //將清理標(biāo)志設(shè)置為false，以便連續(xù)輸入數(shù)字
this.setData({
num: num
});
} else {
this.setData({
num: this.data.num + num //不清理前面的內(nèi)容，將輸入的內(nèi)容追加到最后面,這是字符串的連接操作，因?yàn)閮蛇叾际亲址愋?
});
}
},
opBtn: function(e) {
var op = this.data.op; //獲取上一次的操作符
var num = Number(this.data.num); //獲取操作數(shù)
this.setData({
op: e.target.dataset.val
});
if (this.isClear) //當(dāng)你連續(xù)點(diǎn)擊操作符的時(shí)候，操作無效
{
return;
}
this.isClear = true; //設(shè)置清理內(nèi)容標(biāo)志
if (this.result == null) //講第一次運(yùn)算設(shè)置為當(dāng)前的操作數(shù)
{
this.result = num;
return;
}
//運(yùn)算符的運(yùn)算
if (op == "+") {
// this.result = cals.add(this.result, num);
this.result = this.result + num; //數(shù)字加，因?yàn)閚um是數(shù)字類型
} else if (op == "-") {
// this.result = cals.sub(this.result, num);
this.result = this.result - num;
} else if (op == "*") {
// this.result = cals.mul(this.result, num);
this.result = this.result * num;
} else if (op == "/") {
// this.result = cals.div(this.result, num);
this.result = this.result / num;
} else if (op == "%") {
this.result = this.result % num;
}
this.setData({
num: this.result
});
},
doBtn: function(e) {
if (this.isClear) //如果直接點(diǎn)擊小數(shù)點(diǎn)，則顯示"0."
{
this.setData({
num: "0."
});
this.isClear = false;
return;
}
if (this.data.num.indexOf(".") >= 0) //查詢前面輸入的數(shù)字中，是否存在小數(shù)點(diǎn)
{
return; //如果存在小數(shù)點(diǎn)，當(dāng)前輸入無效
}
this.setData({
num: this.data.num + "."
});
},
delBtn: function(e) {
var num = this.data.num.substr(0, this.data.num.length - 1);
this.setData({
num: num == "" ? "0" : num
});
},
resetBtn: function(e) {
this.result = null;
this.isClear = true;
this.setData({
num: '0',
op: ''
});
}
})五、總結(jié)
1、計(jì)算器最重要注意樣式表，JS。
在JS中要是想數(shù)據(jù)從前臺(tái)傳到后臺(tái)通過事件的方式（e)，從后臺(tái)傳到前臺(tái)用data的方式。
2、主頁跳轉(zhuǎn)到計(jì)算器頁面
主頁index.wxml,增加一個(gè)按鈕：
<button bindtap="OnCalShow" >計(jì)算器</button>
在index.js中增增加
OnCalShow() {
wx.navigateTo({
url: '/pages/cal/index',
})
}
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
簡(jiǎn)單聊聊JavaScript中的事件循環(huán)
js的事件循環(huán)（event-loop）是我們前端學(xué)習(xí)中非常重要的一部分，也是面試中經(jīng)常被問到的點(diǎn)，這篇文章我們就來給大家著重講解一下吧2023-02-02
這篇文章主要是對(duì)JavaScript中的傳值與傳引用進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
詳解JavaScript原型對(duì)象的this指向問題
這篇文章主要為大家介紹了JavaScript原型對(duì)象的this指向問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了js 對(duì)象使用的小技巧,結(jié)合實(shí)例形式分析了JavaScript對(duì)象的遍歷、查找、事件監(jiān)聽等相關(guān)操作技巧,需要的朋友可以參考下2019-11-11
詳解JavaScript UTC時(shí)間轉(zhuǎn)換方法
這篇文章主要介紹了JavaScript UTC時(shí)間轉(zhuǎn)換方法，介紹了本地時(shí)間到UTC時(shí)間的轉(zhuǎn)換、UTC日期到本地日期的轉(zhuǎn)換，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了ES6概念 ymbol.for()方法,需要的朋友可以參考下2016-12-12
JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后層展開效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后層展開效果的方法,可實(shí)現(xiàn)點(diǎn)擊文字緩慢展開層的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05
JS二級(jí)菜單不同實(shí)現(xiàn)方法分析【4種方法】
這篇文章主要介紹了JS二級(jí)菜單不同實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了4種不同的二級(jí)下拉菜單實(shí)現(xiàn)方法,需要的朋友可以參考下2018-12-12
JS中Json數(shù)據(jù)的處理和解析JSON數(shù)據(jù)的方法詳解
JSON （JavaScript Object Notation）一種簡(jiǎn)單的數(shù)據(jù)格式，比xml更輕巧，這篇文章主要介紹了JS中Json數(shù)據(jù)的處理和解析JSON數(shù)據(jù)的方法詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JavaScript頁面回流與重繪,一個(gè)html頁面是一個(gè)整體，當(dāng)這個(gè)整體中的某一個(gè)部分發(fā)生改變，那么這個(gè)頁面整體會(huì)重新進(jìn)行渲染，而如果我們采用添加標(biāo)簽的方式，每次添加一個(gè)標(biāo)簽，就會(huì)讓每一次頁面都重新渲染，性能急劇下降,下面來看看具體內(nèi)容吧2022-01-01