关闭

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

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

说明

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


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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

微信小程序推广方式_最有效的小程序推广模式

当小程序开发完成后,就需要进行推广操作。当然推广的前提是核心功能是否能够满足用户需求,下面总结一些具体的运作方式。和大多数APP的搜索个性一样,用户搜索小程序名称就能进入小程序界面。我们需要做好关键词优化,通过搜索-微信指数

小程序获取用户信息

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

微信小程序-页面跳转与参数传递

微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转。

小程序保存图片到本地

保存图片到本地相册,需要用户允许相册权限;但是有时客户手滑或者是特别原因点击了拒绝授权,我们需要打开权限列表,让客户手动打开此项权限;

微信小程序跳转小程序

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

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

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

支付宝小程序个人开发者,但暂未开放支付接口

支付宝小程序今日正式面向个人开发者开放公测。这是继微信之后,业内第2家面向个人开发者开放的小程序平台。有开发能力的个人用户可访问支付宝小程序平台,扫码验证个人身份以后即可开始支付宝小程序账号申请并进行代码开发。

扩展微信小程序 Page 构造函数,修改生命周期函数

微信小程序扩展: 将公共方法绑定到Page上、扩展,修改生命周期函数。将自定义的内容单独封装到一个js文件中,然后在app.js中引用这个文件即可

使用CryptoJS在小程序中实现加解密

本文使用md5和rc4作为示例代码,可以根据实际项目选择不同的加密方式:在百度静态资源公共库中搜索crypto-js、用到CryptoJS的js放到同一个文件中,并在文件最下方暴露接口module.exports = CryptoJS

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

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

点击更多...

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