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


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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
js propertychange和oninput事件
Sep 28 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
vue实现简单loading进度条
Jun 06 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
js实现数字滚动特效
Dec 16 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
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强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
php实现计数器方法小结
2015/01/05 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python构造函数及解构函数介绍
2015/02/26 Python
Python中的推导式使用详解
2015/06/03 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
《中彩那天》教学反思
2014/02/22 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
Redis 哨兵集群的实现
2021/06/18 Redis