小程序分享之分享到朋友圈

Bertha 。 2022-05-09 18:16 231阅读 0赞

1. 点击分享弹出一个动画 出现分享类型  
2. canvas绘制文字和图片到画布  
3. 给用户展示画布，画布转成图片  
4. 当用户点击保存卡片时，将图片保存到相册  
wxml:

<view>
        <view animation="{
       {animationData}}" class="buydes-dialog-container" wx:if="{
       {showModalStatus}}">
            <view class="buydes-dialog-container-top" bindtap="hideModal">
                <canvas canvas-id="shareImg"></canvas>
            </view>
    
            <view class="buydes-dialog-container-bottom">
                <view class="fl bottom-image-fen">
                    <button open-type="share" hover-class="other-button-hover" class="button-bg">
                        <image src="../../img/weixin.png" style="width: 80rpx; height: 80rpx;" class="bottom-img"></image>
                        <view class="image-txt">发送好友</view>
                    </button>
                </view>
                <view class="fl bottom-image-fen">
                    <view style="margin-top: 5rpx;" bindtap="saveShareImg">
                        <image src="../../img/down.png" style="width: 60rpx; height: 60rpx;" class="bottom-img-right "></image>
                        <view class="image-txt">保存卡片</view>
                    </view>
                </view>
    
                <view class="clear"></view>
                <view bindtap="hideModal" class="buydes-dialog-container-bottom-item" >取消</view>
            </view>
        </view>
        <image bindtap="showModal" bindload="imageLoad" style="width:200px;" src="../../img/xingli.png"/>
    </view>

js:

const config = require("../../utils/config.js");
    let animationShowHeight = 300;
    
    Page({
        data:{
            animationData:"",
            showModalStatus:false,
            imageHeight:0,
            imageWidth:0,
            shareImgHidden: false,
            shareImgSrc : '',// 画布转成图片的临时地址
        },
    
        /**
         * // 显示遮罩层
         */
        showModal: function () {
            let that = this;
            let animation = wx.createAnimation({
                duration: 200,
                timingFunction: "linear",
            });
            that.animation = animation;
            animation.translateY(animationShowHeight).step();
            that.setData({
                animationData: animation.export(),
                showModalStatus: true
            });
            setTimeout(function () {
                animation.translateY(0).step();
                that.setData({
                    animationData: animation.export()
                })
            }.bind(that), 200);
    
            //canvas绘制文字和图片
            const ctx = wx.createCanvasContext('shareImg');
            let bgImg = '../../img/car.png';
            let headImg = '../../img/headImg.png';
            let xcxImg = '../../img/weixin2.png';
    
            let ImgHeight = 250;
            let ImgWidth = 250;
            //首图位置
            ctx.drawImage(bgImg, 53, 10, ImgWidth, ImgHeight);
            ctx.setFillStyle('white');
            ctx.fillRect(30, 10, 23, ImgHeight);
            ctx.setFillStyle('white');
            ctx.fillRect(303, 10, 23, ImgHeight);
    
            ctx.setFillStyle('white');
            ctx.fillRect(30, ImgHeight+10, 296, 180);
            //头像位置
            ctx.setFillStyle('#ececec');
            ctx.fillRect(42, ImgHeight-10, 60, 60);
            ctx.setFillStyle('white');
            ctx.fillRect(40, ImgHeight-12, 60, 60);
            ctx.drawImage(headImg, 45, ImgHeight-7, 50, 50);
            //昵称
            ctx.setFontSize(14);
            ctx.setFillStyle('#888888');
            ctx.fillText('昵称', 110, ImgHeight + 25);
    
            ctx.setFontSize(14);
            ctx.setFillStyle(config.fontColor);
            ctx.fillText('“快来跟我一起抢”', 105, ImgHeight + 45);
    
            ctx.setFontSize(15);
            ctx.setFillStyle('#333333');
            let str = 'RumbaTime时尚手表潮流时装女表电子钢带石英表美国正品进口表';
            let height = that.drawText(ctx, str, 45, ImgHeight + 70, 30, 265);// 调用行文本换行函数
            ctx.setFontSize(13);
            ctx.setFillStyle(config.fontColor);
            ctx.fillText('￥', 45, ImgHeight + 65 + height);
            ctx.setFontSize(20);
            ctx.setFillStyle(config.fontColor);
            ctx.fillText('1999.00', 60, ImgHeight + 65 + height);
    
            ctx.setFillStyle('#999999');
            ctx.setFontSize(12);
            ctx.fillText('￥', 140, ImgHeight + 65 + height);
            ctx.setFontSize(16);
            ctx.fillText('1999.00', 150, ImgHeight + 65 + height);
    
            ctx.moveTo(140, ImgHeight + 60 + height);
            ctx.lineTo(210, ImgHeight + 60 + height);
            ctx.stroke('#999999');
    
            ctx.setFontSize(14);
            ctx.setFillStyle('#888888');
            ctx.fillText('长按识别小程序码访问', 45, ImgHeight + 85 + height);
    
            //二维码
            ctx.drawImage(xcxImg, 240, ImgHeight + height + 30, 70, 70);
            ctx.draw();
    
            //canvas画布转成图片
            setTimeout(function() {
                wx.canvasToTempFilePath({
                    x: 30,
                    y: 10,
                    width: 300,
                    height: 430,
                    destWidth: 900,//生成图片的大小设置成canvas大小的3倍
                    destHeight: 1290,
                    canvasId: 'shareImg',
                    success: function(res) {
                        that.setData({
                            shareImgSrc : res.tempFilePath
                        });
                    },
                    fail:function (res) {
                        wx.showToast({
                            title: res.errMsg,
                            icon : 'none',
                            duration : 1000,
                        });
                    }
                });
            }, 500);
            that.setData({
                shareImgHidden: true,
            });
        },
    
        /**
         * 保存到相册
         */
        saveShareImg : function () {
            let that = this;
            console.log(that.data.shareImgSrc);
            setTimeout(function () {
                wx.saveImageToPhotosAlbum({
                    filePath : that.data.shareImgSrc,
                    success : function (res) {
                    },
                    fail : function (error) {
                        console.log(error.errMsg);
                        wx.showModal({
                            title : '提示',
                            content : '请允许保存图片到相册',
                        });
                    },
                });
            }, 500);
        },
    
        /**
         * 绘制多行文本
         * @param ctx canvas对象
         * @param str 文本
         * @param leftWidth 距离左侧的距离
         * @param initHeight 距离顶部的距离
         * @param titleHeight 文本的高度
         * @param canvasWidth 文本的宽度
         * @returns {*}
         */
        drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
            let lineWidth = 0;
            let lastSubStrIndex = 0; //每次开始截取的字符串的索引
            for (let i = 0; i < str.length; i++) {
                lineWidth += ctx.measureText(str[i]).width;
                if (lineWidth > canvasWidth) {
                    ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
                    initHeight += 22; //22为 文字大小20 + 2
                    lineWidth = 0;
                    lastSubStrIndex = i;
                    titleHeight += 22;
                }
                if (i == str.length - 1) { //绘制剩余部分
                    ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
                }
            }
            // 标题border-bottom 线距顶部距离
            titleHeight = titleHeight + 10;
            return titleHeight;
        },
    
    
        /**
         * // 隐藏遮罩层
         */
        hideModal: function () {
            let that = this;
            let animation = wx.createAnimation({
                duration: 200,
                timingFunction: "linear",
                delay: 0
            });
            that.animation = animation;
            animation.translateY(animationShowHeight).step();
            that.setData({
                animationData: animation.export(),
            });
            setTimeout(function () {
                animation.translateY(0).step();
                that.setData({
                    animationData: animation.export(),
                    showModalStatus: false
                })
            }.bind(that), 200);
        },
    
        onShow:function(){
            let that = this;
            wx.getSystemInfo({
                success: function(res) {
                    animationShowHeight = res.windowHeight;
                }
            });
        },
    
        /**
         * 转发
         */
        onShareAppMessage: function () {
            let that = this;
            return {
                title: that.data.shopName,
                path: '/pages/detail/detail?id=' + 5,
            }
        },
    });

