微信小程序获取用户信息

一、实验目标

1、学习使用快速启动模板创建小程序的方法；

2、学习不使用模板手动创建小程序的方法。

二、实验步骤

（列出实验的关键步骤、代码解析、截图。）

1.注册AppID。

2.项目创建

3.删除app.wxss、index.wxml、index.wxss、index.js中代码，删除log文件夹

4.app.json的代码

navigationBarBackgroundColor的设置使得导航栏的颜色为紫色；

navigationBarTitleText为导航栏上所显示的文字；

navigationBarTextStyle设置导航栏上字体的颜色。

5.index.wxml的代码

使用view、image、text、button四个组件，并通过{{}}进行数据动态绑定

<view class="container">
    <image src="{{src}}" mode="widthFix"></image>
    <text>{{name}}</text>
    <button bindtap="getUserProfile">点击获取头像和昵称</button>
</view>

6.在wxss中对view、image、text进行渲染

.container{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
image{
    width: 300rpx;
    border-radius: 50%;
}
text{
    font-size: 50rpx;
}

7.在index.js中编写逻辑结构

Page({

  /**
   * 页面的初始数据
   */
  data: {
    src:'/image/title.png',
    name:'hello world'
  },

  getUserProfile(e){
      wx.getUserProfile({
        desc: 'desc',
        success:(res)=>{
            console.log(res)
            this.setData({
                src:res.userInfo.avatarUrl,
                name:res.userInfo.nickName
            })
        },
      })
  }
})

四、问题总结与体会

最大的问题就是点击按钮之后无法正常获取用户信息，智能显示灰白头像以及默认用户名。在查阅资料后发现，getUserInfo函数在2021年4月之前可以正常使用，在之后经过更新只能显示加密后样例，解决办法是使用getUserProfile函数，当然也要修改函数。