微信小程序开发实验： 获取用户头像与昵称

2024年夏季《移动软件开发》实验报告

         课程名称：中国海洋大学24夏 《移动软件开发》 实验1：第一个微信小程序             

一、实验目标

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

二、实验步骤

1.先创建一个项目

2.删除文件中的无关内容

(1)删除utils文件夹及其内部所有内容。
(2)删除 pages文件夹下的 logs目录及其内部所有内容。
(3)删除index. wxml和 index. wxss中的全部代码。
(4)删除 index. js中的全部代码,并且输入关键词“page”找到第二个选项按回车键让其自动补全函数。
(5)删除app. wxss中的全部代码。
(6)删除 app.js 中的全部代码,并且输入关键词“app”找到第一个选项按回车键让其自动补全函数。

3.对小程序的基本视图进行设计，代码与效果如下所示

导航栏

页面

4.头像与昵称的初始化显示

首先在项目中新建一个文件夹images用于存放图片，再将实现下载好的图片导入到文件夹中。修改WXML中的<image>和WXSS中的<image>和<text>

5.获取用户信息

修改WXML中的<button>和JS页面中的Page()内部添加代码，如下

6.运行结果

7.修改api

 在上面的运行结果中我们发现，无论怎样操作小程序所能获取到的用户资料全部为灰色头像和“微信用户”昵称。查阅资料后发现是因为微信小程序制作工具在22年更新后已经不再支持我们前面所使用的getUserInfo接口。

根据官方所给出的推荐方法https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html
对我们之前的代码做出些许调整如下

首先将 button 组件 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。

三、程序运行结果

改进前

改进后

四、问题总结与体会

 在本次实验中按照实验方案基本不会遇见什么阻碍，唯一的问题出现在结果上，因为教程没有及时更新的原因导致api在新版工具上已经失效，无法达成预期结果。在网上查询资料以及翻阅微信团队提供的建议手册后对其中的接口进行了调整，达成了最终实验目的。
 通过第一次实验，大致上了解了微信小程序的开发过程和框架结构，熟悉了工具的使用，还需通过后续实验不断磨练技术。