上一篇文章说了注册和下载等一些准备工作，现在大致介绍一下开发工具与代码结构
开发工具
（1）打开“微信开发者工具”-- 扫描登录
登录后显示创建“小程序项目”和“公众号网页项目”
（2）创建之前先在桌面创建一个项目文件夹,如demo（一定要是空的）
点击“小程序项目”（初次创建直接进入下图，如果不是初次创建会出现已创建的项目，点击右下角“+”创建新项目）
输入上一篇文章我们保存的AppID（或者选择测试号：小程序）
默认建立普通快速启动模板
确定即创建了一个小程序项目，系统会自动生成一些必要的代码和文件
下面是开发进入开发工具页面
模拟器
没啥好说了都是中文选项可以按照自己的习惯调节
代码结构目录
创建一个小程序系统会帮助我们创建一些必要的文件
- pages 存放页面的文件夹
- index 入口
- index.js 页面逻辑
- index.json 页面配置 可有可无
- index.wxml 页面结构
- index.wxss 页面样式表
- logs 日志
- utils 工具类文件
- util.js 将一些公共的代码抽离成为一个单独的 js (utils.js)文件，作为一个模块;
- app.js 小程序逻辑
- app.json 小程序公共设置
- app.wxss 小程序公共样式表
- project.config.json 项目配置文件
注：
（1）为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。
（2）小程序允许上传的文件格式
程序文件格式： js、json、wxml、wxss
图片格式：png、jpg、jpeg、gif、svg
数据格式：wxs、json
文件个数：cer
音频格式：mp3、aac、m4a、wav、m4a、silk
视频格式：mp4
代码编辑区
进行相应文件代码的编写
其中页面代码分四个文件
wxml
- 理解为HTML，页面的结构。但不是标签，而是组件。
- 常见组件: view(块级元素) test (行内元素) image input scollview (列表组件) canvas
- 支持模板导入。
wxss
- 理解为Css，支持flex布局，支持CSS3属性。 很少考虑兼容性.
- 支持@import导入样式文件
- rpx支持根据屏幕宽度进行自适应json
js
- 就是不能直接操作document对象的js
json
- 页面配置文件
- 配置页面标题内容和颜色。可设置选项很少。
调试器
调试工具
console ( 控制台) 显示错误信息和打印变量的信息等。
Sources (断点调试) 上面显示了当前项目的所有脚本文件，下边是一些log信息、断点调试等等。
NetWork(网络请求) 与网络相关的信息会在这里显示
Security 安全方法的东西
AppData 显示当前项目显示的具体数据、已加载的数据
Audits (体验评分)小程序运行过程中实时检查，分析出一些可能导致体验不好的地方
Sensor 开发者可以在这里选择模拟地理位置，模拟移动设备表现，用于调试重力感应 API
Storage 官方的解释是显示当前项目的使用wx.setStorage或者wx.setStorageSync后的数据存储情况。
Trace (性能分析) PC和Android连接同一网络，Android连接线至PC，开启USB调式,Android微信中打开性能监控面板，重启微信打开微信小程序 ,操作要收集数据的页面后，导出Trace数据
Wxml ( 可进行CSS调试) 类似浏览器上CSS调试器