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

分析：

app.js

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

1. onLaunch: function () { ... }：

   • 当小程序启动时（即打开时），会触发onLaunch生命周期函数。
   • 在这个函数里，首先通过wx.getStorageSync('logs')从本地缓存中获取名为logs的数据，如果获取不到，则默认返回一个空数组。
   • 然后在数组头部添加当前时间戳（Date.now()）以记录本次启动的时间。
   • 最后，使用wx.setStorageSync('logs', logs)将更新后的logs数据保存回本地缓存。

2. getUserInfo:function(cb){...}：

   • 这是一个获取用户信息的方法，接收一个回调函数cb作为参数，当获取到用户信息时调用该回调函数。
   • 首先检查globalData.userInfo是否存在，如果已存在（即用户已经授权并获取过个人信息），则直接调用回调函数并将用户信息传入。
   • 如果globalData.userInfo不存在，执行以下步骤：
     • 调用wx.login接口进行登录操作，获取登录凭证（code）。
     • 登录成功后，进一步调用wx.getUserInfo接口获取用户信息，包括昵称、头像等。
     • 获取到用户信息后，将其保存至globalData.userInfo中，并再次调用回调函数，传入用户信息。

3. globalData:{ userInfo:null }：

   • globalData是小程序应用级别的全局数据，所有页面都可以访问。
   • 在这里定义了一个全局变量userInfo，初始值为null，用于存储用户信息。

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

 app.json

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

1. "pages": [...]：

   • 这部分列出了小程序的所有页面路径。按照数组的顺序依次加载页面，这些页面构成了小程序的主要功能模块。
   • 具体解析如下：
     • "pages/index/index"：首页或主界面
     • "pages/calc/calc"：计算器页面
     • "pages/history/history"：历史记录页面
     • "pages/logs/logs"：日志记录页面

2. "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.jsApp({  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.jsPage({  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)

运行效果：