小程序实现分销海报

时间:2024-03-06 09:51:05

小程序实现分销海报

 

1、简介:

  用户生成属于自己的海报,其他人扫码此图片上的二维码,进入相应的小程序页面,同时带上相关的参数 parent_id 从而绑定上下级关系;

注意:一下是微信小程序的实现方法;支付宝基本同样,只有稍微小的部分修改,例如:支付宝小程序不需要调起授权保存相册,会在你使用的时候自动调用

2、例如海报:

3、分销海报包含了:

  1、海报背景(可选择更换);

  2、个人二维码;

  3、用户个人信息;姓名、头像等

  4、海报长按保存功能;

4、实现原理:

  海报图、以及个人二维码(扫码可跳转小程序固定一个页面)由后台接口返回两张图片;前台使用canvas将此海报绘制出来;

5、html代码

微信小程序方法

<canvas class="mycanvas" canvas-id="myCanvas" :style="{height: canvasHeight + \'px\',width: canvasWidth+ \'px\'}" 
  @longtap="getAuthAndSaveImg"> </canvas>

支付宝小程序方法

 

<canvas 
                id="canvas"
                :style="{height: canvasHeight + \'px\',width: canvasWidth+ \'px\'}"
                class="canvas"
                @longtap="getAuthAndSaveImg"
/>

 

 

 

