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


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.post用法示例代码
Jan 03 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
创建一个类Person的简单实例
May 17 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
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中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
python生成ppt的方法
2018/06/07 Python
python format 格式化输出方法
2018/07/16 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
会议开场欢迎词
2014/01/15 职场文书
运动会稿件200字
2014/02/07 职场文书
优秀员工推荐信
2014/05/10 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
法人委托书范本
2014/09/15 职场文书
中学生检讨书范文
2014/11/03 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript