手把手带你实现虎年头像框制作小程序「实践」

1. 介绍

在即将到来的虎年，制作一个虎年头像框成为了许多人的需求。而小程序开发可以实现这一需求，本文将手把手带你实现虎年头像框制作小程序的开发教程，希望对想成为小程序开发者或者有兴趣的读者有所帮助。

2. 设计思路

在实现虎年头像框制作小程序时，我们需要先了解小程序的基本构成和工具，然后分4个部分进行开发：用户个人信息页、照相机页、头像框预览页以及头像框分享页。整个小程序的流程如下图所示：

3. 开发步骤

3.1. 建立小程序结构

我们首先需要用 WXML（Wei Xin Markup Language）、WXSS（Wei Xin Style Sheet）和 JS（JavaScript）文件搭建好小程序结构。

在根目录建立 app.json 文件，来定义小程序的页面路径、界面风格等。在此基础上，我们可以通过 WXML 来编写小程序的结构，通过 WXSS 来定义小程序的样式，通过 JS 来控制小程序的逻辑。

下面是一个简单的页面定义框架：

// index.wxml
<!-- 定义一个页面 -->
<view class="container">
    <image src="{{item.avatar}}" />
    <view class="info">
        <view class="nickname">{{item.nickname}}</view>
        <view class="gender {{item.gender}}"></view>
    </view>
</view>

定义好基本结构后，我们需要设置访问路由，可以通过 Page() 函数来定义。此函数会创建一个对象，其中包含了页面的初始数据、生命周期钩子和事件处理函数。

下面是一个简单的页面定义框架：

// index.js
Page({
    data: {
        item: {
            nickname: '风飘扬',
            gender: 'male',
            avatar: 'http://wx.qlogo.cn/mmopen/mCcNAykrT3OtKfUBUkb8SHU5HlcZz9bVYdGKh6KhPnJU61Qh2CicszcccZmmTu7M6ArGT8bibLtibW5wtiafrsTAicf5mFJztXZy/132',
          }
    },
    onLoad() {
    }
})

3.2. 用户个人信息页

用户个人信息页需要进行用户信息的授权和获取，最终返回用户信息，例如微信昵称、头像等。具体步骤如下：

在 json 文件中定义用户信息页的路由

在 js 文件中定义按钮绑定事件，触发小程序 API，获取用户信息

在 js 文件中定义更新页面方法，在取得用户信息后刷新页面

下面是获取用户信息的代码示例：

// index.js
Page({
    data: {
        userInfo: null
    },
    bindGetUserInfo(e) {
        this.setData({
            userInfo: e.detail.userInfo
        });
        setTimeout(() => this.updateUserInfo(), 100);
    },
    updateUserInfo() {
        this.setData({
            userInfo: this.data.userInfo
        });
    }
})

3.3. 照相机页

照相机页需要实现微信 API 的调用，使得用户可以进行头像的拍摄、相片的保存与预览，具体实现步骤如下：

在 json 文件中定义照相机页面的路由

在 js 文件中触发微信 API chooseImage，启用照相机进行头像拍摄

在 js 文件中，将拍摄后的照片以 Base64 格式编码后存储在 data 中

在 js 文件中，设置面部裁剪区域大小和位置，截取头像区域

在 js 文件中，将裁剪后的头像保存至本地缓存中

下面是其中部分实现代码的示例：

// camera.js
Page({
  data: {
    filePath: '',
    hairColor: 'rgb(226, 200, 124)'
  },
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePaths = res.tempFilePaths;
        this.setData({
          filePath: tempFilePaths[0]
        });
        setTimeout(() => {
          this._crop();
          this._save();
        }, 100);
      },
      fail: (res)=> {
        console.log('fail', res);
      }
    });
  },
  _crop() {
    const ctx = wx.createCanvasContext('myCanvas');
    const hairColor = this.data.hairColor;
    ctx.drawImage(this.data.filePath, 0, 0, 300, 300);
    ctx.fillStyle = hairColor;
    ctx.beginPath();
    ctx.moveTo(170, 90);
    ctx.bezierCurveTo(180, 90, 180, 100, 180, 110);
    ctx.lineTo(140, 110);
    ctx.bezierCurveTo(140, 100, 140, 90, 150, 90);
    ctx.lineTo(170, 90);
    ctx.fill();
    ctx.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          this.setData({
            filePath: res.tempFilePath
          });
        }
      });
    });
  },
  _save() {
    const filePath = this.data.filePath;
    wx.saveFile({
      tempFilePath: filePath,
      success(res) {
        const savedFilePath = res.savedFilePath;
        wx.setStorageSync('filePath', savedFilePath);
      }
    });
  },
})

3.4. 头像框预览页

头像框预览页需要实现以下功能：

加载本地缓存的头像图片和头像框图片

结合微信小程序getImageInfo接口，进行头像和头像框文件的信息获取和尺寸的调整

将头像与头像框合成为同一个图片，用以在分享页面中显示

下面是其中部分实现代码的示例：

// preview.js
Page({
  data: {
    shareImage: '',
    avatar: '',
    frame: '',
    framePath: '',
    ctx: '',
    isAvatarLoaded: false,
    isFrameLoaded: false,
    portraitTempPath: ''
  },
  onReady() {
    this.setData({
      ctx: wx.createCanvasContext('myCanvas')
    });
    const avatar = wx.getStorageSync('filePath');
    const framePath = wx.getStorageSync('framePath');
    wx.getImageInfo({
      src: avatar,
      success: (resAvatar) => {
        wx.getImageInfo({
          src: framePath,
          success: (res) => {
            this.setData({
              avatar: avatar,
              frame: res.path,
              isAvatarLoaded: true,
              isFrameLoaded: true
            });
            this._drawImage();
          }
        })
      }
    })
  },
  _drawImage() {
    const ctx = this.data.ctx;
    const avatar = this.data.avatar;
    const frame = this.data.frame;
    const width = 420;
    const height = 420;
    ctx.drawImage(avatar, 0, 0, width, height);
    ctx.drawImage(frame, 0, 0, width, height);
    ctx.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          this.setData({
            shareImage: res.tempFilePath,
            portraitTempPath: res.tempFilePath
          });
        }
      });
    })
  },
})

3.5. 头像框分享页

头像框分享页需要实现以下功能：

将合成后的头像框图片与微信分享 API 相关联，以便用户分享

下面是其中部分实现代码的示例：

// share.js
Page({
  onShareAppMessage() {
    return {
      title: '一个耳熟能详的名字', // 转发的标题
      path: '/page/index/index', // 转发的路径
      imageUrl: this.data.shareImage, // 转发的图片
    }
  }
})

4. 结尾

至此，虎年头像框制作小程序的开发已经完成！整个小程序功能结构清晰，逻辑也相对简单，但是却集成了多种微信小程序应用。希望本篇文章对大家有所帮助，也希望大家在学习、实践中发现问题并不断地完善这个小程序设计！