【微信小程序】获取用户头像和ID

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

一、实验目标

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

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

二、实验步骤

1. 自动生成小程序

准备工作：在微信公众平台上小程序处注册并下载微信开发者工具。

微信开发者工具版本：1.06.2208010

项目创建

打开微信开发者工具。在左侧栏中选择小程序后选择新建项目。

项目名称与目录为默认；

AppID点击右侧三角后即可选择；

后端服务选择不适用云服务；

模板选择官方的JavaScript。

右下角点击确定。

小程序自动生成。

左侧为手机预览效果图。中间为项目文件。右侧为控制台。
真机预览

上方工具栏中点击预览后自动生成二维码，扫描后可在手机中预览。

2. 手动创建小程序

新建项目流程如上。

删除和修改文件
- [删除] utils文件夹及其内部所有内容；
- [删除] app.json 文件内 pages 属性中的 "pages/logs/logs"，并[删除] pages 文件夹下的 logs 目录机器内部所有内容；
- [删除] index.wxml 及 index.wxss 文件中全部的代码；
- [删除] index.js 中的全部代码，并输入关键词 page 找到第五个选项，点回车补全函数。
- [删除] app.wxss 文件中全部的代码；
- [删除] app.js 中的全部代码，并输入关键词 app 找到第三个选项，点回车补全函数。

视图设计

导航栏

在 app.json 中对 windows 属性进行更改来改变导航栏效果。

导航栏默认白底黑字。
页面

使用组件：头像 <image>、昵称<text>、按钮<button>

修改 index.wxml 代码为：

此处 src 与 name 为动态数据，放于双层大括号中。方便之后的逻辑实现。

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

修改 index.wxss 代码为：

.container{
  height: 100vh;  /*高100视窗*/
  display: flex;  /*布局*/
  flex-direction: column;  /*垂直排列*/
  align-items: center;  /*水平居中*/
  justify-content: space-around;  /*垂直方向分散分布*/
}

新建 images 文件夹。右键此文件夹选择在 [资源管理器中显示]。

将一张图片命名为 logo 存入此文件夹。

在 image.wxss 中添加 <image>与<text>组件相关代码。

image{
  width: 300rpx;  /*宽，手机屏幕默认为750rpx*/
  /*border-radius: 50%;  图片圆角半径*/
}

text{
  font-size: 50rpx;  /*字体大小*/
}

逻辑实现

在 index.js 文件里的 data 中追加 src 和 name 两个动态数据的值。

在 Page 函数中追加 getMyInfo 函数使获取到的信息更新到动态数据上。

Page({
  //页面的初始数据
  data: {
    src: '/images/logo.jpg',
    name: 'Hello World'
  },

  //自定义函数——获取微信用户信息
  onLoad(){
    if(wx.getUserProfile){
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
    
  getMyInfo: function(e){
  // 推荐使用wx.getUserProfile获取用户信息
    wx.getUserProfile({
      desc: '展示用户信息', 
      success: (res) => {
        console.log(res)
        this.setData({
          src: res.userInfo.avatarUrl,
          name: res.userInfo.nickName
        })
      }
    })
  }
})

修改 app.js 代码为：

App({
  onLaunch() {
    //展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    //登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  }
})

遇到的问题与解决方法

自2021年4月起，getUserInfo 不再弹出弹窗，并直接返回匿名的用户个人信息。现在主要使用wx.getUserProfile 获取用户信息。

收获与体会

熟悉微信开发者工具的使用；
熟悉组件 <image>、<text>、<button> 的使用；
小程序开发相对方便，在使用官方平台的情况下可使用一些现成的Api。