微信小程序之开发初体验（三）——开发工具使用和目录结构
微信小程序之入门篇（一）
微信小程序之注册篇（二）
微信小程序之开发初体验（三）——开发工具使用和目录结构
微信小程序之生命周期（四）
微信小程序之数据绑定（五）
微信小程序之触控事件（六）
微信小程序之基础组件篇——视图容器（七）
微信小程序之基础组件篇——基础内容（八）
微信小程序之基础组件篇——表单组件（九）
微信小程序之基础组件篇——导航组件（十）
微信小程序之基础组件篇——媒体组件（十一）
微信小程序之API篇——豆瓣图书搜索（十二）
微信小程序之拓展篇——weui-wxss（十三）
万事俱备，现在终于可以愉快的进行小程序的开发了~~有木有鸡冻，内心是不是万马奔腾，跃跃欲试了。
首先本篇文章介绍两点：
1.小程序开发工具的使用
2.微信小程序目录结构
微信小程序开发工具使用介绍
下载安装小程序
开发工具：
微信web开发者工具
官方demo下载
安装完成后，打开微信web开发者工具。
1.扫码二维码登录 微信web开发者工具
扫码登录
2.扫码二维码以后，进入添加项目或者导入已有项目界面
添加项目
3.新建项目,导入官方提供的demo——quickstart
由于只有企业、组织、政府等非个人机构才有AppID,所以个人开发者选择无AppID，有AppID的大神可以对应填写。注册企业公众号和获取AppID的方法具体参见微信小程序之注册篇（二）
新建项目
4.完成新建项目后，即可进入开发界面
开发界面
挺多人说像chrome的调试界面，很久没有做过前端的事情了，忘了。看官自评吧。。。
5.开发工具功能区域一览
开发工具分为8个功能区域，分别是
1.代码编辑区——代码编写需要切换到这个模式下进行。
2.代码调试区——代码完成后，对结果、错误信息、网络信息等进行调试。
3.项目管理区——进行项目基本信息的管理，完成代码的上传等操作。
4.工具栏——有编译、后台、缓存、关闭等工具模块。
5.手机设备切换区——可以模拟各种类型的手机机型，查看小程序在不同机型下的展示结果。
6.网络环境切换区——分别可以模拟WIFI、2G、3G、4G等网络环境下访问小程序的效果。
7.效果展示区——模拟显示小程序在相应的手机设备、相应网络环境下的展示效果。
8.调试工具栏——可以查看小程序的输出结果信息、错误信息、网络等调试信息。
开发工具功能区域
6.开发工具代码编辑
代码编辑
小程序项目结构
-
文件结构
文件结构
小程序的文件结构由三个文件和文件夹组成，放在根目录（即最外层目录）下的三个文件，分别是：
app.js小程序逻辑,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
app.json小程序公共设置
app.wxss小程序公共样式表
而在根目录的文件夹内，则是由文件名相同但是后缀不同的四个文件组成，他们的后缀分为：
.js页面逻辑
.wxml页面结构，类似于HTML设计网页结构。
.wxss页面样式表，如同CSS设计网页的样式。
.json页面配置
注：
1.文件夹内四个文件必须同名。
例如首页index.js、index.wxml、index.wxss、index.json。
2.一个框架页面至少包含js、wxml、wxss三个文件类型。
- app.json配置
app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。每个属性的内部设置参数，可参考 小程序配置。
app.json配置
代码如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 10000
},
"debug":true
}
效果图
到此，微信小程序的开发初体验就结束了，非常的简单。接下来需要去了解小程序的生命周期、开发组件、开发交互等方面的知识了。
