微信小程序实现分享朋友圈的图片功能示例


Posted in Javascript onJanuary 18, 2019

本文实例讲述了微信小程序实现分享朋友圈的图片功能。分享给大家供大家参考,具体如下:

由于微信小程序只支持分享给朋友或者群,不支持分享到朋友圈,又有分享到朋友圈这个需求,那就要想办法实现这个需求。查阅各种资料,发现基本思路有两种,一种是后端实现,另一种是前端实现,后端实现的方式这里就不讨论了,因为我是不懂后端的,只会前端的东西,所以这里就记录一下前端的实现方法。

前端要实现分享到朋友群,都是通过canvas做一张图片,然后用户手动分享朋友圈。前端具体要做的就是把要分享的页面用canvas重做一遍,生成一个图片,保存这个图片到用户本地相册。

要想用canvas,需要在页面上使用canvas标签,把它定位到页面之外,以免影响页面,在绘制图片时,图片的地址必须是通过微信下载图片后返回的虚拟地址,要不canvas无法绘制出来,接下来最主要的就是canvas的使用了,小程序的canvas和h5的canvas一样,并没有多大的区别。

下面是一个例子:

首先是在页面上创建canvas

index.wxml

<view class="canvas-box">
    <canvas canvas-id="myCanvas" style="width:100%;height:{{windowHeight}}px;"></canvas>
</view>
<button bindtap='startDraw'>分享朋友圈</button>

写一个样式把canvas定位到页面之外,以免影响页面的效果

.canvas-box{
  width: 100%;
  position: fixed;
  left: 0;
  top: 999999rpx;
}

接下来就是绘图了,具体可以参考绘图文档

startDraw:function(){
 const ctx = wx.createCanvasContext('myCanvas');
  let windowWidth = wx.getSystemInfoSync().windowWidth;
  let windowHeight = wx.getSystemInfoSync().windowHeight;
  let _this=this;
  this.setData({
   scale: 1.6
  });
  ctx.setFillStyle('#333');
  ctx.fillRect(0, 0, windowWidth, 100);
  ctx.setFontSize(20);
  ctx.setFillStyle('#fff');
  ctx.fillText('开始绘制图片', 30, 50);
  ctx.setFillStyle('#FFF');
  ctx.fillRect(0, 70, windowWidth, 600);
  ctx.setFillStyle('#666');
  ctx.setFontSize(19);
  ctx.fillText('我是标题',100, 140);
  ctx.setFontSize(20);
  ctx.fillText('微信小程序文本部分',20 , 170);
  ctx.draw()
}

到这为止,canvas绘图是做完了,现在要把canvas绘制的图形转化为图片,调用微信小程序已有的接口,接上面方法内:

wx.canvasToTempFilePath({
   x: 0,
   y: 0,
   width: windowWidth,
   height: windowHeight,
   destWidth: windowWidth,
   destHeight: windowHeight,
   canvasId: 'myCanvas',
   success: function (res1) {
    console.log('朋友圈分享图生成成功:' + res1.tempFilePath);
   }
});

这样就完成了分享图片的制作。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
ES6数组的扩展详解
Apr 25 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
js+html实现点名系统功能
Nov 05 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue-cli3 karma单元测试的实现
Jan 18 #Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 #Javascript
如何解决.vue文件url引用文件的问题
Jan 18 #Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
vue.js实现的幻灯片功能示例
Jan 18 #Javascript
vue ssr 实现方式(学习笔记)
Jan 18 #Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 #Javascript
You might like
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
详解Python中的四种队列
2018/05/21 Python
python爬取网易云音乐评论
2018/11/16 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
养殖人员的创业计划书范文
2013/12/26 职场文书
会走路的树教学反思
2014/02/20 职场文书
代办委托书怎样写
2014/04/08 职场文书
股权转让协议书
2014/04/12 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
js 实现验证码输入框示例详解
2022/09/23 Javascript