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


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帮助之筛选查找 children([expr])
Jan 31 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 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
一个ftp类(ini.php)
2006/10/09 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
javascript 闭包详解
2015/07/02 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python文件写入write()的操作
2019/05/14 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
房屋继承公证书
2014/04/10 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
门面房租房协议书
2014/12/01 职场文书
迎新生晚会主持词
2015/06/30 职场文书
五年级作文之成长
2019/09/16 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python