第一章作业（微信小程序--计算机简单分析）-Toy模板网

这篇具有很好参考价值的文章主要介绍了第一章作业（微信小程序--计算机简单分析）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

分析：

app.js

它定义了一个全局的App对象，用于控制整个小程序的生命周期和全局数据。下面逐部分分析：

onLaunch: function () { ... }：
- 当小程序启动时（即打开时），会触发onLaunch生命周期函数。
- 在这个函数里，首先通过wx.getStorageSync('logs')从本地缓存中获取名为logs的数据，如果获取不到，则默认返回一个空数组。
- 然后在数组头部添加当前时间戳（Date.now()）以记录本次启动的时间。
- 最后，使用wx.setStorageSync('logs', logs)将更新后的logs数据保存回本地缓存。
getUserInfo:function(cb){...}：
- 这是一个获取用户信息的方法，接收一个回调函数cb作为参数，当获取到用户信息时调用该回调函数。
- 首先检查globalData.userInfo是否存在，如果已存在（即用户已经授权并获取过个人信息），则直接调用回调函数并将用户信息传入。
- 如果globalData.userInfo不存在，执行以下步骤：
  - 调用wx.login接口进行登录操作，获取登录凭证（code）。
  - 登录成功后，进一步调用wx.getUserInfo接口获取用户信息，包括昵称、头像等。
  - 获取到用户信息后，将其保存至globalData.userInfo中，并再次调用回调函数，传入用户信息。
globalData:{ userInfo:null }：
- globalData是小程序应用级别的全局数据，所有页面都可以访问。
- 在这里定义了一个全局变量userInfo，初始值为null，用于存储用户信息。

总结：这段代码主要实现了两个功能，一是记录小程序每次启动的时间并保存到本地缓存；二是提供了获取用户信息的方法，并确保在获取到用户信息后能够异步回调给调用方。

app.json

这段JSON配置代码是微信小程序的app.json文件，它用于定义小程序的基本结构和全局样式。

"pages": [...]：
- 这部分列出了小程序的所有页面路径。按照数组的顺序依次加载页面，这些页面构成了小程序的主要功能模块。
- 具体解析如下：
  - "pages/index/index"：首页或主界面
  - "pages/calc/calc"：计算器页面
  - "pages/history/history"：历史记录页面
  - "pages/logs/logs"：日志记录页面
"window": {...}：
- 定义了小程序窗口（即整个应用）的一些全局样式属性。
- backgroundTextStyle: 设定下拉背景字体、loading图标的样式，此处设置为"light"，即浅色样式。
- navigationBarBackgroundColor: 设置导航栏（顶部状态栏）的背景颜色，此处设置为"#da7c0c"，一种深橙色。
- navigationBarTitleText: 设置导航栏标题文字内容，此处设为"简易计算器"。
- navigationBarTextStyle: 设置导航栏标题文字的颜色，此处设置为"white"，即白色。

总结：该段配置代码主要用来组织小程序页面结构，并对小程序全局窗口样式进行个性化定制，包括导航栏的背景颜色、标题以及字体颜色等。

app.wass

这段代码是微信小程序中的样式表文件`app.wxss`，它定义了一个名为`.container`的CSS类选择器及其样式规则。具体分析如下：

1. `.container`：
- 这是一个类选择器，用于在HTML或WXML中为具有`class="container"`属性的元素应用样式。

2. `height: 100%;`：
- 设置`.container`元素的高度为父容器的100%，即填满整个垂直空间。

3. `display: flex;`：
- 将`.container`元素设置为弹性布局（Flexbox），这是一种强大的布局模式，可以轻松地实现复杂、响应式的布局。

4. `flex-direction: column;`：
- 在弹性容器内定义主轴的方向为垂直方向，子元素将按从上到下的顺序排列。

5. `align-items: center;`：
- 对齐弹性项目（即子元素）沿交叉轴居中对齐。由于`flex-direction`为`column`，所以这里是垂直居中对齐。

6. `justify-content: space-between;`：
- 在主轴方向（这里指垂直方向）上分配弹性项目的间距，第一个和最后一个子元素分别紧贴容器的顶部和底部，其余子元素之间的间距相等。

7. `padding: 200rpx 0;`：
- 设置`.container`元素的内容区（即边框与内容之间的区域）上下内边距为200rpx，左右内边距为0。rpx是微信小程序的单位，可以根据屏幕宽度自适应调整尺寸。

8. `box-sizing: border-box;`：
- 设置盒模型为`border-box`，这意味着元素的总宽度和总高度包含了内填充（padding）、边框（border）以及内容区域的大小，而不是仅包含内容区域的大小。这对于计算布局尺寸时很有帮助，特别是在使用百分比宽度或高度时。

calc.js

这段代码是基于微信小程序开发的计算器页面逻辑。它主要通过`Page`构造函数创建一个页面，并在页面中定义了一系列事件处理函数和数据属性，以实现计算器的基本功能。

1. 数据属性（data）：

