微信小程序分享到朋友圈方法与技巧

更新日期: 2018-05-24阅读量: 3680标签: 技巧

小程序提供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,华为)
  本文章只提供一种思路,具体排版还请以实际项目为主

原文来源:https://www.cnblogs.com/Mohun-Blogs/archive/2018/05/23/9079942.html


站长推荐

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

链接: https://www.fly63.com/article/detial/810

Python高效编程技巧

工作中经常要处理各种各样的数据,遇到项目赶进度的时候自己写函数容易浪费时间。Python 中有很多内置函数帮你提高工作效率!根据条件在序列中筛选数据

17个你可能还不知道 JS 技巧!

传递null时,不采用默认值,而 undefined或未传递任何内容时,将采用默认值。初始化大小为n的数组并填充默认值。数字转字符串/字符串转数字

学好Web前端开发,必要了解的HTML+CSS的技巧有哪些?

HTML+CSS的技巧有哪些?怎么学好Web前端开发?经过Web前端学习的一个过程,每个人都会对前端的认识逐渐由浅入深,由一开始僵硬地使用标签和标签属性进行简单网页布局,到最后能够对网页进行丰富的CSS渲染

Nginx的几个常用配置和技巧

文章列举了几个Nginx常见的,实用的,有趣的配置,希望看过之后能说一句:学到了!一个站点配置多个域名server_name 后跟多个域名即可,多个域名之间用空格分隔

在Vue.js编写更好的v-for循环的6种技巧

在VueJS中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环。首先,我们将讨论大多数Vue开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过设置一个惟一的键属性

几个牛X的js开发技巧

使用 grid ,需要重新创建原始数据,并且每行的列长度可能不匹配, 为了确保不匹配行之间的长度相等,可以使用Array.fill方法。ES6 提供了从数组中提取惟一值的两种非常简洁的方法。不幸的是,它们不能很好地处理非基本类型的数组

Js应用技巧集合

这里我将会对这些应用技巧进行集中描述,如果你觉得遗漏了一些好用的应用技巧,也请在留言中提出,我会及时更新到这篇文章中的。

缩短箭头函数的技巧

使用箭头语法,你可以定义比函数表达式短的函数。在某些情况下,你可以完全省略:参数括号 (param1, param2)、return 关键字、甚至大括号 { }。面就让我们来探讨一下如何使箭头函数简洁明了

11个JavaScript单行代码技巧

如果你想给专业开发人员留下深刻印象,你会怎么做?很简单:用简单的逻辑和尽可能少的代码来解决一个复杂的问题。随着 ES6 箭头函数的引入,可以创建看起来优雅和简单的单行代码。

去除桌面快捷方式上的小箭头

电脑桌面上默认快捷方式左下角是有个小箭头的。很多用户可能不习惯快捷方式小箭头。那怎么去掉呢?新建一个TXT文档(文档的名称自己顺便命名即可),然后把下面的这些英文全部复制到TXT文档内保存。把TXT文档的扩展名改成 .bat

点击更多...

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