当前位置：网站首页>小程序｜炎炎夏日、清爽一夏、头像大换装

小程序｜炎炎夏日、清爽一夏、头像大换装

2022-08-04 15:05:00 【51CTO】

写作背景：

炎炎的夏日一起来为头像增加点夏天的元素，让清爽的头像陪伴你一整个夏天。通过一个完整的小程序串通整个开发生命周期。

需求设计：

开发一款可以为头像增加夏日元素贴纸的小程序。支持直接使用用户当前头像信息，支持将制作的头像保存到用户相册。

首页模块设计：

首页模块分为未授权和已授权使用用户信息两种状态，当用户刚进入页面未操作的情况下提供授权的操作按钮，当用户完成授权后展示头像制作的视图。

未授权使用头像状态功能概述：

成品图：

小程序｜炎炎夏日、清爽一夏、头像大换装_微信小程序

已授权使用头像状态功能概述：

成品图：

小程序｜炎炎夏日、清爽一夏、头像大换装_ico_02

关于页面设计：

成品图：

小程序｜炎炎夏日、清爽一夏、头像大换装_小程序_03

注册微信小程序：

微信小程序注册流程包括账号信息填写、邮箱激活、信息登记三个步骤，按网站提示注册即可。

Tips:

微信小程序注册的邮箱要求使用未在微信公众平台、开放平台、个人微信等绑定的全新邮箱，可以再去 163注册一个使用。
信息登记主体的使用需要注意同一个身份证仅支持绑定5个小程序，同一手机号仅支持绑定5个小程序，主体类型选择个人即可。

快速开始小程序项目：

创建项目

使用微信开发者工具创建一个不使用任意模板的项目并按照下面的目录约定进行少许调整，见注释的特别约定：

小程序｜炎炎夏日、清爽一夏、头像大换装_json_04

       
       CoolAvatar
       
├─app.js  // 默认约定：app主函数
       
├─app.json  // 默认约定：窗口、页面、组件配置
       
├─app.wxss  // 默认约定：app全局样式定义文件
       
├─package.json  // 默认约定：使用npm安装依赖后自动生成更新
       
├─project.config.json // 默认约定：配置npm依赖文件、文件夹、appid等
       
├─project.private.config.json
       
├─sitemap.json
       
├─utils         // 默认约定：开发过程中用到的工具函数
       
|   └─util.js
       
├─templates // 特别约定：用来放置页面用到的模板
       
|     ├─authorization
       
|     |       ├─authorization.wxml
       
|     |       └─authorization.wxss
       
├─pages   // 默认约定：每个页面的位置
       
|   ├─index
       
|   |   ├─index.js
       
|   |   ├─index.json
       
|   |   ├─index.wxml
       
|   |   └─index.wxss
       
├─images  // 特别约定：项目基础图片素材
       
|   ├─icon-about-default.png
       
|   ├─icon-about-selected.png
       
|   ├─logo.png
       
|   ├─material  // 特别约定：贴纸素材
       
|   |    ├─1.png
       
|   |    └─2.png
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

选装vant-ui：

根据自己的喜好和习惯可以自行选择，一个顺手的UI库对于快速开发还是很有必要的，安装、配置及组件使用支持参照 vant-ui组件文档即可。

Tips：

需要更改app.json配置文件，避免默认组件造成的样式覆盖错乱问题；
需要更改project.config.json配置文件，以支持npm依赖的正确使用；

配置tabbar：

配置tabbar，满足首页和关于页面的切换。通过微信开发者工具【右键】=>【新建 Page】创建about页面后将下面的配置添加到 app.json 完成底部标签栏的配置：

属性	描述
tabbar.color	未选中字体颜色
tabbar.selectedColor	选中的字体颜色
tabbar.list	配置每个标签的内容
tabbar.list.text	标签文案
tabbar.list.pagePath	页面的实际路径
tabbar.list.iconPath	未选中的标签ICON
tabbar.list.selectedIconPath	选中的标签ICON

       
       {
       
  "tabBar": {
       
    "color": "#dbdbdb",
       
    "selectedColor": "#04cd95",
       
    "list": [
       
      {
       
        "selectedIconPath": "images/icon-home-selected.png",
       
        "iconPath": "images/icon-home-default.png",
       
        "pagePath": "pages/index/index",
       
        "text": "首页"
       
      },
       
      {
       
        "selectedIconPath": "images/icon-about-selected.png",
       
        "iconPath": "images/icon-about-default.png",
       
        "pagePath": "pages/about/about",
       
        "text": "关于"
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

配置完成后结果：

小程序｜炎炎夏日、清爽一夏、头像大换装_ico_05

配置合法域名：

因为我们存在读取用户头像并下载的操作，所以需要将微信头像的域名地址配置到downloadFile里面，开发过程中虽然可以在开发者工具设置不校验域名，但还是建议一开始就配置好：

小程序｜炎炎夏日、清爽一夏、头像大换装_json_06

页面开发：

我们主要来实现首页中夏日新头像的制作，关于页面仅展示静态文案就不过多讲述了，完整代码在文末提供。

模板使用：

微信小程序在开发过程中提供了模块的概念，使得我们可以将一个视图文件中的”一块“提取到单独的文件中，既能减少原视图文件中的代码量又能在可能存在复用的情况下进行复用，节省开发工作。

定义模板：

使用 template 元素包整个视图内容；
使用 name 命名模板的名称；
模板插值和事件定义同视图开发；

       
       <template name="authorization">
       
  <view class="get-user-info">
       
    <van-image width="120" height="120" fit="cover" round src="url" />
       
    <van-button color="#04cd95" plain wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile" block>Get 新头像 清爽一夏~</van-button>
       
  </view>
       
</template>
      
1.
2.
3.
4.
5.
6.

引用模板：

在目标视图文件顶部导入模板；
再次使用 template 元素并使用 is 属性来明确渲染的模板名称；
在模板中使用到的插值数据通过 data 属性传递；
在模板中还定义了待触发的事件，我们就直接在目标视图的 js 文件中定义吧；

       
       <import src="../../templates/authorization/authorization.wxml" />
       
<template is="authorization" data="{{canIUseGetUserProfile}}" />
      
1.
2.
3.

视图内容：

我们通过使用模板将各版块拆分到 templates 目录：

授权模板；
头像制作区模板；
操作栏区模板；
贴纸区模板；

       
       <!-- 导入模板 -->
       
<import src="../../templates/switch-rect/switch-rect.wxml" />
       
<import src="../../templates/operating-area/operating-area.wxml" />
       
<import src="../../templates/material-area/material-area.wxml" />
       
<import src="../../templates/authorization/authorization.wxml" />
       
<!-- 未授权提示 -->
       
<van-dialog message="亲，必要的权限您需要开启哦~" show="{{ isOpenSetting }}" confirm-button-text="开启" bind:confirm="handlerOpenSetting">
       
</van-dialog>
       
<!-- 合成头像画布 -->
       
<canvas class="userinfo-canvas" canvas-id="festivalCanvas"></canvas>
       
<!-- 内容主体 -->
       
<view class="userinfo">
       
  <block wx:if="{{!hasUserInfo}}">
       
    <!-- 授权区 -->
       
    <template is="authorization" data="{{canIUseGetUserProfile}}" />
       
  </block>
       
  <view wx:else style="text-align: center;">
       
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
       
    <!-- 拖动贴纸 -->
       
    <template is="switchRect" data="{{rotate,festivalSize,festivalLeft,festivalTop,festivalSrc,festivalScale}}" />
       
    <!-- 操作区 -->
       
    <template is="operatingArea" />
       
    <!-- 贴纸区 -->
       
    <template is="materialArea" data="{{material}}" />
       
  </view>
       
</view>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

获取微信用户头像：

涉及 API： wx.getUserProfile(Object object)

用户主动触发定义的 getUserProfile 函数来打开小程序内置的授权提示窗口，在用户同意后成功拿到用户的 UserInfo 对象，从中解析到用户的头像信息，我们通过 hasUserInfo 变量的状态来控制未授权和已授权页面状态的显示。

       
       getUserProfile(e) {
       
  wx.getUserProfile({
       
    desc: '展示用户头像',
       
    success: (res) => {
       
      const {
       
        material
       
      } = this.data;
       
      this.setData({
       
        userInfo: res.userInfo,
       
        hasUserInfo: res.userInfo != null,
       
        festivalSrc: material[0].url,
       
      });
       
    }
       
  })
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

贴纸移动、旋转、缩放：

在 switch-rect.wxml 模板中定义了贴纸操作的容器，并在容器中显示当前选中的贴纸素材，将容器设置固定定位后通过实时改变 css 的选中角度、宽高及边距的数据来完成。

容器事件的绑定包含了catchtouchstart、catchtouchmove、catchtouchend，右下角的选中按钮同样绑定了这三个属性。catch在这里表示会阻止事件向上冒泡事件的具体处理可以在文末的提供的源码地址查看。

保存新头像：

检查用户是否同意使用相册：

涉及 API：

使用 wx.getSetting 可以得到当前用户设置列表的权限状态，通过查看指定状态是否已授权来决定能否继续执行下一步，否则我们配置来提示框口来引导用户使用 wx.openSetting 跳转到设置页面手动操作授权。

       
       wx.getSetting({
       
  success(res) {
       
    if (!res.authSetting[scope]) {
       
      wx.authorize({
       
        scope,
       
        success() {
       
          callback && callback(true);
       
        },
       
        fail() {
       
          self.setData({
       
            isOpenSetting: true,
       
          });
       
        }
       
      })
       
    } else {
       
      callback && callback(true);
       
    }
       
  },
       
  fail(err) {
       
    console.log(err)
       
  }
       
})
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

使用canvas绘制并输出新头像：

涉及 API： wx.saveImageToPhotosAlbum

通过调用封装的 saveImage 函数，传入 canvasid 和尺寸数据可以得到合成后的图像信息。再调用 wx.saveImageToPhotosAlbum 将图像信息保存到用户的手机相册，至此首页功能的 MVP 版本就完结了~

       
       saveImage(this.data, res.tempFilePath, {
       
  canvasid: 'festivalCanvas',
       
  width: 700,
       
  height: 700,
       
  offsetTop: 0,
       
  offsetLeft: 0,
       
}, (img) => {
       
  wx.hideLoading();
       
  if (img) {
       
    this.saveImageToPhotosAlbum(img)
       
  }
       
});
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

代码质量：

在微信开发者工具中有一个代码质量检查的功能，我们可以通过提示的处理方案进行操作，我们这个小程序没有使用CDN来放贴纸素材，所以图片资源超出了默认的200k的限制，有条件的时候可以优化一下~。

小程序｜炎炎夏日、清爽一夏、头像大换装_ico_07

上线发布~：

推送代码：

这里的推送代码指的是通过微信开发者工具将编写的代码打包上传到小程序平台做发布，并非代码管理~。

填写版本号；
填写版本描述；

小程序｜炎炎夏日、清爽一夏、头像大换装_json_08

提交审核：

推送代码后就可以在这里查看到了，核实没有问题就提交审核后耐心等待吧。

小程序｜炎炎夏日、清爽一夏、头像大换装_微信小程序_09

提交发布：

等审核通过后就可以再次来到小程序平台执行提交发布的操作了，发布以后可以先用过扫描进入正式版小程序，稍后才能在微信搜索到。

小程序｜炎炎夏日、清爽一夏、头像大换装_json_10

源码分享：

本文源码： CoolAvatar;
参考项目： whc_wechat_image_edit

搬运说明：

使用参考项目的贴纸容器缩放的实现，完成贴纸容器的坐标角度的处理；
使用参考项目的 canvas 导出图像工具类实现贴纸素材和用户头像的融合；

问题集锦：

样式覆盖问题

Q: 在使用 van-button 的时候发现通过在 app.wxss 中使用重新编写 css 类无法正常覆盖样式；

A：在 .van-button 前增加 view 标识可以完成，如下；

       
       view .van-button {
       
  height: 75rpx;
       
}
      
1.
2.
3.

自动执行授权函数？

Q：尝试在 onload 后直接调用 wx.getUserProfile 函数来减少操作，但没有正常弹出窗口？

A：页面设计未授权状态，让用户主动触发才能正常弹窗。

用户头像清晰度

Q：在获取到用户的头像信息后发现头像特别模糊，完全无法进行新头像的成？

A： UserInfo在说明 avatarUrl 提到了地址最后一段的含义，0、46、64、96、132 数值可选，0 代表 640x640 的正方形头像，46 表示 46x46 的正方形头像，剩余数值以此类推。默认132。所以我们需要将默认的 132 替换成 0 得到最高清的一张头像。

       
       const index = res.userInfo.avatarUrl.lastIndexOf('/132');
       
if (index != -1) {
       
  res.userInfo.avatarUrl = res.userInfo.avatarUrl.substring(0, index) + '/0';
       
}
      
1.
2.
3.
4.