断断续续的学习，有不对之处，望各位大神指点。
前面的基本属于基础，属于面子工程，就是给你的小程序披上一层美丽的外衣，是静态的。后续会慢慢的了解微信晓城的API，努力去使用。（据说vue和小程序的有点类似，学过vue的对小程序容易上手）

1.运用组件获取

微信小程序组件开放能力：open-data

open-data的type值.png
案例：
<open-data type="groupName" open-gid="xxxxxx"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
微信小程序中，可以直接使用<open-data type=" "></open-data> 来获取微信的相关信息。在没有点击授权的情况下，直接获取，不要写js。
效果图.png
wxml.png

2.点击按钮获取相关信息（版本更新后的授权）

根据微信小程序范例 button组件介绍

button组件.png
button组件.png
button组件的open-data.png
授权.png
效果图.png
wxml.png
根据button组件中open-data属性，点击button，获取用户相关信息。通过判断（wx:if,wx:else）是否存在hasUserInfo和canIUse，来进行页面上表现形式。

js

1.判断button中的open-data是否被支持

image.png
2.设置一些默认值
image.png
用hasUserInfo来作为if的判断
3.点击按钮事件bindgetuserinfo="getUserInfo"
image.png
bindgetuserinfo：用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致