![70][]![70 1][]

参考：[https://blog.csdn.net/baozhuona/article/details/78570483][https_blog.csdn.net_baozhuona_article_details_78570483]

[70]: https://img-blog.csdn.net/2018101710575332?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ2MTQ4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220506/da17205873104a168b3b949bf4d61776.png
[https_blog.csdn.net_baozhuona_article_details_78570483]: https://blog.csdn.net/baozhuona/article/details/78570483

发表评论取消回复

表情：

评论列表（有 0 条评论，231人围观）

还没有评论，来说两句吧...

相关阅读

相关 crmeb小程序商品信息分享到朋友圈教程

小程序商品信息界面分享到朋友圈加上以下代码，适合大部分用uniapp打包的，原生小程序一般也是没问题的在\\view\\uni-app\\pages\\goods\_det

╰半夏微凉°/ 2023年01月15日 03:52/ 0 赞/ 115 阅读

相关微信公众号分享到朋友朋友圈

首先哈，我用的是uni-app写的代码，把分享也写在项目里不行，会报错，跨域问题，可能有解决方法，但目前我没有解决，希望能解决的可以告诉我方法然后用了另外一种方法，就是单

﹏ヽ暗。殇╰゛Y/ 2022年11月26日 15:58/ 0 赞/ 248 阅读

相关 uniapp微信小程序，发送给朋友，分享到朋友圈配置

1. ![20210927103856588.png][] export default { share(op){ },

心已赠人/ 2022年09月13日 04:07/ 0 赞/ 232 阅读

相关微信小程序如何支持分享给朋友和分享到朋友圈？如何解决分享朋友圈灰色问题

微信小程序分享给朋友和分享到朋友圈，都需要在小程序编写代码实现。 1.官方文档转发官方文档：[https://developers.weixin.qq.com/min

- 日理万妓/ 2022年09月10日 14:28/ 0 赞/ 2584 阅读

相关微信分享到朋友圈，分享给朋友JS代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>微信分享</

待我称王封你为后i/ 2022年08月06日 00:10/ 0 赞/ 221 阅读

相关微信分享页面到朋友圈

WeixinController import java.util.HashMap; import java.util.Map; import j

曾经终败给现在/ 2022年06月10日 03:53/ 0 赞/ 312 阅读

相关小程序分享之分享到朋友圈

1. 点击分享弹出一个动画出现分享类型 2. canvas绘制文字和图片到画布 3. 给用户展示画布，画布转成图片 4. 当用户点击保存卡片时，将图片保存到相册

Bertha 。/ 2022年05月09日 18:16/ 0 赞/ 232 阅读

相关小程序生成小程序码分享朋友圈

小程序实现分享公司很多时候都会想要传播自己的小程序，从而获取更多的流量，从而分享朋友圈的功能就诞生了。分享步骤：一、通过canvas组件把要分享出去的东西画出来

- 日理万妓/ 2022年03月14日 17:58/ 0 赞/ 328 阅读

相关 uniapp 微信小程序分享给微信好友与分享到朋友圈功能

微信小程序分享 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

た入场券/ 2021年07月25日 20:19/ 0 赞/ 662 阅读

相关小程序分享好友，分享朋友圈

分享微信好友分享按钮 <button open-type="share" class="bot_btn" style="background: FF3162;">

野性酷女/ 2021年07月24日 23:55/ 0 赞/ 555 阅读