官方文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
一、计算器的首页布局
第一部分WXML：
<view class="content">
<!--我是显示结果-->
<view class="output">{{outputData}}</view> <!--按钮排序 有20个按钮，5行4列-->
<view class="btnGroup">
<view class="item" bindtap="btnClick" id="{{id1}}" >返回</view>
<view class="item">清屏</view>
<view class="item">+/</view>
<view class="item">+</view>
</view> <view class="btnGroup">
<view class="item">9</view>
<view class="item">8</view>
<view class="item">7</view>
<view class="item">+</view>
</view> <view class="btnGroup">
<view class="item">6</view>
<view class="item">5</view>
<view class="item">4</view>
<view class="item">-</view>
</view> <view class="btnGroup">
<view class="item">3</view>
<view class="item">2</view>
<view class="item">1</view>
<view class="item">*</view>
</view> <view class="btnGroup">
<view class="item">0</view>
<view class="item">.</view>
<view class="item">=</view>
<view class="item">/</view>
</view> </view>
第二部分wxss：
.content{
padding: 30rpx;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
background-color: #ddd;
}
.output{
background-color: white;
text-align: right;
height: 100rpx;
width: 100%;
line-height: 100rpx;
padding-right: 10rpx;
border-radius: 3rpx;
margin-bottom: 30rpx;
}
/*流水布局，方向是行*/
.btnGroup{
display: flex;
flex-direction: row;
}
/*默认宽度是750rpx*/
.btnGroup .item{
background-color: orange;
width: 160rpx;
height: 150rpx;
text-align: center;
line-height: 150rpx;
text-shadow: 0 2rpx 2rpx rgba(0, 0, 0,3);
margin: 10rpx;
}
第三部部分js:
Page({
data:{
// text:"这是一个页面"
id1:"back",
id2:"clear",
id3:"ne",
id4:"+",
id5:"9",
id6:"8",
id7:"7",
id8:"+",
id9:"6",
id10:"5",
id11:"4",
id12:"-",
id13:"3",
id14:"2",
id15:"1",
id16:"*",
id17:"0",
id18:".",
id19:"history",
id20:"=",
outputData:"0"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
historyClick:function(){
wx.navigateTo(
url("pages/history/history")
)
},
// 处理按钮的业务逻辑
btnClick:function(event){
console.log(event.target.id);
var id = event.target.id;
var data ;
var outData = this.data.outputData;
if(0 == outData){
data = id;
}else{
data = outData + id;
}
this.setData({outputData:data});
console.log(outData);
}
})
二、历史的界面