微信程序开发计算机有几种方法,但大部分代码很复杂,很难懂。 这个情况得到了改进,主要是绑定到组件bindtap属性的自定义函数clickBtn (),采用了switch语句,代码结构更清晰,学员更容易理解。 共享如下。 案例的效果如下图所示。
创建步骤如下:
1.wechat开发者工具的全局控件app.json文件在pages数组中输入“pages/calculator/calcu”,创建计算器页面相关文件,在window属性中进行导航app.json的代码如下所示。
{
页面:
“页面/计算器/计算”,
“页面/索引/索引”,
'页面/日志/日志'
]、
“窗口”:
“背景文本样式”:“灯光”,
'导航星巴克彩色' : ' # FFF ',
“导航栏标题文本”:“简单计算器”,
导航栏文本样式' : '黑色'
}
}
2 .页面布局文件calcu.wxml的代码如下。
视图类='内容'
视图类=' SCR '
屏幕数据
/视图
视图类=' BTN组'
视图类=“项目灰色”绑定标签=“点击BTN”id=“{ b01 }/视图”
视图类='项目灰色'绑定顶点='点击BTN ' id=' { b02 } ' c /视图
视图类别='项目灰色'绑定标签='点击BTN ' id=' { b03 }//视图
视图类='项目灰色'绑定顶点='点击BTN ' id=' { b04 } ' /视图
/视图
视图类=' BTN组'
视图类别='项目灰色'绑定磁带='点击BTN ' id=' { b05 } '9/视图
视图类别='项目灰色'绑定磁带='点击BTN ' id=' { b06 } '8/视图
视图类别='项目灰色'绑定磁带='点击BTN ' id=' { b07 } '7/视图
视图类别='项目灰色'绑定标签='点击BTN ' id=' { b08 } '-- /视图
/视图
视图类=' BTN组'
视图类别='项目灰色'绑定磁带='点击BTN ' id=' { b09 } '6/视图
视图类别='项目灰色'绑定顶点='点击BTN ' id=' { B10 } '5/视图
视图类别='项目灰色'绑定顶点='点击BTN ' id=' { B11 } '4/视图
视图类别='项目灰色'绑定标签='点击BTN ' id=' { B12 } '/视图
/视图
视图类=' BTN组'
视图类别='项目灰色'绑定顶点='点击BTN ' id=' { B13 } '3/视图
视图类别='项目灰色'绑定顶点='点击BTN ' id=' { B14 } '2/视图
视图类别='项目灰色'绑定顶点='点击BTN ' id=' { b15 } '1/视图
视图类='项目灰色' bi
ndtap='clickBtn' id='{{b16}}'>÷</view></view>
<view class='btnGroup'>
<view class='item gray'bindtap='clickBtn' id='{{b17}}' > 0</view>
<view class='item gray'bindtap='clickBtn' id='{{b18}}'> . </view>
<view class='item gray'bindtap='getSqrt' id='{{b19}}'> √</view>
<view class='item orange'bindtap='clickBtn' id='{{b20}}'>=</view>
</view>
</view>
3. 页面样式文件calcu.wxss的代码如下:
/* */
.content{
height:100%;
display: flex;
flex-direction: column;
align-items:center;
box-sizing: border-box;
background:#555;
padding:30rpx 0 20rpx 0;
}
.scr{
background:#fff;
width:700rpx;
height: 100rpx;
line-height: 100rpx;
text-align: right;
margin:0 0 10rpx 0;
padding:0 10rpx 0 0;
font-size:30px;
}
.btnGroup{
display: flex;
flex-direction: row;
}
.item{
width:175rpx;
min-height: 150rpx;
margin: 1rpx;
text-shadow:0 1px 1px rgba(255,255,255,.3);
text-align: center;
line-height: 150rpx;
}
.gray{
background:#eee;
}
.orange{
color:#fff;
background:#f60;
}
4.逻辑处理文件calcu.js的代码如下:
Page({
data: {
b01:"back",
b02: "clear",
b03: "negative",
b04: "+",
b05: "9",
b06: "8",
b07: "7",
b08: "-",
b09: "6",
b10: "5",
b11: "4",
b12: "×",
b13: "3",
b14: "2",
b15: "1",
b16: "÷",
b17: "0",
b18: ".",
b19: "sqrt",
b20: "=" ,
screenData:"0",
lastOperator:false,
arr:[],
logs:[]
},
clickBtn: function (event) {
console.log(event.target.id);
var id = event.target.id;
switch (id) {
case "back":
//退格
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();
break;
case "clear":
//清屏
this.setData({
screenData: "0"
});
this.data.arr.length = 0;
break;
case "negative":
//正负号
var data = this.data.screenData;
if (data == 0) {
return;
}
var firstword = data.substring(0, 1);
if (firstword == "-") {
data = data.substring(1, data.length);
this.data.arr.shift();
} else {
data = "-" + data;
this.data.arr.unshift("-");
}
this.setData({
screenData: data
});
break;
case "=":
//等号=
var data = this.data.screenData;
if (data == 0) {
return;
}
var lastWord = data.substring(data.length - 1, data.length);
if (isNaN(lastWord)) {
return;
}
var num = "";
var lastOperator;
var arr = this.data.arr;
var optarr = [];
for (var i in arr) {
if (isNaN(arr[i]) == false || arr[i] == this.data.b18 || arr[i] == this.data.b03) {
num += arr[i];
} else {
lastOperator = arr[i];
optarr.push(num);
optarr.push(arr[i]);
num = "";
}
}
optarr.push(Number(num));
var result = Number(optarr[0]) * 1.0;
console.log(result);
for (var i = 1; i < optarr.length; i++) {
if (isNaN(optarr[i])) {
if (optarr[1] == this.data.b04) {
result += Number(optarr[i + 1]);
} else if (optarr[1] == this.data.b08) {
result -= Number(optarr[i + 1]);
} else if (optarr[1] == this.data.b12) {
result *= Number(optarr[i + 1]);
} else if (optarr[1] == this.data.b16) {
result /= Number(optarr[i + 1]);
}
}
}
//
this.data.arr.length = 0;
this.data.arr.push(result);
this.setData({
screenData: result + ""
});
break;
default:
if (id == this.data.b04 || id == this.data.b08 || id == this.data.b12 || id == this.data.b16) {
if (this.data.lastOperator == true || this.data.screenData == 0) {
return;
}
}
var num = this.data.screenData;
var data;
if (num == 0) {
data = id;
} else {
data = num + id;
}
this.setData({
screenData: data
});
this.data.arr.push(id);
if (id == this.data.b04 || id == this.data.b08 || id == this.data.b12 || id == this.data.b16) {
this.setData({
lastOperator: true
});
} else {
this.setData({
lastOperator: false
});
}
break;
}
},
getSqrt: function () {
//平方根
var data = Math.sqrt(this.data.screenData);
this.setData({
screenData: data
});
}
})
5. 至此,案例制作完成,希望对大家的学习有很好的帮助。