教程简介
- 1、阅读范围
本篇教程适合新手阅读，老手直接略过
-
2、教程难度
初级
1、小程序的开发环境
1、下载开发工具
- 1、开发工具有三个分别针对windows 64 、 windows 32 、 mac 三个平台来去下载工具，这没有什么好说的，然后一路安装即可。
mini_app_dev.png
对应的下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
- 2、新建一个Demo
这里假设你已经安装了小程序的开发环境，我们直接创建项目。
1、打开开发工具，开发工具长以下样子
mini_app_devhome.png
注意，如果是首次打开的时候会让你扫描一下二维来确定登录开发者工具。并且只有添加项目这个选项。
2、点击添加项目按钮
add_project.png
3、点击添加项目按钮,此时项目就会创建成功了
app_home.png
到此为止我们的开发环境基本上就讲完了，这没有什么好说的，没有复杂的配置流程
2、小程序开发工具和项目结构
1、小程序的开发环境简介
tools_show.png
从图可知，这基本上也没有什么说的，我们点点基本上就知道各个功能是干什么的，这里特别要说一点就是，开发工具现在支持ctrl+s保存自动刷新功能(以前是要重新编译一下才可以),再一个就是在调试环境下就是把chrome的调试功能集成了进来，我们可以快速的定位错误和查找问题。
2、小程序的项目结构
小程序的项目结构分为主体部分和页面部分，主体部分小程序必不可少的部分。
- 1、一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下:
app_main_part.png
由图可以看出，小程序的主体部分由三部分组成，并且必须放在项目的根目录，其中样式表不是必须的。名字必须叫app.js,app.json,app.wxss，不能胡乱更改。
- 2、小程序的界面由四分部分组成
page_part.png
由图可知，小程序的页面由四部分组成，其中样式表和json文件不是必须的。
- 3、对应项目中的结构
project_part.png
3、推荐阅读
具体细节可以看官方的教程:https://mp.weixin.qq.com/debug/wxadoc/dev/和https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html