- `idb`, `idc`, `idt`, ... 等变量存储了计算器界面上各个按钮的ID。
- `screenData` 用于显示当前计算结果或输入的数字。
- `operaSymbo` 对象存储了运算符及其对应的显示符号。
- `lastIsOperaSymbo` 用于标记上一次输入是否为运算符。
- `iconType`, `iconColor` 可能用于控制界面中的图标样式。
- `arr` 数组用于存储用户输入的运算表达式分段内容。
- `logs` 数组用于存储历史计算记录。

2. 生命周期函数：

- `onLoad`, `onReady`, `onShow`, `onHide`, `onUnload` 分别对应页面的加载、渲染完成、显示、隐藏、关闭等生命周期阶段。

3. 自定义事件处理器（clickBtn）:

处理用户点击计算器按钮的事件，根据点击的按钮ID执行相应的操作，如退格、清屏、改变正负号、等于号进行计算等。

4. history 方法：

当用户触发查看历史记录时，调用`wx.navigateTo`方法跳转到历史记录页面。

5. 在`clickBtn`方法中，核心逻辑是对用户输入的操作数和运算符进行处理，并通过栈（这里用数组`arr`模拟栈）来解析表达式，最终计算结果并显示在屏幕上。同时，每次计算后将完整的表达式与结果存储到`logs`数组中以便查看历史记录。

代码：

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

//calc.js
Page({
  data:{
    idb:"back",
    idc:"clear",
    idt:"toggle",
    idadd:"＋",
    id9:"9",
    id8:"8",
    id7:"7",
    idj:"－",
    id6:"6",
    id5:"5",
    id4:"4",
    idx:"×",
    id3:"3",
    id2:"2",
    id1:"1",
    iddiv:"÷",
    id0:"0",
    idd:".",
    ide:"＝",
    screenData:"0",
    operaSymbo:{"＋":"+","－":"-","×":"*","÷":"/",".":"."},
    lastIsOperaSymbo:false,
    iconType:'waiting_circle',
    iconColor:'white',
    arr:[],
    logs:[]
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  clickBtn:function(event){
    var id = event.target.id;
    if(id == this.data.idb){  //退格←
      var data = this.data.screenData;
      if(data == "0"){
          return;
      }
      data = data.substring(0,data.length-1);
      if(data == "" || data == "－"){
          data = 0;
      }
      this.setData({"screenData":data});
      this.data.arr.pop();
    }else if(id == this.data.idc){  //清屏C
      this.setData({"screenData":"0"});
      this.data.arr.length = 0;
    }else if(id == this.data.idt){  //正负号+/-
      var data = this.data.screenData;
      if(data == "0"){
          return;
      }
      var firstWord = data.charAt(0);
      if(data == "－"){
        data = data.substr(1);
        this.data.arr.shift();
      }else{
        data = "－" + data;
        this.data.arr.unshift("－");
      }
      this.setData({"screenData":data});
    }else if(id == this.data.ide){  //等于＝
      var data = this.data.screenData;
      if(data == "0"){
          return;
      }
      //eval是js中window的一个方法，而微信页面的脚本逻辑在是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能再脚本中使用window，也无法在脚本中操作组件                 
      //var result = eval(newData);           
      
      var lastWord = data.charAt(data.length);
      if(isNaN(lastWord)){
        return;
      }

      var num = "";

      var lastOperator = "";
      var arr = this.data.arr;
      var optarr = [];
      for(var i in arr){
        if(isNaN(arr[i]) == false || arr[i] == this.data.idd || arr[i] == this.data.idt){
          num += arr[i];
        }else{
          lastOperator = arr[i];
          optarr.push(num);
          optarr.push(arr[i]);
          num = "";
        }
      }
      optarr.push(Number(num));
      var result = Number(optarr[0])*1.0;
      console.log(result);
      for(var i=1; i<optarr.length; i++){
        if(isNaN(optarr[i])){
            if(optarr[1] == this.data.idadd){
                result += Number(optarr[i + 1]);
            }else if(optarr[1] == this.data.idj){
                result -= Number(optarr[i + 1]);
            }else if(optarr[1] == this.data.idx){
                result *= Number(optarr[i + 1]);
            }else if(optarr[1] == this.data.iddiv){
                result /= Number(optarr[i + 1]);
            }
        }
      }
      //存储历史记录
      this.data.logs.push(data + result);
      wx.setStorageSync("calclogs",this.data.logs);

      this.data.arr.length = 0;
      this.data.arr.push(result);

      this.setData({"screenData":result+""});
    }else{
      if(this.data.operaSymbo[id]){ //如果是符号+-*/
        if(this.data.lastIsOperaSymbo || this.data.screenData == "0"){
          return;
        }
      }

      var sd = this.data.screenData;
      var data;
      if(sd == 0){
        data = id;
      }else{
        data = sd + id;
      }
      this.setData({"screenData":data});
      this.data.arr.push(id);

      if(this.data.operaSymbo[id]){
        this.setData({"lastIsOperaSymbo":true});
      }else{
        this.setData({"lastIsOperaSymbo":false});
      }
    }
  },
  history:function(){
    wx.navigateTo({
      url:'../history/history'
    })
  }
})

如需详细代码点这个传送门dunizb/wxapp-sCalc：：speech_balloon：微信小程序版简易计算器demo，适合入门练手 (github.com)