一个小程序页面有四个部分 .. 一个 js 文件，里面是页面的主要逻辑，一个 json 文件，里面是页面的相关的配置，一个 wxml 文件，wx 表示微信，ml 表示 markup language，这种 wxml 文件里的东西就是页面的界面 .. 它跟我们平时用的 html 差不多 .. 还有一个 wxss 文件，里面放的是页面上用的样式 ..

在开发工具创建的这个演示小程序里面，打开 pages ，它里定义了两个页面 ... 看一下 index 这个页面 .. 这个页面就是你看到的小程序的首页 ..

一个页面会有一个 js 文件，这个文件里的东西就是页面上的主要的逻辑代码 .. 这个 index 页面就是这个 index.js .. 这里用了一个 Page 注册了一个页面 .. 注册的时候提供给它一个对象 .. 里面可以添加一些东西..

比如这个 data ，是页面上可以用的一些数据 .. 这些数据的显示是页面的 wxml 文件控制的 .. 这种文件有点像是一个模板 .. 你会发现它跟我们用的 html 差不多，都是一些标签，上面有一些特别的属性 .. 只不过有些标签是小程序特有的 .. 比如 view ，text ..

这里用的样式 ... 比如这个 userinfo 类的样式 ... 都是在页面的 wxss 文件里定义的 ... 它其实就是小程序页面的样式表 ..

这些两组大括号里面的东西表示的就是要显示的数据 .. 比如这个 motto .. 在注册页面的时候 .. 这里有个 data .. 它里面有个 motto .. 对应的值是 Hello World ..

可以改一下 ... 设置成 hello ~ 保存一下 ... 在模拟器上，你会看到页面上显示的文字会变成我们设置的 hello ~

这个首页上的 wxml 文件里面的 userInfo 的 avatarUrl，应该表示的是用户头像的地址 .. 下面的 userInfo.nickName .. 是用户的昵称 .. 这些数据用的是小程序的 getUserInfo 接口得到的 .. 回到页面的逻辑文件 ..

这里用了一个页面的生命周期方法，onLoad .. 小程序页面加载以后会调用这个方法 .. 它里面就是用了 app 的 getUserInfo ，去得到用户的相关信息，得到以后，用了 setData ，把信息放到了 userInfo 里面 .. 这样我们在 wxml 文件里，就可以使用 userInfo 来访问用户相关的信息了 ..

这个 app 的 getUserInfo 方法，是我们在小程序应用里定义的 .. 就是这个 app.js .. 你会看到，这里有个 getUserInfo 方法 ... 它里面实际上就是用了小程序的 getUserInfo 接口来得到用户的相关信息 ..

在页面上的这个 app ，是用 getApp 得到的 .. 这个方法会返回小程序应用 ..

在这个 view 标签上面，用了一个 bindTap ，在这个元素上绑定了一个 Tap 事件 .. 处理这个事件用的是 bindViewTap .. 这个方法是在页面的 js 文件里定义的 .. 就是这里的 bindViewTap ... 它里面用了小程序的 navigateTo 这个接口，打开了另一个页面，就是 logs ...

在模拟器上可以试一下 ... 点一下页面上的用户信息，会跳转到小程序的另一个页面 ... 就是 logs 页面 ... 这个页面就是小程序项目的 pages 下面的 logs 里面定义的 ...