按照教程上面的錄入編碼，寫出了第一個微信小程序：計算器
因爲有些html和js的入門了。所以寫代碼沒問題了。
感覺css的調整非常不熟悉，也就是有問題了也不知道怎麼去調整它哪個屬性。
比如開發環境中看到按鈕佈局非常合理，到真機中按鈕擠在一起，怎麼調整都不行。後面加了一個max-width讓按鈕中間有了間隙
後期還得深入去了解css
代碼
// pages/calc/calc.js
Page({
/**
* 頁面的初始數據
*/
mydata:{
lastOper:"add",
tempNum:0
},
data: {
result:"0",
id1:"memory",
id2:"clear",
id3:"backspace",
id4:"div",
id5:"num_7",
id6:"num_8",
id7:"num_9",
id8:"mul",
id9:"num_4",
id10:"num_5",
id11:"num_6",
id12:"sub",
id13:"num_1",
id14:"num_2",
id15:"num_3",
id16:"add",
id17:"negative",
id18:"num_0",
id19:"dot",
id20:"equ"
},
clickButton:function(e){
var data = this.data.result;
var lens;
var dotpos;
switch(e.target.id){
case "num_0":
case "num_1":
case "num_2":
case "num_3":
case "num_4":
case "num_5":
case "num_6":
case "num_7":
case "num_8":
case "num_9":
if(this.data.result=="0"){
data = e.target.id.split("_")[1];
}else{
data += e.target.id.split("_")[1];
}
break;
case "clear":
data = "0";
this.mydata.tempNum = 0;
this.mydata.lastOper = "add";
break;
case "backspace":
lens = data.toString().length;
if(lens==1){
data = 0;
}else{
console.log(data);
data = data.toString().substr(0,lens -1);
}
break;
case "negative":
if(data != 0){
data = -1*data;
}
break;
case "dot":
dotpos = data.toString().indexOf(".");
if(dotpos<0){
data += ".";
}
break;
case "add":
case "sub":
case "mul":
case "div":
this.mydata.tempNum = calctwonum(this.mydata.tempNum,data,this.mydata.lastOper);
data = 0;
this.mydata.lastOper = e.target.id;
break;
case "equ":
data = calctwonum(this.mydata.tempNum,data,this.mydata.lastOper);
this.mydata.lastOper = "add";
break;
}
//回寫結果
this.setData({
result:data
})
},
})
var calctwonum=function(data1,data2,Opers){
var data;
data1 = parseFloat(data1);
data2 = parseFloat(data2);
switch(Opers){
case "add":
data = data1 + data2;
break;
case "sub":
data = data1 - data2;
break;
case "mul":
data = data1 * data2;
break;
case "div":
if(data2!=0){
data = data1 / data2;
}
break;
}
//小數位數
if(data.toString().indexOf(".")<0){
return data;
}else{
return data.toFixed(6);
}
}
css----
.content{
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
padding-top: 10rpx;
}
.result{
background-color: #ffffff;
text-align: right;
font-size: 36px;
width:600rpx;
height:150rpx;
line-height: 150rpx;
padding: 0 20rpx;
margin: 30rpx;
border:1px solid #ddd;
border-radius: 6px;
}
.btn_group{
width:650rpx;
height: 160rpx;
display: flex;
justify-content:space-between; /*從兩邊靠邊，中間均勻分佈*/
flex-direction: row;
}
.btn_size{
max-width:155rpx; /*最開始手機測試四個按鈕接在一起，加了這個就有間隙了*/
width:140rpx;
min-height:150rpx;
margin: 5rpx;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
border-radius: 5px;
text-align: center;
line-height: 130rpx;
font-size: 30px;
}
.btn_color_blue{
background-color:#0095cd;
color:#d9eef7;
border:solid 1px #0076a3;
}
.btn_color_orange{
background-color:#f78ded;
color:#fef4e9;
border:solid 1px #da7c0c;
}
.btn_number_hover{
background-color: #0094cc;
opacity: 0.7;
}
.btn_control_hover{
background-color: #ff0000;
}