文件结构

微信小程序的文件类型分别为 wxml、wxss、js、json

wxml 中所使用的标签必须是在小程序组件范围内，例如：我们在html中的 div 标签，都不可以使用。
wxss 中所使用的是CSS的语法，但功能也有所删减
js 中必须安装小程序框架的规范来书写
json 中配置页面的相关配置

文件结构如下：

|-minicode               根目录
|  ├ app.js              全局脚本
|  ├ app.json            全局配置
|  ├ app.wxss            全局样式
|  ├ pages               页面目录
|  |  ├ index            首页目录
|  |  |  ├ index.wxml    首页结构
|  |  |  ├ index.js      首页脚本
|  |  |  ├ index.wxss    首页样式
|  |  |  ├ index.json    首页配置
|  |  ├ detail           详情目录
|  |  |  ├ detail.wxml   详情结构
|  |  |  ├ detail.js     详情脚本
|  |  |  ├ detail.wxss   详情样式
|  |  |  ├ detail.json   详情配置
|  |  ├ history          历史目录
|  |  |  ├ history.wxml  历史结构
|  |  |  ├ history.js    历史脚本
|  |  |  ├ history.wxss  历史样式
|  |  |  ├ history.json  历史配置

安装以上文件目录创建文件。在根目录上存在 app.js、app.json、app.wxss 文件及 pages 各页面文件夹，pages 文件夹里面存放着 index、detail、history 页面文件夹，其页面文件夹包含其命名相同的 js、wxss、json 文件。
初始化全局配置文件 app.json，配置详情请参考文档

在 pages 属性中设置页面路径（必须），window 属性中配置配置项。

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/history/history"
  ],
  "window": {
    "navigationBarTitleText": "小猪快递"
  }
}

初始化 app.js

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。(必须)

App({
  onLaunch: function(options) {
    // 生命周期函数--监听小程序初始化
  },
  onShow: function(options) {
      // 生命周期函数--监听小程序显示
  },
  onHide: function() {
      // 生命周期函数--监听小程序隐藏
  },
  onError: function(msg) {
      // 错误监听函数
  },
  globalData: 'I am global data'
})

初始化各页面的 json 文件，index.json、detail.json、history.json ，设置导航内容

/pages/index/index.json

{
  "navigationBarTitleText": "小猪快递"
}

/pages/detail/detail.json

{
  "navigationBarTitleText": "小猪快递 - 详情"
}

/pages/history/history.json

{
  "navigationBarTitleText": "小猪快递 - 历史"
}

初始化各页面的 js 文件，index.js、detail.js、history.js 注册页面。

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
  },
  onReady: function() {
    // 生命周期函数--监听页面初次渲染完成
  },
  onShow: function() {
    // 生命周期函数--监听页面显示
  },
  onHide: function() {
    // 生命周期函数--监听页面隐藏
  },
  onUnload: function() {
    // 生命周期函数--监听页面卸载
  }
})

app.wxss 为设置全局样式，各个页面的 XXX.wxss 为设置各个页面的样式，下回分解。
各个页面的 XXX.wxml 为设置各个页面的结构，下回分解。

# 文件结构

文件结构