相关文档链接  
   小程序简易教程： https://mp.weixin.qq.com/debug/wxadoc/dev/  
   微信小程序设计指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html

一、代码基本结构分析

app.json

项目配置声明文件（指定项目的一些信息，比如导航栏样式颜色等等）

{
  // 当前程序是由哪些页面组成的（第一项默认为初始页面）
  // 所有使用到的组件或页面都必须在此体现
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
  "pages": [ ... ],
  // 应用程序窗口设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
  "window": { ... },
  // 应用导航栏设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
  "tabBar": { ... },
  // 网络超时设置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
  "networkTimeout": {},
  // 是否在控制台输出调试信息
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
  "debug": true
}

app.js

项目主入口文件（用于创建应用程序对象）

// App函数是一个全局函数，用于创建应用程序对象

App({
  // ========== 全局数据对象（整个应用程序共享） ==========
  globalData: { ... },
  // ========== 应用程序全局方法 ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },
  // ========== 生命周期方法 ==========
  // 应用程序启动时触发一次
  onLaunch () { ... },
  // 当应用程序进入前台显示状态时触发
  onShow () { ... },
  // 当应用程序进入后台状态时触发
  onHide () { ... }
})

app.wxss

[可选]项目全局的样式文件，所有样式全局生效，内容遵循CSS标准语法

二、pages目录

存放程序中存在的页面
每个页面组件也分为四个文件组成：

page­name.js
页面逻辑文件，用于处理页面生命周期控制和数据处理

page­name.json
设置当前页面工作时的一些配置
此处可以覆盖app.json中的window设置
也就是说只可以设置window中设置的熟悉

page­name.wxml
wxml指的是  Wei Xin Markup Language
用于定义页面中元素结构的
语法遵循XML语法，注意是XML语法，不是HTML语法，不是HTML语法，不是HTML语法

page­name.wxss
wxss指的是  Wei Xin Style Sheet
用于定义页面样式的
语法遵循CSS语法，扩展了CSS基本用法和长度单位（主要就是rpx响应式像素）

三、utils目录

存放一些功能型脚本

四、小程序中的配置文件

小程序中的配置文件分为两种：

1. 全局配置文件，根目录下的  app.json
2. 页面配置文件，每个页面目录下的  [pagename].json

五、tabBar底部选项卡配置

{
  "tabBar": {
    "color": "#ccc",
    "selectedColor": "#35495e",
    "borderStyle": "white",
    "backgroundColor": "#f9f9f9",
    "list": [
      {
        "text": "榜单",
        "pagePath": "pages/board/board",
        "iconPath": "images/board.png",
        "selectedIconPath": "images/board‐actived.png"
      },
      {
        "text": "搜索",
        "pagePath": "pages/search/search",
        "iconPath": "images/search.png",
        "selectedIconPath": "images/search‐actived.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/profile/profile",
        "iconPath": "images/profile.png",
        "selectedIconPath": "images/profile‐actived.png"
      }
    ]
  }
}

六、页面结构

每个页面都分为四个文件组成：

1. [page­name].wxml -- 用于编写页面结构，注意不是HTML
2. [page­name].wxss -- 用于编写页面样式
3. [page­name].js -- 页面业务脚本
4. [page­name].json -- 页面配置文件