微信小程序--结构框架的认识

主要布局文件

• XX.wxml 布局文件
• XX.wxss 样式文件 通过wxml文件中控件的class值来进行关联
• XX.js 功能实现文件，主要界面操作逻辑，数据展示都在这里面实现
• XX.json app.json是对整个项目的窗口，界面，连接时间的设置，单个界面的json文件是对单个界面的设置

其中app.js，app.json，app.wxss 文件是项目的全局文件

• 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.getUserInfo({
        withCredentials: false,
        success: function(res) {
          that.globalData.userInfo = res.userInfo
          typeof cb == "function" && cb(that.globalData.userInfo)
        }
      })
    }
  },

  globalData: {
    userInfo: null
  }
})

• app.json中，主要定义窗口整体样式，以及存放相应的界面，代码示例如下：

  //相应的界面需再次进行添加
  "pages":[  
    "pages/index/main",    //默认第一行为启动界面
    "pages/logs/logs",     
    "pages/index/index"  
  ],
  //界面的展示样式
  "window":{
    "backgroundTextStyle":"light",       //背景文字风格
    "navigationBarBackgroundColor": "#000",   //导航栏的背景颜色
    "navigationBarTitleText": "Talisa",       //导航栏标题值
    "navigationBarTextStyle":"white"     //导航栏的字体颜色
  }

• 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;
}