6、js代码:

  注意:canvas将图片绘制,必须将网络图片下载到本地,或者使用本地图片也是可以的

 export default {
        data() {
            return {
                cardData:\'\',
                avatarImg: \'\',     // 用户头像
                avatarContent: \'\', // 文字
                codeUrl: \'\',        // 二维码图片
                canvasWidth: 0,     // 画布大小
                canvasHeight: 0,
                codeTestPicBg: \'\'   // 背景图
            }
        },
        onLoad() {
            this.loadImg();
        },
        methods: {
            // 生成确定画布大小
            loadImg(){
                let that = this;
                // 获取系统信息  支付宝小程序这里只需要将 wx.  改为 my.
                wx.getSystemInfo({
                    success: function (res) {   
                        that.canvasWidth = res.windowWidth * 1;
                        that.canvasHeight = res.windowHeight * 1;
                        that.getAvatarImgurl();
                    }
                });
                
            },
            
            // 获取用户信息
            getAvatarImgurl(){
                let that = this;
                uni.getStorage({
                    key: \'scopeUserInfo\',
                    success: function (res) {
                        that.avatarImg = res.data.avatarUrl;
                        that.avatarContent = \'您的好友\' + res.data.nickName + \'为您分享!\'
                        that.downloadAvar();
                    }
                });
            },
            
            // 下载用户头像  支妇保小程序同样也需要先下载
            downloadAvar(){
                let that = this;
          // 支付包小程序 同样wx 改为 my ;返回值 tempFilePath 改为 apFilePath wx.downloadFile({ url: that.avatarImg, success: function (res) { that.avatarImg
= res.tempFilePath wx.hideLoading(); that.getTempFile(); }, fail: function (err) { wx.showToast({ title: "下载头像败,稍后重试!", icon: "none", duration: 5000 }); } }); }, // 获取CODE吗 getTempFile: function () { let that = this; request.post(that.websiteUrl + \'/api/v4/drp/create/applet/code\',{ goods_id: 0, scene: \'\' + 0 + \'&\' + this.drpdata.shop_info.user_id, shop_id: this.drpdata.shop_info.id }).then(res=>{ //继续生成商品的小程序码 that.downloadCodepic(res.data.url); }) }, // 下载code码 downloadCodepic(url){ let that = this; wx.downloadFile({ url: \'https://\' + url, success: function (res) { that.codeUrl = res.tempFilePath wx.hideLoading(); that.downloadBgCard(); }, fail: function (err) { wx.showToast({ title: "下载二维码失败,稍后重试!", icon: "none", duration: 5000 }); } }); }, // 下载背景图 downloadBgCard(){ let that = this; wx.downloadFile({ url: \'https://feiquanshijie-oss.oss-cn-hangzhou.aliyuncs.com/data/attached/qrcode/themes/20130815061226_k3jWZ.png?v=1582584928\', success: function (res) { console.log(res) that.codeTestPicBg = res.tempFilePath wx.hideLoading(); //生成数据 that.setCanvas(); }, fail: function (err) { wx.showToast({ title: "下载背景图失败,稍后重试!", icon: "none", duration: 5000 }); } }); }, // 绘制画布 微信小程序 setCanvas() { let that = this; let ctx = wx.createCanvasContext("myCanvas"); ctx.rect( 0, 0, that.canvasWidth, that.canvasHeight ); ctx.setFillStyle("#fff"); ctx.fill(); // 背景图片 ctx.drawImage( \'../../../static/card_bg.png\', 0, 0, that.canvasWidth, that.canvasHeight ); // 用户图片 ctx.drawImage( that.avatarImg, 30, 40, 50, 50 ); that.drawFont(ctx, that.avatarContent, 100, 70,0,0,0,17,14,\'#000\'); that.drawFont(ctx, \'长按保存图片\', 140, 25,0,0,0,17,14,\'#333\'); // code图片 ctx.drawImage( // that.codeUrl, \'../../../static/123860applet.png\', that.canvasWidth/3, that.canvasWidth/3, that.canvasWidth/3, that.canvasWidth/3 ); ctx.globalCompositeOperation = "source-over"; ctx.draw(); //绘制到canvas },
// 长安图片
            getAuthAndSaveImg(){
                let _this = this;
                wx.getSetting({
                    success(res) {
                        if (res.authSetting[\'scope.writePhotosAlbum\']) {
                            _this.saveShareImg();
                        } else if (res.authSetting[\'scope.writePhotosAlbum\'] === undefined) {
                            wx.authorize({
                                scope: \'scope.writePhotosAlbum\',
                                success() {
                                    _this.saveShareImg();
                                },
                                fail(){
                                    wx.showToast({
                                        title: \'您没有授权,无法保存到相册\',
                                        icon: \'none\',
                                        duration: 2000
                                    })
                                }
                            })
                        }else {
                            uni.openSetting({
                                success(res) {
                                    if (res.authSetting[\'scope.writePhotosAlbum\']) {
                                        _this.saveShareImg();
                                    }else{
                                        wx.showToast({
                                            title:\'您没有授权,无法保存到相册\',
                                            icon:\'none\',
                                            duration: 2000
                                        })
                                    }
                                }
                            })
                        }
                    }
                })
            },
            
            //点击保存到相册
            saveShareImg: function () {
                var that = this;
                wx.showLoading({
                    title: \'正在保存\',
                    mask: true,
                })
                setTimeout(function () {
                    wx.canvasToTempFilePath({
                        canvasId: \'myCanvas\',
                        fileType: \'jpg\',
                        success: function (res) {
                            wx.hideLoading();
                            var tempFilePath = res.tempFilePath;
                            wx.saveImageToPhotosAlbum({
                                filePath: tempFilePath,
                                success(res) {
                                    wx.showModal({
                                        content: \'图片已保存到相册,赶紧晒一下吧~\',
                                        showCancel: false,
                                        confirmText: \'好的\',
                                        confirmColor: \'#333\',
                                        success: function (res) {
                                            
                                        },
                                        fail: function (res) { 
                                            wx.showToast({
                                                title: \'系统繁忙,请稍后重新尝试!\',
                                                icon: \'none\',
                                                duration: 2000
                                            })
                                        }
                                    })
                                },
                                fail: function (res) {
                                    wx.showToast({
                                        title: res.errMsg,
                                        icon: \'none\',
                                        duration: 2000
                                    })
                                }
                            })
                        }
                    });
                }, 1000);
            },
            
            // 设置文字大小,并填充颜色。
            drawFont: function (ctx, contentTitle, x, y, x1, y1,x2,y2,fontSize,color) {
                let that = this;
                let str = contentTitle;
                let firstline;
                ctx.setFontSize(fontSize);
                ctx.setFillStyle(color);
                ctx.fillText(firstline, x + x1, y + y1);
                
            },
        },
    }

 支付宝小程序绘制 以及 长安下载;支付宝小程序不需要去判断授权 直接下载就行 会自动调用授权

draw() {
                const ctx = my.createCanvasContext(\'canvas\')
                
                ctx.drawImage(this.codeTestPicBg, 0, 0, this.canvasWidth, this.canvasHeight);
                ctx.drawImage(this.avatarImg, 30, 40, 50, 50);
                var numH = 1.234*(this.canvasWidth/2);
                ctx.drawImage(this.codeUrl, this.canvasWidth/4, this.canvasWidth/3, this.canvasWidth/2,numH);
                
                ctx.setFontSize(16)
                ctx.fillText(\'长按保存图片\', 140, 20);
                ctx.fillText(this.avatarContent, 100, 70);
                
                ctx.globalCompositeOperation = "source-over";
                ctx.draw()
            },
            
            
            // 长安图片  点击保存到相册
            getAuthAndSaveImg(){
                var that = this;
                my.showLoading({
                    title: \'正在保存\',
                    mask: true,
                })
                setTimeout(function () {
                    const ctx = my.createCanvasContext(\'canvas\');
                    ctx.toTempFilePath({
                        fileType: \'jpg\',
                        success: function (res) {
                            my.hideLoading();
                            var tempFilePath = res.apFilePath;
                            my.saveImage({
                                url: tempFilePath,
                                showActionSheet: true,
                                success(res) {
                                    my.alert({
                                        title: \'温馨提示\',
                                        content: \'图片已保存到相册,赶紧晒一下吧~\',
                                        buttonText: \'我知道了\',
                                        success: function (res) {
                                            
                                        },
                                        fail: function (res) { 
                                            my.showToast({
                                                title: \'系统繁忙,请稍后重新尝试!\',
                                                icon: \'none\'
                                            })
                                        }
                                    })
                                },
                                fail: function (res) {
                                    my.showToast({
                                        title: res.errMsg,
                                        icon: \'none\'
                                    })
                                }
                            })
                        }
                    });
                }, 1000);
            },

 

7、上下级关系处理:

  例如扫码后跳转商城首页,那么在首页的onload 事件中,拿到 e ,便能拿到相应的传递的参数,例如:parent_id

onLoad(e) {
    if(e.parent_id){
        this.user_id = e.parent_id;
        uni.setStorageSync(\'isplatformUserID\', this.user_id);
    }
            
},

 

8、canvas两个图片重叠时显示的方法——globalCompositeOperation