如何把微信小程序分享给别人(微信小程序怎样转发到朋友圈)

来源 |
   https://www.cnblogs.com/MohunBlogs/archive/2018/05/23/9079942.html

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友。小程序如何分享到朋友圈呢?我提供的方法是,使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

再通过发朋友圈的方式,选择保存的图片,当用户浏览朋友圈时,可以长按图片、识别图中二维码进入小程序。

效果展示:

准备工作和小程序配置(步骤一和步骤二)

配置小程序下载域名(不效验合法域名,可忽略此选项),准备一张带有小程序二维码的图片、一张背景图、内容缩略图

Page({
  data: {
    bgImg: "http://image.lqmohun.com/canvasbg.jpg",  //背景图
    dataImg: "http://image.lqmohun.com/ceshi.jpg",   //内容缩略图
    ewrImg: "http://image.lqmohun.com/erweima.jpg",  //小程序二维码图片
    systemInfo: null,  //系统类型
    canvasWidth:0,   //canvas的宽
    canvasHeight: 0   //canvas的高
  },

步骤三:下载需要的图片资源到本地

downloadImages: function () {

    let that = this;
    wx.downloadFile({  //背景图
      url: that.data.bgImg,
      success: function (res) {
        wx.downloadFile({  //内容缩略图
          url: that.data.dataImg,
          success: function (res1) {
            wx.downloadFile({
              url: that.data.ewrImg,
              success: function (res2) {//  小程序二维码图
                that.convas(res.tempFilePath, res1.tempFilePath, res2.tempFilePath);
              },
              fail: function () {
              }
            });
          }
        });
      }
    })
  },

步骤四:将需要分享的信息绘制成图片

convas: function (bgImg, dataImg, ewrImg) {  
    let that = this;
    var ctx = wx.createCanvasContext('myCanvas');
    var scWidth = that.data.systemInfo.windowWidth;
    var scHeight = that.data.systemInfo.screenHeight;
    var defaultHeight = 0.020 * that.data.systemInfo.screenHeight;
    //第一步:刻画背景图
    ctx.drawImage(bgImg, 0, 0, scWidth, scHeight);
    //第二步:刻画背景色
    ctx.setFillStyle('white');
    ctx.fillRect(20, 30, scWidth-40, scHeight-60);
    //第三步:刻画内容缩略图
    var imgHeight = parseInt(this.imageProportion());
    ctx.drawImage(dataImg, 20, 30, scWidth - 40, imgHeight);
    //第三步:刻画标题
    ctx.setFontSize(0.056 * scWidth);
    ctx.setFillStyle('#333333');
    ctx.setTextAlign('center');
    ctx.fillText("食物美容,远离肌肤衰老", (scWidth) / 2, imgHeight   63   defaultHeight );
    //第四步:刻画内容;(备注:canvas好像没有自动换行,有需要此步骤的同学,可根据canvas宽度,设置文字个数)
    ctx.setFontSize(0.044 * scWidth)
    ctx.setFillStyle('#333333');
    ctx.setTextAlign('left');
    ctx.fillText("简介:岁月如刀,刀刀催人老,到我们25", 35, imgHeight   100   defaultHeight);
    ctx.fillText("岁的时候,皮肤就开始进入衰老期,皱纹", 35, imgHeight   125   defaultHeight); 
    ctx.fillText("、色斑。皮肤松弛等现象逐渐出现,这时", 35, imgHeight   150   defaultHeight);
    ctx.fillText(",抗衰老工程也正式展开。", 35, imgHeight   175   defaultHeight);
  //  第五步:刻画小程序码
    ctx.drawImage(ewrImg, 35, imgHeight   200   defaultHeight, 120, 120);
    //第六步:提示用户,长按图片下载或分享
    ctx.setFontSize(0.050 * scWidth)
    ctx.setFillStyle('#333333')
    ctx.fillText('长按码查看详情', 165, imgHeight   250   defaultHeight);
    ctx.fillText('小程序名字', 165, imgHeight   280   defaultHeight);
    //第七步将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中

    ctx.draw(false, function (e) {
      //第八步:生成图片并预览
      that.imageGeneratePreview();
    });
  }

小程序canvas做测试时,文字好像不能自动换行。提供一种比较笨的方法,根据屏幕宽度判断文字个数,循环绘制文字就行了;

this.imageProportion()的方法获取缩略图等比例缩小之后的宽高。defaultHeight不同宽高屏幕,绘制内容上下间距优化。

步骤五:将canvas画布导出成指定大小图片、并预览

imageGeneratePreview: function () {
    let that=this;
    //把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径
    wx.canvasToTempFilePath({
      width: this.data.systemInfo.windowWidth,
      height: this.data.systemInfo.screenHeight,
      destWidth: this.data.systemInfo.windowWidth * 3,
      destHeight: this.data.systemInfo.screenHeight * 3,
      canvasId: 'myCanvas',
      success: function (res) {
        //预览图片
        wx.previewImage({
          urls: res.tempFilePath.split(','),   // 需要预览的图片http链接列表
          fail: function (res) {
            console.log("预览图片失败"   res)
          }
        })
      },
      fail: function (res) {
        console.log("出错了:" jsON.stringify(res));
      },complete:function(){
        wx.hideLoading();
      }
    })
  },

备注:

测试手机(苹果5,华为)

本文章只提供一种思路,具体排版还请以实际项目为主。

我是@半糖学前端 ,专注前端技术领域分享,关注我和我一起学习,共同进步!

(0)

相关推荐

  • 手机UC浏览器中的小视频如何转发到朋友圈

    UC浏览器是我们现在经常使用的浏览器软件之一,我们经常会在浏览器中查看一些小视频,如果遇到有趣的小视频,那么我们就可以将这个视频转发到朋友圈.接下来小编就教大家怎样操作.具体如下:1. 首先我们打开手 ...

  • 圈蜜微信助手如何分享信息到微信朋友圈?

    圈蜜微信助手如何分享信息到微信朋友圈?在圈蜜微信助手广场看到喜欢的内容信息想要分享微信朋友圈该怎么做呢?下面让小编来教大家圈蜜微信助手分享信息到朋友圈方法吧! 1)首先在手机桌面打开【圈蜜微信助手】, ...

  • 突破微信封锁 微信小视频如何转发到朋友圈

    随着微信的录制小视频发朋友圈功能的出现,很多朋友看到别人的视频后,苦于不能转发到自己的朋友圈而感到苦恼,目前朋友圈内的小视频只有转发(转发给好友而不是朋友圈).收藏功能,没有随手转发到自己的朋友圈的功 ...

  • 微信朋友圈小视频怎么免费转发到朋友圈?

    随着微信的普及很多用户选择微信聊天,很多一部分被微商占据,以前的朋友圈发一些图片加文字,已经不能满足微商群体.现在的朋友圈全是小视频,而且小视频能更好的展现我们的产品,没有这项技能怎么在微商圈混.那么 ...

  • 如何将微信上别人发给自己的视频发布到朋友圈

    有时候,朋友会在微信上发一些有趣的小视频给我们,我们看完之后会想要转发给朋友或者发到朋友圈,那么如何将微信上别人发给自己的视频发布到朋友圈呢? 操作方法 01 点击进入手机桌面微信图标,登录自己的微信 ...

  • 一分钟学会将微信朋友发来的小视频转发到朋友圈

    在这里介绍将微信朋友发来的小视频转发到朋友圈的方法,希望本指南能帮到你. 操作方法 01 手机上登录微信:打开朋友的聊天界面. 02 手指点一下视频,打开视频,长按视频界面,在屏幕下方显示出面板,点击 ...

  • iPhone版-如何把朋友发来的小视频转发到朋友圈

    苹果iPhone手机中转发的小视频如何转发到朋友圈,分享 操作方法 01 第一步:打开聊天窗口,找到需要分享的小视频:长按视频出现操作项,选择"收藏" 02 第二步:打开个人收藏 ...

  • 微信看一看视频怎么转发到朋友圈?

    在我们的微信朋友圈里面,有看一看这个东西,和我们的QQ一样,QQ里面也是有看一看这个内容的,我们现在就来学习下微信看一看里面的视频怎么转发到朋友圈里面? 操作方法 01 我们打开手机微信,接着我们点下 ...

  • 怎么把别人发的小视频发到自己朋友圈

    很多小伙伴在收到一些搞笑.惊奇的小视频时,想转发到朋友圈跟好友们分享,这时却不知道怎么做,下面小编就手把手教你怎么把收到的小视频发到自己的朋友圈. 操作方法 01 其实只需要两步: 1.保存小视频 2 ...

  • 今日头条小视频怎么转发到朋友圈

    今日头条小视频有很多非常有意思的短视频,那怎么把这些有趣的小视频转发到朋友圈呢? 操作方法 01 在今日头条首页中找到底部的[小视频]选项并点击打开进入小视频. 02 在小视频的推荐界面中点击打开想要 ...