【微信小程序】第一章 作业

目录

下载项目

导入项目

项目详细代码、分析小程序和运行结果

---

题目

在浏览器中输人网址 “ https://github.com/dunizb/wxapp-sCalc "，进人页面后下载小程序简易计算器源码demo，将其解压后使用微信小程序开发工具打开该项目，分析小程序的页面结构及相关代码，对该小程序进行调试并运行。

下载项目

跳转网址下载图片中的文件：

导入项目

 选择解压后的文件路径并打开，导入项目。

确定，即可导入成功。 

项目详细代码、分析小程序和运行结果

app.js

//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
  }
})

这是小程序的入口文件，它包含了小程序的全局配置和生命周期函数。其中 onLaunch 生命周期函数在小程序启动时触发，用于从本地缓存获取数据并进行一些初始化操作。getUserInfo 函数用于获取用户信息，包括登录和获取用户信息的操作。globalData 用于存储用户信息。 

app.json

{
  "pages":[
    "pages/index/index",
    "pages/calc/calc",
    "pages/history/history",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#da7c0c",
    "navigationBarTitleText": "简易计算器",
    "navigationBarTextStyle":"white"
  }
}

这是小程序的全局配置文件。其中 "pages" 字段定义了小程序的页面路径，包括首页、计算页面、历史记录页面和日志页面。 "window" 字段定义了小程序窗口的一些样式和表现，包括背景样式、导航栏颜色、标题文本以及导航栏文字颜色等。 

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

这是小程序的样式文件，定义了一个名为 .container 的样式类。它设置了高度为100%，采用垂直方向的列布局，内容居中显示，并在内容上下各留有 200rpx 的内边距。 

project.config.json

{
  "appid": "wx0f13f9920af88b98",
  "compileType": "miniprogram",
  "libVersion": "3.3.4",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "coverView": true,
    "es6": true,
    "postcss": true,
    "minified": true,
    "enhance": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmRelationList": [],
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    }
  },
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

project.private.config.json

{
  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
  "projectname": "wxapp-sCalc-master",
  "setting": {
    "compileHotReLoad": true
  }
}

运行结果：