创建示例项目
安装好环境后，创建小程序的第一个项目。
启动微信开发者工具，启动后会有一个选择小程序项目还是公众号网页的项目。这里我们当然选择小程序项目。
点击+号选择创建项目
在出来的界面中，项目目录选择一个指定的目录，可以创建一个目录，这里我创建了一个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形式的数据，可以通过 this.setData 函数来修改这里定义的数据。
json文件
json文件有三种:
- project.config.json
- app.json
- 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中的内容。
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
其中可以用类似 wx:if 这样属性来做一些逻辑控制，当然还有用来做循环的属性。
{{}}中可以有简单的逻辑判断，比如 {{!hasUserInfo && canIUse}} 也可以直接是动态数据。
可以绑定控件的事件，比如上面的image 绑定了触摸事件，采用bindtap 属性来定义。
项目结构就介绍到这里，对每种文件做了简单描述，大家可以对项目有一个整体了解。下一篇具体讲解每种文件的作用和用法，通过一些简单的例子对文件有更深的了解。
