1. 小程序开发基础
1.1 小程序介绍
微信小程序是一种不需要下载安装的小应用，它可以快速地被用户打开，具有轻量、便捷的特点，适合快速的信息展示、交互操作等应用场景。
要开发小程序，必须先去官网注册并登录微信公众平台，进入“开发-开发设置”页面，创建小程序。
1.2 开发工具
微信小程序开发工具是官方提供的一款用于小程序开发的集成开发环境（IDE），包含代码编辑器、调试器、文件管理器等工具。
开发工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
1.3 小程序组成
微信小程序包含三个主要部分：展示层（WXML）、逻辑层（JS）、样式层（WXSS），其中展示层和样式层都可以使用类似HTML/CSS的语法，逻辑层采用JavaScript语言。
2. 制作表白图片的基本思路
制作表白图片的基本思路就是先在一个空白的画布上添加文字和图片，然后生成一张图片，最后可以将生成的图片保存到本地或者分享给好友。下面将详细介绍如何实现这个过程。
3. 新建小程序页面
打开微信小程序开发工具，在项目根目录下创建一个新的页面，同时在app.json文件中配置好新页面的路径和页面标题等信息。为了便于开发，可以使用vue语法编写页面，这需要在项目中引入mpvue框架。
// 创建一个名为"love"的页面
// pages/love/main.vue文件内容如下：
<template>
<view>
<canvas id="canvas" disable-scroll="true" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
</view>
</template>
<script>
import wepy from 'wepy'
export default class LovePage extends wepy.page {
data = {
canvasWidth: 300,
canvasHeight: 400,
bgImgSrc: '/static/bg.jpg',
bgImgInfo: {},
textContent: '我爱你',
textStyle: {
font: '30px Arial',
color: '#ff0000',
textAlign: 'center',
textBaseline: 'middle'
}
}
onLoad() {
// 获取背景图片信息
wepy.getImageInfo({
src: this.bgImgSrc,
success: (res) => {
this.bgImgInfo = res
}
})
}
}
</script>
<style scoped>
canvas {
background-image: url("/static/bg.jpg");
background-size: cover;
}
</style>
4. 添加图片和文字
在画布上添加图片和文字，需要在Canvas实例中先加载背景图，然后使用fillText方法添加文字，使用drawImage方法添加其他的图片。
// pages/love/main.vue
<template>
<view>
<canvas id="canvas" disable-scroll="true" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
</view>
</template>
<script>
import wepy from 'wepy'
export default class LovePage extends wepy.page {
data = {
...
}
onLoad() {
...
wepy.createSelectorQuery()
.select('#canvas')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
// 绘制背景图
ctx.drawImage(this.bgImgInfo.path, 0, 0, this.canvasWidth, this.canvasHeight)
// 绘制文字
ctx.font = this.textStyle.font
ctx.textAlign = this.textStyle.textAlign
ctx.textBaseline = this.textStyle.textBaseline
ctx.fillStyle = this.textStyle.color
ctx.fillText(this.textContent, this.canvasWidth / 2, this.canvasHeight / 2)
// 绘制其他图片等
...
})
}
}
</script>
5. 生成图片并保存到本地
在绘制完图片和文字之后，就可以将画布保存为一张新的图片。可以使用canvas.toTempFilePath方法实现。
// pages/love/main.vue
<template>
<view>
<canvas id="canvas" disable-scroll="true" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
<button @tap="saveImage">保存图片</button>
</view>
</template>
<script>
import wepy from 'wepy'
export default class LovePage extends wepy.page {
data = {
...
}
onLoad() {
...
}
async saveImage() {
const canvas = await wepy.createSelectorQuery()
.select('#canvas')
.fields({ node: true })
.exec((res) => res[0].node)
wx.canvasToTempFilePath({
canvas,
success: (res) => {
...
}
}, this)
}
}
</script>
6. 分享图片
为了使用户能够快速方便地将图片分享给好友，可以通过调用微信的转发 API，将生成的图片转发给好友。
// pages/love/main.vue
<template>
<view>
<canvas id="canvas" disable-scroll="true" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
<button @tap="saveImage">保存图片</button>
<button @tap="shareImage">分享图片</button>
</view>
</template>
<script>
import wepy from 'wepy'
export default class LovePage extends wepy.page {
data = {
...
}
onLoad() {
...
}
async saveImage() {
...
}
async shareImage() {
const filePath = await this.saveImage()
wx.shareAppMessage({
title: '我为你写的表白图片',
imageUrl: filePath
})
}
}
</script>
7. 总结
至此，制作表白图片的过程已经全部完成。在制作图片时，还可以通过添加一些动画特效以及音效等元素，增加图片的趣味性。另外，在用户保存图片时，可以先检测用户是否已授权，如果未授权，则提示用户授权，否则直接保存图片到本地。