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

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

说明

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


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

微信小程序跳转小程序

以前小程序跳小程序直接通过api调用跳转即可,但在2018.11.1下午微信公众平台通知需做navigateToMiniProgramAppIdList配置,否则无法提交审核,配置要跳转的微信小程序id ,最多不能超过10个。

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

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

小程序开发的一些细节,你有注意吗?

我认为小程序是一个没有什么技术含量的东西,特别是现在有了组件库,而且小程序生态不断完善的情况下,只要对着文档慢慢写就好,就是时间的问题。然后这里也不是教大家怎么去写程序之类的,而是本人在经历过后的一些小建议

优雅解决微信小程序授权登录需要button触发

聊一聊最近的一个项目,这个项目是一个收书、售书的小程序,有商城、专栏、信息发布论坛等功能。虽然不是面向所有用户,但要求无论用户是否授权都皆可使用,但同时也要求部分功能对不授权的用户限制开放。

微信小程序WXS之谜

微信创造了 WXS ,除了提高性能,还有什么原因?WXS(WeiXin Script)是微信创造的一套脚本语言,它的官方说法是:“WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致”。

腾讯出品的微信小程序有哪些?

腾讯wifi一键连;识花君;企鹅医典;vgo微海报;腾讯AI体验中心;食物健康测评;腾讯地图+;微信辟谣助手;腾讯文档;多媒体AI平台;微云;微信发票助手

微信小程序_实现动画旋转的多种方式

三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多

小程序获取用户信息

其实获取用户信息,一种是获取权限的,一种是不用获取权限,前者获取到的信息更多,包含一些敏感信息,包括给getaccessToken接口需要传的参数,后者就是简单获取一些头像、昵称等信息

Remax:使用真正的 React 构建小程序

Remax 是基于真正 React 的小程序构建工具,本文由 Ant Design 团队的 Mack 执笔,让我们跟随作者一起了解 Remax。因为 React 是我们最熟悉的技术。小程序糟糕的 API 设计已经有很多文章吐槽

小程序静默登录方案设计

OpenId 是一个用户对于一个小程序/公众号的标识,开发者可以通过这个标识识别出用户。UnionId 是一个用户对于同主体微信小程序/公众号/APP 的标识,开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过UnionId,实现多个小程序、公众号、甚至 APP 之间的数据互通。

点击更多...

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