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

最近花了些时间，写了一个 “国庆头像” 小程序。正好快国庆节了，于是分享一下我的这个 “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;}}
});