小程序获取用户账户信息的新方法

参考API（里面有小程序和小游戏用户信息的获取方式）：https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01

1..小程序为升级前：可使用wx.getUserInfo直接获取用户信息，目前逐渐不能使用该方法了

2.升级后，可使用以下方法获取用户的账户信息：

（1）使用button，设置其属性：open-type="getUserInfo"    <button open-type="getUserInfo">获取用户信息</button>

  例子：----wxml

            <button open-type="getUserInfo" lang="zh-CN" bindgetuserinfo="onGotUserInfo"></button>

          -----js

page({

onGotUserInfo: function (e) {

console.log(e.detail.errMsg)  //console.log将获取到的信息输出

console.log(e.detail.userInfo)

console.log(e.detail.rawData)

}

})

点击界面上的按钮，则输出栏会输出   getUserInfo:ok
index.js? [sm]:32 {nickName: "钟琴mami", avatarUrl: "http://wx.qlogo.cn/mmopen/vi_32/Zaekicg0SgcTPT0Pw8…Ve5opNAWEaN8mlbgd3x5PP1RZqIWbX1GvPPv0kVcEwXUw/132", gender: 2, province: "", city: ""}
index.js? [sm]:33 {"nickName":"钟琴mami","avatarUrl":"http://wx.qlogo.cn/mmopen/vi_32/Zaekicg0SgcTPT0Pw89kvrLZz1wXpzkg6JtA4yY7F3Ve5opNAWEaN8mlbgd3x5PP1RZqIWbX1GvPPv0kVcEwXUw/132","gender":2,"province":"","city":""}

由此可获得用户头像的src为 "http://wx.qlogo.cn/mmopen/vi_32/Zaekicg0SgcTPT0Pw8…Ve5opNAWEaN8mlbgd3x5PP1RZqIWbX1GvPPv0kVcEwXUw/132"

添加image：则会看到获取的用户头像

<image src="http://wx.qlogo.cn/mmopen/vi_32/Zaekicg0SgcTPT0Pw8…Ve5opNAWEaN8mlbgd3x5PP1RZqIWbX1GvPPv0kVcEwXUw/132"></iamge>

或者在网页中输入获取到的：http://wx.qlogo.cn/mmopen/vi_32/Zaekicg0SgcTPT0Pw89kvrLZz1wXpzkg6JtA4yY7F3Ve5opNAWEaN8mlbgd3x5PP1RZqIWbX1GvPPv0kVcEwXUw/132

效果如下：

（2）使用open-data，设置其type="userAvatarUrl",在wxml中添加

<open-data type="userAvatarUrl"><open-data>

显示效果如下：

若想设置获取到的用户图像的大小等属性，可将其包含于view中，在wxml中添加：

<view class="logo"><open-data type="userAvatarUrl"></open-data></view>

---在wxss中 ，添加：

.logo {

position: absolute;

z-index: 2;

left: 50%;

bottom: 200rpx;

width: 160rpx;

height: 160rpx;

margin-left: -80rpx;

animation: sway 10s ease-in-out infinite;

opacity: .95;

border-radius: 50%;

}

中用户图像显示效果如下：

其实我挺想将图片弄成圆形的，但是view中没有border-radius的属性，继续探寻吧，说不定哪天发现了新方法