第一章操作题

首先在浏览器输入网址“htttp://github.com/dunizb/wxapp-sCalc”,进入该网址下载小程序简易计算机源码demo，下载好后解压，用微信小程序开发工具导入该项目并打开。

点击导入找到并打开下载好的小程序。

小程序页面

小程序代码

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: '简易计算器☞',
    userInfo: {},
    defaultSize: 'default',
    disabled: false,
    iconType:'info_circle'
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  toCalc:function(){
    wx.navigateTo({
      url:'../calc/calc'
    })
  },
  onLoad: function () {
    console.log('onLoad');
    var that = this
  	//调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

HTML模块

<view class="content">
  <view class="layout-top">
    <view class="screen">
     {{screenData}}
    </view>
  </view>
    
  <view class="layout-bottom">
    <view class="btnGroup">
      <view class="item orange" bindtap="clickBtn" id="{{idc}}">С</view>
      <view class="item orange" bindtap="clickBtn" id="{{idb}}">←</view>
      <!--<view class="item orange" bindtap="clickBtn" id="{{idt}}">＋/－</view>-->
      <view class="item orange iconBtn" bindtap="history">
          <icon type="{{iconType}}" color="{{iconColor}}" class="icon" size="25"/>
      </view>
      <view class="item orange" bindtap="clickBtn" id="{{idadd}}">＋</view>
    </view>
    <view class="btnGroup">
      <view class="item blue" bindtap="clickBtn" id="{{id9}}">9</view>
      <view class="item blue" bindtap="clickBtn" id="{{id8}}">8</view>
      <view class="item blue" bindtap="clickBtn" id="{{id7}}">7</view>
      <view class="item orange" bindtap="clickBtn" id="{{idj}}">－</view>
    </view>
    <view class="btnGroup">
      <view class="item blue" bindtap="clickBtn" id="{{id6}}">6</view>
      <view class="item blue" bindtap="clickBtn" id="{{id5}}">5</view>
      <view class="item blue" bindtap="clickBtn" id="{{id4}}">4</view>
      <view class="item orange" bindtap="clickBtn" id="{{idx}}">×</view>
    </view>
    <view class="btnGroup">
      <view class="item blue" bindtap="clickBtn" id="{{id3}}">3</view>
      <view class="item blue" bindtap="clickBtn" id="{{id2}}">2</view>
      <view class="item blue" bindtap="clickBtn" id="{{id1}}">1</view>
      <view class="item orange" bindtap="clickBtn" id="{{iddiv}}">÷</view>
    </view>
    <view class="btnGroup">
      <view class="item blue zero" bindtap="clickBtn" id="{{id0}}">0</view>
      <view class="item blue" bindtap="clickBtn" id="{{idd}}">.</view>
      <view class="item orange" bindtap="clickBtn" id="{{ide}}">＝</view>
    </view>
  </view>
</view>

CSS模块

.content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ccc;
    font-family: "Microsoft YaHei";
    overflow-x: hidden;
}
.layout-top{
    width: 100%;
    margin-bottom: 30rpx;
}
.layout-bottom{
    width: 100%;
}
.screen {
    text-align: right;
    width: 100%;
    line-height: 260rpx;
    padding: 0 10rpx;
    font-weight: bold;
    font-size: 60px;
    box-sizing: border-box;
    border-top: 1px solid #fff;
}
.btnGroup {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    height: 5rem;
    background-color: #fff;
}
.item {
    width:25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 1px;
    margin-right: 1px;
}
.item:active {
    background-color: #ff0000;
}
.zero{
    width: 50%;
}
.orange {
    color: #fef4e9;
    background: #f78d1d;
    font-weight: bold;
}
.blue {
    color:#d9eef7;
    background-color: #0095cd;
}
.iconBtn{
    display: flex;
}
.icon{
   display: flex;
   align-items: center;
   width:100%;
   justify-content: center;
}

小程序调试运行

点击这个地方，打开计算机

输入98765-43210运行结果等于55555，结果正确

代码运行正常。