上一篇文章说了注册和下载等一些准备工作，现在大致介绍一下开发工具与代码结构

开发工具

（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调试器