安装微信Web开发者工具

1，安装

前往微信小程序官网：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

微信准备了三个版本：

请根据自己的系统下载合适的版本。如果是xp系统，启动时可能会遇到找不到DLL文件的错误，可以尝试升级到xp sp3。但有学员反应升级之后问题依然存在，所以最好不使用xp系统。其它系统如mac osx，windows 7 等都可以。笔者使用的环境为mac osx 10.11。

2，创建无appid项目

即使没有收到第一批小程序的邀请，也可以学习开发小程序。在创建项目时，选择无AppID：

选中quick start项目选项。

3，熟悉开发工具的使用

调试工具分为 6 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage。

Wxml组件查看面板

Wxml panel 用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，同时可以通过修改对应 wxss 属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的 wxml 代码。

在切换到wxml面板后，才可以选中界面中的组件：

Sources源码面板

Sources panel 用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。