当前位置：首页 > article >正文

迎接国庆，我上线了第一款小程序

article 2024/12/22 2:25:37

最近花了些时间，写了一个 “国庆头像” 小程序。正好快国庆节了，于是分享一下我的这个 “Starstick星点贴纸” 小程序，顺便简单讲讲以及其中的设计、开发、上线过程。

小程序的界面是这样的：

🔮背景

今年中秋前夕，本来想着在中秋前写点什么来迎接节日，但是又考虑自己的技术水平可能在短短几天做不来什么，于是我想到了国庆节。到国庆节足有十几天时间，于是我不假思索地想到了一个 “国庆头像” 小程序，也许这个我能做出来。

“国庆头像” 小程序其实已经有很多了。不过我想只要做，就是一次练手机会，毕竟我刚学习小程序没几个月，再不上手估计全忘了…于是想法就确定下来了。

🚩立项

“国庆头像” 类小程序的名称几乎能有的都有了，跟 “国庆” “头像” 沾边的词汇估计会很容易冲突。主要因为这是个很细分的领域，于是我只能把立意扩大些。

首先 “国庆头像” 类小程序本质上就是 “贴纸” 或 “头像贴纸”，于是我选定了 “贴纸” 这个词；

接着是考虑加一些限定词，因为单是 “贴纸” 类小程序也很多。又因为 “国庆头像” 类小程序中总会有一面国旗，我想到了国旗中的星星，于是我就想出了一个 “星点”，项目名称就是 “星点贴纸”；

最后我又想着给起英文名，于是就有了 “Starstick”，由 “Star” 和 “Sticker” 简化拼接而来，最终就是 “Starstick星点贴纸”。

✏️设计

“Starstick星点贴纸” 的功能很简单，就只需一个页面就行，于是就只要围绕着更换贴纸作设计即可。除开一些 icon、字体和背景素材，logo、贴纸等都需要自行设计。

素材资料

pixabay.com，可以找到很多免费使用的图片素材作为背景
www.gov.cn，中华人民共和国国旗
iconfont.cn，可以提供免费使用的图标
zfont.cn，汇集了很多免费商业的字体

logo

围绕着 “星点” 设计，于是想象出了一个宇宙的星球，wink 出一点 “星”。

字体

围绕着 “星点” 为主题，设计了独特的具有辨识度的字体。

贴纸

贴纸主要是国庆、国旗相关的元素，也有一些其他跟 “国庆” 相关的元素。

icon

icon 部分分别设计了一个 “灯笼” 和 “五角星”。

界面

界面主要由 “背景图”，“头像预览框”，“贴纸区”，“功能按钮” 组成。

👨‍💻开发

功能需求

“Starstick星点贴纸” 的功能很简单，包含以下功能：

用户可选择本地图片
用户可选择贴纸并预览头像效果
用户可保存头像效果图片到手机相册
用户可分享小程序给好友

技术选型

开发语言：JavaScript

开发平台：微信小程序原生

服务器：🈚

数据库：🈚

开发实现

拍摄或从相册中选择图片

文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html

位置：API / 媒体 / 视频 / wx.chooseMedia

首先用户需要从手机相册中选择图片或者拍摄照片来制作头像，

根据微信小程序提供的 API，调用wx.chooseMedia就可以实现 “拍摄或从相册中选择图片”。

接着在用户选择图片或拍摄之后，需要对图片手动进行 “1:1” 比例裁切，这里可以调用wx.cropImage，并指定裁切比例的参数cropScale: '1:1'。

Page({
  // 从相册中选择
  selectFromAlbum() {
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        console.log(res);
        this.cropImage(res.tempFiles[0].tempFilePath);
      }
    });
  },
  // 按 1:1 裁切图片
  cropImage(src) {
    wx.cropImage({
      cropScale: '1:1',
      src: src,
      success: (res) => {
        console.log(res);
        this.setData({
          'preAvatar.avatar': res.tempFilePath,
          'preAvatar.isUserAvatar': true
        });
      }
    })
  },
});

Canvas 绘制

文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/canvas.html

