第一篇、微信小程序_01计算器

官方文档地址：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);

  }
})

 

二、历史的界面