微信小程序之生成专属推广海报

现在老板一般都需要线上推广功能，通过给用户好处来刺激用户裂变分销，这就需要我们给用户生成专属的推广海报
因为小程序的用户uid是唯一的并且是不变的，所以我们后台大哥就以用户的uid作为生成专属二维码的图片名称，这里我们用canvas来绘制海报，废话不多说，上前端代码：
wxml:

<view class='box'><canvas canvas-id='post' style='width:750rpx;height:1334rpx;'></canvas><view style='width:100%;text-align:center;color:#cc181d;font-size:24rpx;margin-top:15rpx;'>这是您的专属二维码，将图片保存至手机后发朋友圈推广</view><button class='btn' bindtap='save'>保存图片</button>
</view>

js:

data: {src1: 'https://www.qiaolibeilang.com/qrcode/',src3: '.png',},onLoad: function (options) {var that = thisvar winWidth = wx.getSystemInfoSync().windowWidth;// 获取当前设备的可视宽度var winHeight = wx.getSystemInfoSync().windowHeight;// 获取当前设备的可视高度that.setData({winWidth: winWidth,winHeight: winHeight})let promise1 = new Promise(function (resolve, reject) {wx.getImageInfo({src: 'https://www.qiaolibeilang.com//public/uploads/images/20180809/free.png',success: function (res) {resolve(res);}})});let promise2 = new Promise(function (resolve, reject) {var uid = wx.getStorageSync('uid')console.log(uid)wx.getImageInfo({src: that.data.src1 + uid + that.data.src3,success: function (res) {resolve(res);}})});Promise.all([promise1, promise2]).then(res => {var that = thisvar winWidth = wx.getSystemInfoSync().windowWidth;// 获取当前设备的可视宽度var winHeight = wx.getSystemInfoSync().windowHeight;// 获取当前设备的可视高度that.setData({winWidth: winWidth,winHeight: winHeight})console.log(winWidth)console.log(winHeight)const ctx = wx.createCanvasContext('post')ctx.setFillStyle('red')ctx.drawImage(res[0].path, 0, 0, that.data.winWidth, that.data.winWidth * 1.778)ctx.drawImage(res[1].path, that.data.winWidth - 160, that.data.winWidth * 1.778 - 105, 80, 80)console.log(res)ctx.draw(true)})},save: function (e) {var that = thiswx.canvasToTempFilePath({x: 0,y: 0,canvasId: 'post',success: function (res) {// 获得图片临时路径console.log(res.tempFilePath)wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {console.log(res);wx.showToast({title: '保存成功',});},fail(res) {console.log("保存图片：fail");console.log(res);}})}})},

wxss代码就不写了，每个人风格都不一样，我的最终效果是就是这样，二维码是每个人单独的，剩下的就让后台去处理后续的业务逻辑就好了

微信小程序之生成专属推广海报相关推荐

微信小程序自动生成打卡海报
1 背景最近在做一款背单词的小程序,用户在学习完成有对外展示的需求.计划小程序可以自动生成打卡海报,用户可以将海报保存,将保存的图片发布至朋友圈.除此之外,为推广小程序,还需要在海报中加入小程序的二 ...
微信小程序——二维码推广海报
微信小程序分享生成海报
本文转自:微信小程序实现生成海报并且保存本地 - 张正-博客园 - 博客园 html: <view><image src="{{img}}" class='bgI ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
微信小程序实现生成分享海报案例
一.引入插件painter (1)克隆地址:https://gitcode.net/mirrors/Kujiale-Mobile/Painter (2)下载的painter放到小程序的componen ...
微信小程序Excel生成下载浏览分享
微信小程序Excel生成下载浏览分享完整流程遇到的小问题完整流程主要是为了实现小程序前端从后端下载excel文件并浏览和分享excel文件给其他用户主要实现步骤:通过后端返回的字节流 : w ...
uniapp使用高德地图微信小程序SDK生成地图轨迹
一文看懂微信小程序生成地图轨迹一.开发准备 1.下载微信小程序SDK 2.高德控制台申请相关平台key 二.html页面展示地图标签三.引入sdk及定义数据四.相关方法(静态生成两个点之间的轨迹 ...
织梦微信小程序一键生成插件(资讯案例模板），整合织梦CMS一切数据信息
<织梦微信小程序一键生成插件(资讯模板)>是织梦58发布的便于生成微信小程序的插件,让用户更方便生成资讯类小程序. 版本:1.1(当前1.0版本,下载安装之后可以进行更新升级) 使用该插件 ...
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...

微信小程序之生成专属推广海报

微信小程序之生成专属推广海报相关推荐

最新文章

热门文章