OUC2024年夏季《移动软件开发》_获取用户微信头像和昵称的小程序

一、实验目标

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

二、实验步骤

1.创建项目。

2.删除模板自带的所有文件，并创建三个全局文件，分别是app.js，app.json，app.wxss。

3.创建pages目录文件，在其中新建index目录文件，再在里面创建页面，会自动生成四个文件，分别是js、json、wxml、wxss。

4.在index.wxml中，把内容封装在view内部，有三部分，分别是图片、文字和按钮。

<view class='container'>
  <image src='/images/weichat.jpg'></image>
  <text>Hello world</text>
  <button>点击获取头像和昵称</button>
</view>

image是图片，text是文字，button是按钮。
class='container'，用于后续对整个页面的样式设计。
为了输出图片，需要在项目文件夹中新建一个image目录文件，里面用于存储小程序中需要用到的图片。

5.在index.wxss中，进行样式设计。

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

6.改写index.wxml中的三部分。图片和文字是由访问微信权限得来的头像和昵称，按钮要实现访问的逻辑功能。

<view class='container'>
  <image src='{{src}}'></image>
  <text>{{name}}</text>
  <button open-type='getUserInfo' bindgetuserinfo='getMyInfo'>点击获取头像和昵称</button>
</view>

原先的图片和文字都由变量来替代，open-type='getUserInfo'表示激活获取微信用户信息功能，bindgetuserinfo='getMyInfo'表示获得的数据将传递给自定义函数getMyInfo，这个函数会在后续编写。
7.在index.js中，改写data模块，编写getMyInfo函数。

data: {
    name:'Hello world',
    src:'/images/weichat.jpg'
  },
  getMyInfo:function(e){
    console.log(e.detail.userInfo)
    let info=e.detail.userInfo;
    this.setData({
      name:info.nickName,
      src:info.avatarUrl
    })
  },

data中给name和src设置初始值，getMyInfo函数中将获取到的nickName赋值给name,avatarUrl赋值给src。

三、程序运行结果

此时已经基本完成该小程序。测试一下。

发现无法获取到用户的头像和昵称。这是因为自2022年10月25日24时起，小程序wx.getUserProfile接口被收回，通过wx.getUserProfile接口获取用户头像将统一返回默认灰色头像，昵称将统一返回“微信用户”。所以我们需要将基础库调至2.27.1以前，这样就可以正常显示。

四、问题总结与体会

在完成该实验的过程中，我遇到了一个问题，那就是在微信小程序中无法获取真实的用户头像和昵称。由于微信平台政策的更新，我了解到自2022年10月25日起，通过wx.getUserProfile接口获取用户信息的方式发生了变化，导致我无法直接获取用户的真实头像和昵称。之后通过同学的帮助，我知道了只需要降低基础库的版本就可以解决该问题。
这次实验，通过手动创建小程序，我深入理解了小程序的文件结构和运行机制，包括页面的创建、数据绑定和事件处理。在编写index.wxss时，我学会了基础的页面布局；在index.js中编写逻辑时，我加深了对JavaScript对象、函数和事件处理的理解，提升了我的编程能力。
总的来说，这次实验让我基本掌握了微信小程序的开发流程，并对移动应用开发有了更深入的认识。我期待将这些新技能应用到更复杂的项目中，并在未来的开发工作中不断进步和创新。