最近花了些时间,写了一个 “国庆头像” 小程序。正好快国庆节了,于是分享一下我的这个 “Starstick星点贴纸” 小程序,顺便简单讲讲以及其中的设计、开发、上线过程。
小程序的界面是这样的:
🔮背景
今年中秋前夕,本来想着在中秋前写点什么来迎接节日,但是又考虑自己的技术水平可能在短短几天做不来什么,于是把时间往后推远一些,就想到了国庆节。到国庆节足有十几天时间,于是我不假思索地想到了一个 “国庆头像” 小程序,也许这个我能做出来。
“国庆头像” 小程序其实已经有很多了。不过我想只要做,就是一次练手机会,毕竟我刚学习小程序没几个月,再不上手估计全忘了……于是想法就确定下来了。
🚩立项
“国庆头像” 类小程序的名称几乎能有的都有了,跟 “国庆” “头像” 沾边的词汇估计会很容易冲突。主要因为这是个很细分的领域,于是我只能把立意扩大些。
首先 “国庆头像” 类小程序本质上就是 “贴纸” 或 “头像贴纸”,于是我选定了 “贴纸” 这个词;
接着是考虑加一些限定词,因为单是 “贴纸” 类小程序也很多。又因为 “国庆头像” 类小程序中总会有一面国旗,我想到了国旗中的星星,于是我就想出了一个 “星点”,项目名称就是 “星点贴纸”;
最后我又想着给起英文名,于是就有了 “Starstick”,由 “Star” 和 “Sticker” 简化拼接而来,最终就是 “Starstick星点贴纸”。
✏︎设计
“Starstick星点贴纸” 的功能很简单,就只需一个页面就行,于是就只要围绕着更换贴纸作设计即可。除开一些 icon、字体和背景素材,logo、贴纸等都需要自行设计。
素材资料
- pixabay.com,可以找到很多免费使用的图片素材作为背景
- iconfont.cn,可以提供免费使用的图标
- zfont.cn,汇集了很多免费商用的中文字体
logo
围绕着 “星点” 设计,于是想象出了一个宇宙的星球,wink 出一点 “星”。
字体
围绕着 “星点” 为主题,设计了独特的具有辨识度的字体。
贴纸
贴纸主要是国庆、国旗相关的元素,也有一些其他跟 “国庆” 相关的元素。
icon
icon 部分分别设计了一个 “灯笼” 和 “五角星”。
界面
界面主要由 “背景图”,“头像预览框”,“贴纸区”,“功能按钮” 组成。
👨💻开发
功能需求
“Starstick星点贴纸” 的功能很简单,包含以下功能:
- 用户可选择本地图片
- 用户可选择贴纸并预览头像效果
- 用户可保存头像效果图片到手机相册
- 用户可分享小程序给好友
技术选型
开发语言:JavaScript
开发平台:微信小程序原生
服务器:🈚
数据库:🈚
开发实现
1. 拍摄或从相册中选择图片
文档:developers.weixin.qq.com/miniprogram…
位置: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);
}
});
},
cropImage(src) {
wx.cropImage({
cropScale: '1:1',
src: src,
success: (res) => {
console.log(res);
this.setData({
'preAvatar.avatar': res.tempFilePath,
'preAvatar.isUserAvatar': true
});
}
})
},
});
2. Canvas 绘制
文档:developers.weixin.qq.com/miniprogram…
位置:指南 / 基础能力 /画布 /介绍
Canvas 绘制头像贴纸效果是最核心的业务逻辑。这里最主要的是使用了off-screen canvas
的绘制方式,它是指在内存中创建的一个不可见的画布实例,它不直接显示在页面上。
Page({
onReady() {
const canvas = wx.createOffscreenCanvas({ type: '2d' });
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;
context.drawImage(image, dx, dy, dWidth, dHeight);
});
3. 保存图片到系统相册
文档:developers.weixin.qq.com/miniprogram…
位置: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('未保存');
}
});
}
}
});
4. 分享转发️
文档:developers.weixin.qq.com/miniprogram…
位置:指南 / 开放能力 / 转发 / 转发
小程序实现分享,也就是转发给微信好友的功能。
这里也设计了一张用于分享的图片。
Page({
onShareAppMessage() {
return {
title: '免费生成领取国庆头像',
imageUrl: '../../assets/images/share-c.jpeg'
}
}});
5. 优化
在测试过程中发现保存图片的耗时比较长,分析下来是在 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.width = image.width;
canvas.height = image.height;
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;
}
}
});
🎉上线
虽然在设计上弯弯绕绕,开发上磕磕绊绊的,但好在终于完成了。
最后到了上线阶段,需要完善 “用户隐私保护指引”,小程序备案以及微信认证(30 元认证费),这部分两天就搞定了。
🌟最后
前后设计、开发、备案认证总共 1 周多几天,本想在国庆 10.1 上线,不过又怕时间太晚了,于是把发布日期定在 9.26 号了。
最后,临近国庆,祝大家工作顺心,提前祝国庆快乐!
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=20785,转载请注明出处。
评论0