位置：指南 / 基础能力 /画布 /介绍

Canvas 绘制头像贴纸效果是最核心的业务逻辑。这里最主要的是使用了off-screen canvas的绘制方式，它是指在内存中创建的一个不可见的画布实例，它不直接显示在页面上。

Page({
  onReady() {
    // 创建离屏 2D canvas 实例
    const canvas = wx.createOffscreenCanvas({ type: '2d' });
    // 获取渲染 context, 用于后续的画布操作与渲染操作
    const context = canvas.getContext('2d');
    this.data.canvas = canvas;
    this.data.canvasCtx = context;
    this.data.canvasSticker = canvas.createImage();
    this.data.canvasSticker.src = this.data.preAvatar.sticker;
  }
});

Page({
  processImage() {
    const canvas = this.data.canvas;
    const context = this.data.canvasCtx;
    const image = this.data.canvasSticker;
    const preAvatar = this.data.preAvatar;

    // 计算贴纸渲染位置及宽高
    let scale = preAvatar.stickerPosition === 'bottom-right' ? 0.22 : 1;
    let dHeight = canvas.height * scale;
    let ratio = dHeight / image.height;
    let dWidth = image.width * ratio;
    let dx = canvas.width - dWidth;
    let dy = canvas.height - dHeight;
    // 将图片绘制到 canvas 上
    // context.imageSmoothingEnabled = true;
    // context.imageSmoothingQuality = 'high';
    context.drawImage(image, dx, dy, dWidth, dHeight);
});

保存图片到系统相册

文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html

位置：API / 媒体 / 图片 / wx.saveImageToPhotosAlbum

当用户要将制作好的贴纸效果头像保存时，就可以调用wx.saveImageToPhotosAlbum。

Page({
  // 保存图片
  saveImageTapped() {
    if (!this.data.preAvatar.isUserAvatar) {
      this.preAvatarTapped();
    } else {
      wx.saveImageToPhotosAlbum({
        filePath: this.data.preAvatar.avatar,
        success: (res) => {
          wx.showToast({
            title: '已保存到相册',
            icon: 'none',
            duration: 2000
          });
        },
        fail: (err) => {
          console.log('未保存');
        }
      });
    }
  }
});

分享转发️

文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html

位置：指南 / 开放能力 / 转发 / 转发

小程序实现分享，也就是转发给微信好友的功能。

这里也设计了一张用于分享的图片。

Page({
  onShareAppMessage() {
    return {
      title: '免费生成领取国庆头像',
      imageUrl: '../../assets/images/share-c.jpeg'
    }
  }});

优化

在测试过程中发现保存图片的耗时比较长，分析下来是在 Canvas 加载图片、绘制这部分。于是优化了代码的逻辑，生成图片的步骤不限于 “保存图片”，还在于用户 “选择头像”，“选择贴纸” 这些步骤上，每当用户触发这两个方法时，就预先在 Canvas 中加载、绘制。

Page({
  // 离屏绘制图片, 绘制用户选择的头像
  drawUserAvatar() {
    const canvas = this.data.canvas;
    const context = this.data.canvasCtx;

    // 创建一个图片对象
    const image = canvas.createImage();
    // 设置图片资源
    image.src = this.data.preAvatar.avatar;
    // 加载图片完成回调中绘制
    image.onload = () => {
      // canvas 逻辑宽高，以用户头像为基准
      canvas.width = image.width;
      canvas.height = image.height;
      // 将图片绘制到 canvas 上
      context.drawImage(image, 0, 0);
    }
  }
});

Page({
  // 点击列表贴纸
  stickerTapped(event) {
    const stickerId = event.currentTarget.dataset.stickerId;
    // 贴纸是否切换
    const stickerChange = this.initStickerData(undefined, stickerId);
    // 贴纸切换则更新预览头像
    stickerChange && this.initPreAvatar(stickerId);
    // 用户头像时才预加载贴纸
    if (stickerChange && this.data.preAvatar.isUserAvatar) {
      this.data.canvasSticker.src = this.data.preAvatar.sticker;
    }
  }
});