2021-06-15记录端午假期学习微信小程序计算器-优快云博客

本文记录了作者在端午假期期间学习微信小程序并制作计算器的过程，参考了GitHub上的wxapp-sCalc项目。内容涉及calc.wxss、calc.wxml和calc.js的实现，分享了在逻辑和组件布局上遇到的问题与解决方案，旨在帮助初学者避免弯路，共同进步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

程序参考GitHub/wxapp-sCalc-master 效果如图

calc.wxss,calc.wxml,calc.js.内容如下由于手机编写博客屏幕太小不好处理排班讲究看吧！走了些许弯路很多都是逻辑方面问题，组件布局也是从零学起希望你对初学者有所帮助少走弯路一起学习

/* pages/Calc/Calc.wxss */
.container{
    height: 100%;
    display:flex;
    flex-direction:column;
    /*align-items: center;*/
    background-color: #fff;
    font-family:"Arial";
    overflow: hidden;
}

.layout-top{
  width: 100%;
  /*height: 40%;*/
  border:2rpx solid #000099;
 /* margin-bottom: 10rpx;*/
 background-color:#e9c26a;
}
.layout-bottom{
  width: 100%;
  height: 60%;
}
.screen{
  
  width: 100%;
  height: 300rpx;
  text-align:right;
  max-inline-size: 15;
  white-space: pre-wrap;
  /*line-height: 20rpx;*/
  padding: 0 10rpx;
  margin:2rpx 5rpx 10rpx;
  overflow:visible;
  font-size: 17pt;
  font-weight:Medium;
  color:BW_0_Alpha_0.9;
  box-sizing: border-box;
  border:2px solid #5b6dcd;
}
.screenres{
  width:100%;
  height: 4%;
 line-height: normal;
 text-align: right;
 margin-bottom: 2rpx;
 font-size: 17pt;
 font-weight:bolder;
 box-sizing: border-box; 
 border:2rpx dashed #ff0000 ;
}

.btnGroup{
  display: flex;
  flex-direction: row;
  flex:1;
  width:100%;
  height:4rem;
  background-color: #fff;
}
.btnOrange{
   color: #fef4fe;
  background-color: #fe8dfe;
  font-weight:bold;  
  }
  .btnBlue{
    columns: #d9eef7;
    background-color: #0095fd;
  }
  .btnYellow{
    color:#d9eef7;
    background-color:rgb(114, 175, 137);
  }
  .item{
    width:25%;
    display:flex;
    align-items: center;
    flex-direction:column;
    justify-content: center;
    margin-top: 2%;
    margin-right: 2%;
  }
  .item:active{
    background-color: #93db70;
  }

<view class="container" >
  <view class="layout-top">
    <view class="screen">{
  
  {screenData}}</view>
    <view class="screenres">{
  
  {screenResult}}</view>
  </view>
  <view class="layout-bottom">
    <view class="btnGroup">
      <view class="item btnOrange" id="{
  
  {btnClear}}" bindtap="clickBtn">C</view>
      <view class="item btnOrange" id="{
  
  {btnAbs}}" bindtap="clickBtn">＋/－</view>
      <view class="item btnOrange" id="{
  
  {btnBack}}" bindtap="clickBtn">＜—</view>
      <view class="item btnYellow" id="{
  
  {btnDivision}}" bindtap="clickBtn">÷</view>
     </view>
     <view class="btnGroup">
      <view class="item btnBlue" id="{
  
  {btn7}}" bindtap="clickBtn"&