概述
微信小程序-簡易計(jì)算器,滿足日常所用的的加減乘除計(jì)算
詳細(xì)
一、前期準(zhǔn)備工作
軟件環(huán)境：微信開發(fā)者工具
官方下載地址：微信開發(fā)者工具下載地址與更新日志 | 微信開放文檔
1、基本需求。
- 簡易計(jì)算器
- 滿足日常所用的的加減乘除計(jì)算
- 帶歷史記錄,查看過往計(jì)算
2、案例目錄結(jié)構(gòu)
二、程序?qū)崿F(xiàn)具體步驟
1.index.wxml代碼
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
</view>
<view>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
<text class="" style="display:block">極客小寨OkYoung團(tuán)隊(duì) 傾情出品</text>
</view>
<view class="usermotto">
<!--<text class="user-motto">{{motto}}</text>-->
<button type="default" size="{{primarySize}}" plain="{{plain}}" hover-class="button-hover"
disabled="{{disabled}}" bindtap="toCalc"> {{motto}} </button>
</view>
</view>2.index.wxss代碼
/**index.wxss**/
.userinfo {
/*display: flex;*/
/*flex-direction: column;*/
/*align-items: center;*/
/*width:256rpx;*/
/*height: 512rpx;*/
}
.userinfo-avatar {
width: 228rpx;
height: 228rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
margin-top:80px;
line-height: 80px;
}
.usermotto {
margin-top: 35%;
}
/** 修改button默認(rèn)的點(diǎn)擊態(tài)樣式類**/
.button-hover {
background-color: red;
}
/** 修改默認(rèn)的navigator點(diǎn)擊態(tài) **/
.navigator-hover {
color:blue;
}
.github{
color: green;
font-size: 14px;
text-align: center;
margin-top: 5px;
}
.icon{
vertical-align: middle;
margin-right: 2px;
}3.index.js邏輯代碼
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
motto: '簡易計(jì)算器?',
userInfo: {},
defaultSize: 'default',
disabled: false,
iconType:'info_circle'
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
toCalc:function(){
wx.navigateTo({
url:'../calc/calc'
})
},
onLoad: function () {
console.log('onLoad');
var that = this
//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){
//更新數(shù)據(jù)
that.setData({
userInfo:userInfo
})
})
}
})4.計(jì)算器部分功能邏輯代碼
var id = event.target.id;
if(id == this.data.idb){ //退格←
var data = this.data.screenData;
if(data == "0"){
return;
}
data = data.substring(0,data.length-1);
if(data == "" || data == "－"){
data = 0;
}
this.setData({"screenData":data});
this.data.arr.pop();
}else if(id == this.data.idc){ //清屏C
this.setData({"screenData":"0"});
this.data.arr.length = 0;
}else if(id == this.data.idt){ //正負(fù)號+/-
var data = this.data.screenData;
if(data == "0"){
return;
}
var firstWord = data.charAt(0);
if(data == "－"){
data = data.substr(1);
this.data.arr.shift();
}else{
data = "－" + data;
this.data.arr.unshift("－");
}
this.setData({"screenData":data});
}else if(id == this.data.ide){ //等于＝
var data = this.data.screenData;
if(data == "0"){
return;
}
//eval是js中window的一個(gè)方法，而微信頁面的腳本邏輯在是在JsCore中運(yùn)行，JsCore是一個(gè)沒有窗口對象的環(huán)境，所以不能再腳本中使用window，也無法在腳本中操作組件
//var result = eval(newData);
var lastWord = data.charAt(data.length);
if(isNaN(lastWord)){
return;
}三、案例運(yùn)行效果圖
四、總結(jié)與備注
注意事項(xiàng)
1.每新建一個(gè)頁面一定要記得去app.josn的pages屬性中添加，不然的話使用navigateTo跳轉(zhuǎn)到新頁面后新頁面的onLoad方法不會(huì)執(zhí)行。
2.微信小程序中沒有window等JavaScript對象，所以在寫JS前想好替代方案，比如本計(jì)算器就被坑大了，本來使用eval函數(shù)可以方便的計(jì)算表達(dá)式，結(jié)果沒法用，繞了好大的彎。
3.微信小程序中的JS并不是真正的JS，wxss也并不是真正的CSS，所以寫的時(shí)候還是要注意一下。文章來源：http://www.zghlxwxcb.cn/news/detail-764564.html
4.本計(jì)算器存在不完善和bug，因?yàn)橹攸c(diǎn)不是實(shí)現(xiàn)全部功能，而是搞清楚微信小程序開發(fā)方法，所以非關(guān)注點(diǎn)不用在意。文章來源地址http://www.zghlxwxcb.cn/news/detail-764564.html
到了這里，關(guān)于微信小程序-簡易計(jì)算器的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
