1.界面展示

通过点击获取头像和昵称按钮获取用户信息

2.页面创建

1.全局三个文件，分别是app.js app.json app.wxss(名称不可更改）

2.创建Pages目录文件（作用是用来放各个页面的）

3.创建页面{给页面起名字，并且创建4个文件}
（1）js：页面逻辑实现
（2）json: 负责标题栏和一些状态栏
（3）wxml: 管理页面有什么
（4）wxss: 页面排布

此时在app.json中写入如下内容，界面可正常显示

4.把内容单元封装在view内部，写法："内容”

用class的方法对view内容样式进行排布
……class可以对其他组件样式布局也有效，class规定的样式前需要加上’.’，如果像image/text这样的组件的话，不需要加’.’(全局有效）

5.这个小程序需要用到三个组件：图片、文字、按钮
（1）图片 image

(2) 文字 text

(3) 按钮 button

3.实现代码

在app.json中定义代码如下

在index.wxml中代码如下

在index.wxss中代码入如下

在index.js中代码如下

4.功能介绍

在index.wxml中使用双大括号{{}}mustache语法在其中定义变量

并在index.js的data中获取变量对应值

变量src对应的是图片地址，此处引用的是本地地址，也可以引用网页地址

open-type='getUserInfo 表示**获取微信用户信息功能，相当于一个开关

bindgetuserinfo=‘getMyInfo’ 表示绑定获得的数据将传递给自定义函数getMyInfo,可以自己取

因此在index.js中定义getMyInfo函数，e表示点击按钮后获得的事件对象，该函数功能即为更该data中图片为微信头像，更改data中的名称为微信昵称

index.wxml中对应的class样式在index.wxss中进行布局

布局解释见图片中注释

在app.json中Window中对应的navigationBarBackgroundColor，navigationBarTitleText，backgroundTextStyle"分别表示导航栏背景色，导航栏标题和导航栏标题颜色
navigationBarBackgroundColor（只能是16进制颜色值）

navigationBarTitleText

backgroundTextStyle