文章目录
- 1 前言
- 2 界面展示
- 3 部分代码展示以及原理解释
- 4 结语
完整项目下载：下载链接
1 前言
在当前的背单词小程序开发中，为满足用户学习完成后的展示需求，计划引入自动生成打卡海报功能，以提升用户参与度与推广效果。除了基本的海报生成功能，还可以考虑以下丰富内容：
- 将用户的学习数据融入海报，展示用户的学习时长、单词掌握率等统计信息，让用户在分享的同时展示自己的学习成果。
- 在海报中加入分享按钮，让用户可以直接点击分享到朋友圈，提高分享的便捷性和用户互动。
- 将小程序的二维码嵌入海报中，使得用户在浏览海报时可以直接扫码进入小程序，方便其他用户的快速访问和体验。
综上所述，通过丰富的海报生成功能，不仅可以满足用户的展示需求，还能够增强用户的参与感与互动体验，同时为小程序的推广带来更多可能性。在接下来的开发中，我们可以逐步实现这些丰富内容，为用户带来更好的使用体验和分享效果。
2 界面展示
在首页点击生成海报；
小程序会自动生成海报；
用户可以点击“保存相册，分享到朋友圈”将海报图片保存至相册！注：由于是原型开发，后期可以不断调整使得海报更加美观。
3 部分代码展示以及原理解释
wxml
<!--index.wxml-->
<button bindtap="formSubmit">生成海报</button>
<view hidden="{{canvasHidden}}" class="mask">
<view class="canvas-box">
<canvas style="width: 800rpx;height: 1600rpx;" canvas-id="mycanvas" />
</view>
</view>
<view class='imagePathBox' hidden="{{maskHidden == false}}" style="height: 100%;">
<image src="{{imagePath}}" class='shengcheng'></image>
<button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</button>
</view>imagePathBox框体用于展示海报以及保存按钮；mask框体用于生成海报图片组件；
js
代码注释讲解得比较详细，逻辑比较简单。就是利用canvas生成海报并进行保存，然后调出之保存的海报并进行展示。最后利用wx.saveImageToPhotosAlbum（）完成保存海报至相册的功能需求。
//index.js
Page({
/**
* 页面的初始数据
*/
data: {
maskHidden: false,
imagePath:"",
},
createNewImg: function () {
var that = this;
var context = wx.createCanvasContext('mycanvas');
context.setFillStyle("#fff")
context.fillRect(0, 0, 375, 667)
var path = "../../images/city.png";
context.drawImage(path, 56, 56, 262, 349);
var path5 = "../../images/erweicode.jpg";//二维码
var name = that.data.name;
//绘制学习情况
context.setFontSize(25);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText("今日学习英语词汇", 80, 450);
context.stroke();
context.setFontSize(50);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText(0, 150, 510);
context.stroke();
//绘制左下角文字
context.setFontSize(14);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText("长按识别小程序", 70, 560);
context.stroke();
context.setFontSize(14);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText("跟我一起来学习吧~~", 70, 580);
context.stroke();
//绘制右下角小程序二维码
context.drawImage(path5, 230, 530,80,80);
context.draw();
//将生成好的图片保存到本地
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath,
canvasHidden: true
});
},
fail: function (res) {
console.log(res);
}
});
}, 200);
},
baocun: function () {
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success(res) {
wx.showModal({
content: '海报已保存到相册',
showCancel: false,
confirmText: '确定',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
/* 该隐藏的隐藏 */
that.setData({
maskHidden: false
})
}
}, fail: function (res) {
console.log(res)
}
})
}
})
},
formSubmit: function (e) {
var that = this;
this.setData({
maskHidden: true
});
wx.showToast({
title: '海报生成中...',
icon: 'loading',
duration: 1000
});
setTimeout(function () {
wx.hideToast()
that.createNewImg();
that.setData({
maskHidden: true
});
}, 1000)
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})其余代码这里不就不展示了，主要是一些组件外观的调整，逻辑已经展示完了。完整代码请至下载区获取！
4 结语
在背单词小程序的开发过程中，通过引入自动生成打卡海报功能，我们为用户提供了一个全新的学习展示方式。通过精心设计的海报，用户不仅可以展示自己的学习成果，还能够获得成就感和身份认同。通过不断丰富海报的内容，如学习统计数据，我们进一步提升了用户的参与度和互动体验。
同时，将小程序的二维码嵌入海报，为推广小程序增加了更多的可能性。用户可以通过海报扫码直接进入小程序，体验更多精彩内容。这不仅有助于提升小程序的曝光度，也为用户的学习分享带来了更多便利。
