人工智能研究中心快递柜——代码分析一

2021SC@SDUSC

目录

json配置

app.json分析

WXML模板

WXSS样式

app.wxss分析

JS交互逻辑

app.js分析

总结

---

本次代码分析从基本部分开始，了解不同类型文件的作用，已经小程序的大体框架。

对于微信小程序而言，框架系统主要分为两部分：逻辑层和视图层。对于视图层的构建是使用wxml和wxss来实现，并且基于JavaScript的逻辑层构架，实现视图层与逻辑层的数据传输。

小程序的代码构成分为四部分：

json配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

app.json分析

app.json中是小程序的全局配置，包括小程序所有的页面路径、界面表现、网络超时时间、底部tab等。

pages字段用于描述小程序的所有页面布局

 "pages":[
    "pages/index/index",
    "pages/map/index",
    "pages/cabinet/index",
    "pages/cabinetList/index",
    "pages/operation/index",
    "pages/manage/index",
    "pages/operationSelect/index",
    "pages/secretaryLead/index",
    "pages/teacherManager/index",
    "pages/orderList/index",
    "pages/orderInfo/index",
    "pages/attached/questionList/index",
    "pages/attached/useProtocol/index",
    "pages/my/index",
    "pages/openCode/index",
    "pages/manage/add/single/index"
  ]

windows字段用于定义页面背景颜色等

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "山大格子柜",
    "navigationBarTextStyle":"black"
  }

permission字段用于获取用户位置

"permission": {
    "scope.userLocation": {
      "desc": "test"
    }
  }

tabbar字段进行了自定义从而使顶部栏和底部栏的使用更为灵活

"tabBar": {
    "color": "#383838",
    "selectedColor": "#FF7E00",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/operationSelect/index",
        "text": "首页",
        "iconPath": "/img/index/home_noselect.png",
        "selectedIconPath": "/img/index/home_select.png"
      },
      {
        "pagePath": "pages/orderList/index",
        "text": "订单",
        "iconPath": "/img/index/order_noselect.png",
        "selectedIconPath": "/img/index/order_select.png"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的",
        "iconPath": "/img/index/mine_noselect.png",
        "selectedIconPath": "/img/index/mine_select.png"
      }
    ]
  }

WXML模板

与网页的编程相似，wxml相当于网页设计中的HTML，用于描述页面的结构

详细具体的页面内容将在具体代码分析中进行。

WXSS样式

wxss相当于CSS，用于描述页面的样子，决定了wxml的组件要如何显示，同时为了使用微信小程序，相比于CSS增加了尺寸单位和样式导入的特性。

app.wxss分析

本部分主要进行一些格式的定义，例如.container部分

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

 定义了区域的高度，使用弹性布局，垂直显示项目等，使得组件的分布更为合理。

JS交互逻辑

js用于和用户进行交互，响应用户的点击、获取用户的位置等，对于app.js来说，该文件就是项目的入口文件，用于创建应用程序对象。

app.js分析

onlaunch在应用程序启动时触发，其中定义了一些功能函数。

 onLaunch: function () {
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: res => {
              this.globalData.userInfo = res.userInfo
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  }

首先利用any wx.getStorageSync(string key)实现了本地存储功能，能够对本地的缓存进行保存；然后调用wx.login(Object object)将res.code发送到后台进行登录；最后利用wx.getSetting(Object object)获取用户信息，如果已经实现授权可以直接调用getUserInfo获取头像昵称，由于getUserInfo是网络请求可能会出现在Page.onLoad之后所以用callback防止这种情况。

总结

本次分析主要了解了微信小程序的基本框架，同时对小程序的主体布局以及小程序的入口文件进行了分析，接下来将细致到具体的功能分析。