背景
2 月份在 GitChat 上买了一个小程序开发专栏，加上碰到好几个网友咨询我会不会少儿学习类的小程序开发。所以最近决定研究一下小程序，目标是用小程序做一个少儿诗词学习类的小应用。
本文将记录微信的 HelloWorld 的目录结构，剖解首页的内容，以初步了解小程序开发的基本要素。
准备工作
- 微信开发者工具，开发工具，官网下载地址 ；
- JavaScript 语法基础，脚本语言；
- html 基础，对应页面文件 .wxml ；
- css 基础，样式文件，对应 .wcss ；
- json 基础，页面配置文件，对应 xxx.json ；
- 微信小程序开发者文档 。
小程序的每个页面都是由 2-5 这四个文件组成的。
入门案例
学习时，可以不用申请小程序，直接使用测试号。但是需要下载微信开发者工具，点击 官网下载地址 下载后，本地安装即可，默认的界面风格是 IDEA 的黑色，使用导航创建一个新的小程序即可。
第一步，启动小程序开发工具，需要用一个微信号扫描开发者工具，授权后方能进入小程序开发主界面，也可以随时切换成其他的微信号来开发：
第二步，菜单 “项目”-“新建项目”，进入项目创建导航页面，点击“测试号”后 AppID 会被自动填充：
第三步，点击创建，就会自动创建一个只有两个页面的 Hello World 小程序了：
这个页面只有一个“获取头像昵称”的按钮。
页面元素分析
每个页面都是由四个文件组成：
index 页面分析
wxml 页面可以直接使用双括号语法直接获取 Page 对象中 data 的数据，例如 index.wxml 中的数据访问代码 ，例如 {{userInfo.nickName}}，这点跟 VUE 是一样的。
这是页面和 js 之间的对应关系：
index.wxml 中有几个知识点：
第一， 表单组件 button 的 open-type 的属性，它指微信的开发能力，对应会调用微信公众号开发的接口获取相应的微信应用数据，取值范围是：
HelloWorld 的例子中使用的是 getUserInfo 获取用户信息。
第二，获取 Page 对象的 data 属性的语法是双花括号，语法就是 js 访问对象的语法：
{{ 属性 }}
第三，表单组件 button 的绑定事件 ，这里使用了 bindgetuserinfo 事件，它指向的是 Page 对象定义的 getUserInfo 方法。按钮还有很多其他事件，截取几个如下：
第四，onLoad 事件，是页面加载自动触发的，跟 html 页面加载事件一样。这个案例在页面加载事件中，调用了微信公众平台的获取用户信息的接口，然后对页面全局对象的userInfo 属性赋值；本质就是按钮触发获取用户授权信息。
编程启示录
初学时没仔细分析 index.wxml ，就直接看 index.js 了，后者就是 Vue 的语法，没有问题。由于没有细看 button 的内容，导致理解不了 getUserInfo 方法的调用过程。
拆解 index.wxml 后，发现了 button 的 open-type 和 bindgetuserinfo 这两个属性，突然就明白了 Page 对象里面那个 getUserInfo 方法和按钮的绑定过程了，领悟到了这个方法的名称其实并不重要，只要把 bindgetuserinfo 绑定的值和它一致就可以了。