微信小程序之工程结构

根据官方提供的demo我们可以看到工程的目录结构，很清晰,在根目录下我们可以看到文件夹page、util、image以及app.json、app.js、app.wxss,下边我们来介绍下他们：

1.page根据意思我们就知道这是页面相当于ViewController、Activity，我们通常把index作为首页，一般我们会看到index.wxml是页面可以说是html，index.js是带页面的处理逻辑代码(也就是脚本代码)，index.wxss就是对index.wxml里的空间进行布局处理的css。

2.util跟其他一样就是工具文件夹，里边是我们所需要的工具js。

function formatTime(time) {
  if (typeof time !== 'number' || time < 0) {
    return time
  }

  var hour = parseInt(time / 3600)
  time = time % 3600
  var minute = parseInt(time / 60)
  time = time % 60
  var second = time

  return ([hour, minute, second]).map(function (n) {
    n = n.toString()
    return n[1] ? n : '0' + n
  }).join(':')
}

module.exports = {
  formatTime: formatTime
}

3.app.json是工程的一些配置，页面的路径、图片的路径、window、tabbar等的配置

{
  "pages": [
    "page/component/index",
   
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "演示",
    "navigationBarBackgroundColor": "#fbf9fe",
    "backgroundColor": "#fbf9fe"
  },
  "tabBar": {
    "color": "#dddddd",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "page/component/index",
      "iconPath": "image/icon_component.png",
      "selectedIconPath": "image/icon_component_HL.png",
      "text": "组件"
    }, {
      "pagePath": "page/API/index/index",
      "iconPath": "image/icon_API.png",
      "selectedIconPath": "image/icon_API_HL.png",
      "text": "接口"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

4.app.js 是全局的通用的小方法

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

5.app.wxss是全局公共的css布局

page {
  background-color: #fbf9fe;
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: space-between;
}
.page-header {
  display: flex;
  font-size: 32rpx;
  color: #aaa;
  margin-top: 50rpx;
  flex-direction: column;
  align-items: center;
}
.gray{
    color: #C9C9C9;
}

整个工程目录：

目录.png

到这里大家对微信小程序工程结构已经有了了解。对于微信小程序自己提供的开发工具不是很好，大家可以使用webStorm配置下微信小程序的环境(配置环境点这里)进行开发，用微信自己的开发工具进行查看视图展示。感谢大家！