小程序--获取微信头像昵称等信息

声明：此博客仅为学习笔记方便自己复习，是我看视频学习所做记录，再一次推荐大家去看b站up主蒙奇D一修的教学视频，我每次看他视频都会投币，又皮又可爱，关键讲的仔细易懂有干货！！这篇博客就是跟着他的视频，做的学习记录。

一.界面

ps:目的在于，通过点击进行授权 获得用户信息

二，页面创建

1.全局三个文件，分别是app.js app.json app.wxss(名称不可更改）
2.创建Pages目录文件（作用是用来放各个页面的）
3.创建页面{给页面起名字，并且创建4个文件}
（1）js：页面逻辑实现
（2）json: 负责标题栏和一些状态栏
（3）wxml: 管理页面有什么
（4）wxss: 页面排布

三，实现代码

1.index.wxml

<view class="container">
  <image src="{{src}}"></image>
  <text>{{name}}</text>
  <button  open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击</button>
  <!--open-type="getUserInfo" 表示激活获取微信用户信息功能 -->
  <!-- bindgetuserinfo="getMyInfo" 表示获得的数据将传递给自定义函数getMyInfo，可以自己取--> 
</view>

2.index.wxss中设置页面样式

.container{
  height:100vh;/*高100 视窗，这里写100%是无效的*/
  display: flex;/*flex布局方法*/
  flex-direction: column;/*垂直布局*/
  align-items: center;/*水平方向居中*/
  justify-content: space-around;/*垂直方向分散布局*/
}
image{
  width: 300rpx;
  border-radius: 50%;/*4个角变为圆角形状*/
}
text{
font-size: 50rpx;
color: red;
}

3.index.js

data: {
    name:'你好呀',
    src:"/images/weixin1.jpg"
  },
  getMyInfo:function(e){
      console.log(e.detail.userInfo)
      let info = e.detail.userInfo;
      this.setData({
        name : info.nickName,
        src:info.avatarUrl
      })
  },