关闭

微信小程序通过保存图片分享到朋友圈

时间: 2018-07-26阅读: 2890标签: 小程序

说明

首先说明一点,小程序内是不能直接分享到朋友圈的。所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。参考市面上支持分享的应用,基本都是这种实现方式。


1. 准备阶段。通过服务器获取小程序码

这里可以参考下微信的官方文档,给后台指定的参数和路径等信息,让后台生成指定的小程序码。然后调用wx.getImageInfo将后台生成的小程序码保存起来。

注意一定要仔细看下微信的文档,如果生成小程序码的路径在线上的小程序中不存在,将会生成失败。这点也很蛋疼,很不方便调试。

wx.getImageInfo({                       
    src:'https://xxx.jpg',//服务器返回的带参数的小程序码地址
    success: function (res) {
        //res.path是网络图片的本地地址
        qrCodePath = res.path;
    },
    fail: function (res) {
        //失败回调
    }
});


2. 通过canvas绘制所需信息

准备好所有的图片之后就可以通过canvas绘制了,然后再将canvas导出为图片。关于绘制这块,可以参考微信的canvas api,下面的基本都是查着api的方法走的。

其中需要注意的有几点。

1、是不知道绘出来的文字长度,所以不知道文字到底什么时候该换行,所以针对商品标题,可能多行的数据固定了一行18个字符。

2、是关于绘制图片的导出,按照官方api的说法应该在draw()完成的回调中执行,但是通过 
canvasCtx.draw(false,function(res){}); 

这种方式,一直不回调完成。不知道哪里出问题了。所以最后只好加了一个延时去保存图片。

/**
 * 绘制分享的图片
 * @param goodsPicPath 商品图片的本地链接
 * @param qrCodePath 二维码的本地链接
 */
drawSharePic: function (goodsPicPath, qrCodePath) {
    wx.showLoading({
        title: '正在生成图片...',
        mask: true,
    });
    //y方向的偏移量,因为是从上往下绘制的,所以y一直向下偏移,不断增大。
    let yOffset = 20;
    const goodsTitle = this.data.orderDetail.paltProduct.name1;
    let goodsTitleArray = [];
    //为了防止标题过长,分割字符串,每行18个
    for (let i = 0; i < goodsTitle.length / 18; i++) {
        if (i > 2) {
            break;
        }
        goodsTitleArray.push(goodsTitle.substr(i * 18, 18));
    }
    const price = this.data.orderDetail.price;
    const marketPrice = this.data.orderDetail.marketPrice;
    const title1 = '您的好友邀请您一起分享精品好货';
    const title2 = '立即打开看看吧';
    const codeText = '长按识别小程序码查看详情';
    const imgWidth = 780;
    const imgHeight = 1600;

    const canvasCtx = wx.createCanvasContext('shareCanvas');
    //绘制背景
    canvasCtx.setFillStyle('white');
    canvasCtx.fillRect(0, 0, 390, 800);
    //绘制分享的标题文字
    canvasCtx.setFontSize(24);
    canvasCtx.setFillStyle('#333333');
    canvasCtx.setTextAlign('center');
    canvasCtx.fillText(title1, 195, 40);
    //绘制分享的第二行标题文字
    canvasCtx.fillText(title2, 195, 70);
    //绘制商品图片
    canvasCtx.drawImage(goodPicPath, 0, 90, 390, 390);
    //绘制商品标题
    yOffset = 490;
    goodsTitleArray.forEach(function (value) {
        canvasCtx.setFontSize(20);
        canvasCtx.setFillStyle('#333333');
        canvasCtx.setTextAlign('left');
        canvasCtx.fillText(value, 20, yOffset);
        yOffset += 25;
    });
    //绘制价格
    yOffset += 8;
    canvasCtx.setFontSize(20);
    canvasCtx.setFillStyle('#f9555c');
    canvasCtx.setTextAlign('left');
    canvasCtx.fillText('¥', 20, yOffset);
    canvasCtx.setFontSize(30);
    canvasCtx.setFillStyle('#f9555c');
    canvasCtx.setTextAlign('left');
    canvasCtx.fillText(price, 40, yOffset);
    //绘制原价
    const xOffset = (price.length / 2 + 1) * 24 + 50;
    canvasCtx.setFontSize(20);
    canvasCtx.setFillStyle('#999999');
    canvasCtx.setTextAlign('left');
    canvasCtx.fillText('原价:¥' + marketPrice, xOffset, yOffset);
    //绘制原价的删除线
    canvasCtx.setLineWidth(1);
    canvasCtx.moveTo(xOffset, yOffset - 6);
    canvasCtx.lineTo(xOffset + (3 + marketPrice.toString().length / 2) * 20, yOffset - 6);
    canvasCtx.setStrokeStyle('#999999');
    canvasCtx.stroke();
    //绘制最底部文字
    canvasCtx.setFontSize(18);
    canvasCtx.setFillStyle('#333333');
    canvasCtx.setTextAlign('center');
    canvasCtx.fillText(codeText, 195, 780);
    //绘制二维码
    canvasCtx.drawImage(qrCodePath, 95, 550, 200, 200);
    canvasCtx.draw();
    //绘制之后加一个延时去生成图片,如果直接生成可能没有绘制完成,导出图片会有问题。
    setTimeout(function () {
        wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 390,
            height: 800,
            destWidth: 390,
            destHeight: 800,
            canvasId: 'shareCanvas',
            success: function (res) {
                that.setData({
                    shareImage: res.tempFilePath,
                    showSharePic: true
                })
                wx.hideLoading();
            },
            fail: function (res) {
                console.log(res)
                wx.hideLoading();
            }
        })
    }, 2000);
},


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/954

微信小程序picker组件两列关联使用方式

在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变

小程序多余文本省略号显示

如何在 wxml 页面中截取数据?取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的。那还有 css 啊,不一样可以做到吗?但是个人觉得 css 复用性太差,暂不考虑。

小程序多端框架全面测评

最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?到底应该用哪个?作为 Taro 开发团队一员,笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣。

使用scss开发小程序(各种小程序平台通用)

微信小程序的wxss、阿里旗下淘宝、支付宝小程序的acss等等语法很类似原生css,但是在web开发里用惯了动态css语言,再写回原生css很不习惯,尤其是父子样式的嵌套写法非常繁琐。

从VantComponent 谈小程序维护

在开发小程序的时候,我们总是期望用以往的技术规范和语法特点来书写当前的小程序,所以才会有各色的小程序框架,例如 mpvue、taro 等这些编译型框架

微信小程序分包加载

开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必须包含一个主包,所谓的主包,即放置默认启动页/TabBar 页面

小程序--人脸识别功能(百度ai)

接入流程:1. 按照文档获取AppID、API Key、Secret Key,进行Access Token(用户身份验证和授权的凭证)的生成,2. 选择人脸识别-->人脸检测,人脸识别接口分为V2和V3两个版本,确认在百度云后台获得的是V2还是v3版本接口权限。

微信小程序页面返回按键控制

今天在开发公司内部的小程序项目时,遇到了一个问题,就是控制手机返回按键的问题,本来我以为很快就可以解决的,没想到最后我用了快一天的时间,才给做好,而且还不是我最初想到的方法。

微信小程序Socket的实现_基于socket-io

在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。

小程序的节流与防抖

在屏幕滚动与拖拽的时候,经常会用到一些持续触发的事件,而这类事件不可控触发频率非常高,大大影响了性能,而我们想要让其变得可控,就可以用到节流和防抖两种方案。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!