创建示例项目

安装好环境后，创建小程序的第一个项目。

启动微信开发者工具，启动后会有一个选择小程序项目还是公众号网页的项目。这里我们当然选择小程序项目。

点击+号选择创建项目

在出来的界面中，项目目录选择一个指定的目录，可以创建一个目录，这里我创建了一个WeApp01的目录。

appid可以填写自己申请的appid，也可以点击体验：小程序/小游戏，不过如果是体验版，就有有功能限制。

我暂时选择体验小程序，我们本次主要看小程序的结构。

点击确定，可以看到小程序开发工具的开发界面。

我们把代码区域展开：

这个是微信小程序开发工具生成的一个hello worl的基础项目。
通过这个项目我们可以对小程序的结构有所了解。

文件类型

js文件

js文件主要是逻辑描述，有app.js 和 页面下的 js。
app.js 是用来描述整理app相关的逻辑，小程序有整体生命周期。
看一下 app.js 这个文件，文件结构如下：

App({
  onLaunch: function (){},
  globalData: {
    userInfo: null
  }
})

其中 onLaunch 是 app 的一个生命周期。当然还有其他的生命周期函数，更多生命周期后续介绍。
globalData 内是 key value 结构的数据定义，这里定义的是app层面的全局数据。

pages目录下是各个页面的文件。比如logs目录下放置的是和日志页面（logs）相关的文件。 其中 logs.js里面主要是描述logs页面的业务逻辑。
再来看logs.js文件的结构：

//logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  onLoad: function () {
  }
})

类似的其中的onLoad函数是page的生命周期函数，同样的一个page 还有其他的生命周期，后面我们在介绍。
data 中是key value形式的数据，可以通过 tShopfas.setData 函数来修改这里定义的数据。

json文件

json文件有三种:

1. project.config.json
2. app.json
3. page目录下的json

project.config.json

这个文件用来定义整个项目的配置情况， 主要有项目的描述，项目的appid，项目名称，版本好等信息。

文件主要内容为：

{
    "description": "项目配置文件。",
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "newFeature": true
    },
    "compileType": "miniprogram",
    "libVersion": "1.9.98",
    "appid": "touristappid",
    "projectname": "WeApp01",
}

app.json文件

这个文件主要定义了全局的项目资源定义，有哪些page，有没有tab，已经window节点下定义的导航栏的全局样式，名称等信息。
主要内容如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

在各个 page目录下，也可以有json文件，这里可以对导航栏的标题、样式做定义。这里作为最近原则，这里定义的将会覆盖app.json中的定义。当然作用范围仅限这个page。

wxss 文件

这个文件类似前端的css 文件，是对于样式和布局的描述。有app.wxss 和page页面下的 wxss文件。 具体里面的内容和css 的内容和相似。
主要的选择器有 分类选择器，id选择器，标签选择器等。 关于这里的布局有一个知识点就是flex布局，关于样式有一个盒子模式是知识点。

文件内容举例如下：

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

wxml文件

这个文件定义了标签的嵌套情况，同时也会时候用{{}}标签来绑定动态app 或者page中定义的动态数据。文件中内容类似html。

这里展示index.wxml中的内容。

  
     获取头像昵称 
    
      
      {{userInfo.nickName}}
    
  
  
    {{motto}}
  

其中可以用类似 wx:if 这样属性来做一些逻辑控制，当然还有用来做循环的属性。
{{}}中可以有简单的逻辑判断，比如 {{!hasUserInfo && canIUse}} 也可以直接是动态数据。

可以绑定控件的事件，比如上面的image 绑定了触摸事件，采用bindtap 属性来定义。

项目结构就介绍到这里，对每种文件做了简单描述，大家可以对项目有一个整体了解。下一篇具体讲解每种文件的作用和用法，通过一些简单的例子对文件有更深的了解。