1 背景
最近在做一款背单词的小程序，用户在学习完成有对外展示的需求。计划小程序可以自动生成打卡海报，用户可以将海报保存，将保存的图片发布至朋友圈。除此之外，为推广小程序，还需要在海报中加入小程序的二维码。
2 源码下载
3 成品展示
在首页点击生成海报；
小程序会自动生成海报；
用户可以点击“保存相册，分享到朋友圈”将海报图片保存至相册！注：由于是原型开发，后期可以不断调整使得海报更加美观。
4 部分代码展示以及原理解释
4.1 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框体用于生成海报图片组件；
4.2 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) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
其余代码这里不就不展示了，主要是一些组件外观的调整，逻辑已经展示完了。如果大家想要上面截图的样子，请至下载区下载！
