微信小程序开发04：获取微信头像和昵称

断断续续的学习，有不对之处，望各位大神指点。

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

1.运用组件获取

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

open-data的type值.png

案例：

微信小程序中，可以直接使用 来获取微信的相关信息。在没有点击授权的情况下，直接获取，不要写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返回的一致

扫码体验