微信小程序通过保存图片分享到朋友圈
说明
首先说明一点,小程序内是不能直接分享到朋友圈的。所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。参考市面上支持分享的应用,基本都是这种实现方式。
准备阶段
- 通过服务器获取小程序码
这里可以参考下微信的官方文档,给后台指定的参数和路径等信息,让后台生成指定的小程序码。然后调用wx.getImageInfo将后台生成的小程序码保存起来。
注意一定要仔细看下微信的文档,如果生成小程序码的路径正式服务器不存在,将会生成失败。这点也很蛋疼,很不方便调试。
wx.getImageInfo({ src:'https://xxx.jpg',//服务器返回的带参数的小程序码地址success: function (res) {//res.path是网络图片的本地地址qrCodePath = res.path;},fail: function (res) {//失败回调}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 通过canvas绘制所需信息
准备好所有的图片之后就可以通过canvas绘制了,然后再将canvas导出为图片。关于绘制这块,可以参考微信的canvas api,下面的基本都是查着api的方法走的。
其中需要注意的有几点。
- 是不知道绘出来的文字长度,所以不知道文字到底什么时候该换行,所以针对商品标题,可能多行的数据固定了一行18个字符。
是关于绘制图片的导出,按照官方api的说法应该在draw()完成的回调中执行,但是通过
canvasCtx.draw(false,function(res){});
这种方式,一直不回调完成。不知道哪里出问题了。所以最后只好加了一个延时去保存图片。/*** 绘制分享的图片* @param goodsPicPath 商品图片的本地链接* @param qrCodePath 二维码的本地链接*/ drawSharePic: function (goodsPicPath, qrCodePath) {wx.showLoading({title: '正在生成图片...',mask: true,});//y方向的偏移量,因为是从上往下绘制的,所以y一直向下偏移,不断增大。let yOffset = 20;const goodsTitle = this.data.orderDetail.paltProduct.name1;let goodsTitleArray = [];//为了防止标题过长,分割字符串,每行18个for (let i = 0; i < goodsTitle.length / 18; i++) {if (i > 2) {break;}goodsTitleArray.push(goodsTitle.substr(i * 18, 18));}const price = this.data.orderDetail.price;const marketPrice = this.data.orderDetail.marketPrice;const title1 = '您的好友邀请您一起分享精品好货';const title2 = '立即打开看看吧';const codeText = '长按识别小程序码查看详情';const imgWidth = 780;const imgHeight = 1600;const canvasCtx = wx.createCanvasContext('shareCanvas');//绘制背景canvasCtx.setFillStyle('white');canvasCtx.fillRect(0, 0, 390, 800);//绘制分享的标题文字canvasCtx.setFontSize(24);canvasCtx.setFillStyle('#333333');canvasCtx.setTextAlign('center');canvasCtx.fillText(title1, 195, 40);//绘制分享的第二行标题文字canvasCtx.fillText(title2, 195, 70);//绘制商品图片canvasCtx.drawImage(goodPicPath, 0, 90, 390, 390);//绘制商品标题yOffset = 490;goodsTitleArray.forEach(function (value) {canvasCtx.setFontSize(20);canvasCtx.setFillStyle('#333333');canvasCtx.setTextAlign('left');canvasCtx.fillText(value, 20, yOffset);yOffset += 25;});//绘制价格yOffset += 8;canvasCtx.setFontSize(20);canvasCtx.setFillStyle('#f9555c');canvasCtx.setTextAlign('left');canvasCtx.fillText('¥', 20, yOffset);canvasCtx.setFontSize(30);canvasCtx.setFillStyle('#f9555c');canvasCtx.setTextAlign('left');canvasCtx.fillText(price, 40, yOffset);//绘制原价const xOffset = (price.length / 2 + 1) * 24 + 50;canvasCtx.setFontSize(20);canvasCtx.setFillStyle('#999999');canvasCtx.setTextAlign('left');canvasCtx.fillText('原价:¥' + marketPrice, xOffset, yOffset);//绘制原价的删除线canvasCtx.setLineWidth(1);canvasCtx.moveTo(xOffset, yOffset - 6);canvasCtx.lineTo(xOffset + (3 + marketPrice.toString().length / 2) * 20, yOffset - 6);canvasCtx.setStrokeStyle('#999999');canvasCtx.stroke();//绘制最底部文字canvasCtx.setFontSize(18);canvasCtx.setFillStyle('#333333');canvasCtx.setTextAlign('center');canvasCtx.fillText(codeText, 195, 780);//绘制二维码canvasCtx.drawImage(qrCodePath, 95, 550, 200, 200);canvasCtx.draw();//绘制之后加一个延时去生成图片,如果直接生成可能没有绘制完成,导出图片会有问题。setTimeout(function () {wx.canvasToTempFilePath({x: 0,y: 0,width: 390,height: 800,destWidth: 390,destHeight: 800,canvasId: 'shareCanvas',success: function (res) {that.setData({shareImage: res.tempFilePath,showSharePic: true})wx.hideLoading();},fail: function (res) {console.log(res)wx.hideLoading();}})}, 2000); },
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
最后看下绘制出来的效果图。
生成图片之后就可以提示用户去保存分享了。
微信小程序通过保存图片分享到朋友圈相关推荐
- 微信小程序将支持分享到朋友圈;美团入局社区团购;Kotlin 1.4-M3 发布 | 极客头条
整理 | 屠敏 头图 | CSDN 下载自东方 IC 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 一分钟 ...
- html 调用weixinsharetimeline,微信小程序使用onShareTimeline分享到朋友圈的方法
最近微信小程序终于公测了一个分享到朋友圈的功能,这对营销来说可是一个很重要的功能啊.如何使用这个功能呢?这里详细介绍一下. 使用到的函数onShareTimeline()与onShareAppMess ...
- 微信小程序如何直接分享到朋友圈?
近日微信终于公开了小程序分享到朋友圈,下面就分享一下技术上如何将小程序分享到朋友圈吧. 官方技术文档如下: 分享到朋友圈(Beta) 从基础库 2.11.3 开始支持 此功能为beta版,暂仅在And ...
- 微信小程序开放「分享到朋友圈」功能
2020年7月7日(据说是6日深夜),一个很特别的日子,微信低调地放开了一个功能:微信小程序"分享到到朋友圈",这个看似微小的变化,对微信小程序来说意义重大. 用fenng大的话说 ...
- uniapp实现微信小程序点亮分享到朋友圈权限
在可分享的页面文件里写: onShareAppMessage(){return {from:"menu"} }, onShareTimeline(){}, 微信官方文档: 效果:
- 重磅:小程序将可分享到朋友圈啦!
昨天(6日)深夜,几张小程序截图在行业中流传,截图显示,小程序已可正式分享到朋友圈. 这表明,微信最大的流量池将向小程序敞开,毫无疑问,小程序也将迎来更大一轮爆发. 如下四张截图,正是部分行业群内流传 ...
- 小程序分享朋友圈_重磅:小程序将可分享到朋友圈
昨天( 6 日)深夜,几张小程序截图在行业中流传,截图显示,小程序已可正式分享到朋友圈. 这表明,微信最大的流量池将向小程序敞开,毫无疑问,小程序也将迎来更大一轮爆发. 如下四张截图,正是部分行业群内 ...
- 微信小程序如何支持分享给朋友和分享到朋友圈?如何解决分享朋友圈灰色问题
微信小程序分享给朋友和分享到朋友圈,都需要在小程序编写代码实现. 目录 1.官方文档 2.分享给朋友,即转发 3.分享到朋友圈 4.常见问题 4.1.分享朋友圈灰色 4.2.如何测试分享给朋友 4.3 ...
- 小程序分享到朋友圈功能_小程序开发日记 分享到朋友圈
贵州 水司楼 图片来自 视频截图 最近微信小程序开始公测小程序分享到朋友圈的功能了.记得前两天刚开始内测时,小程序社区里就不断有人发帖问关于分享到朋友圈的各种问题.很显然大家对这个新特性都特别关心.那 ...
最新文章
- 5G、物联网、人工智能和机器学习将成为2021年最重要的技术
- 996.icu 不加班的程序员有前途吗?
- 计算机缺乏内存将无法运行,电脑增加内存为什么无法启动
- 微软等数据结构+算法面试100题全部答案集锦
- 芙蓉之约 , Serverless 技术实践营 3.25 成都站邀你来参加
- Go 语言web 框架 Gin 练习3
- 基于Xml 的IOC 容器-载入<property>元素
- linux本地mysql与服务器同步数据_linux下指定mysql数据库服务器主从同步的配置实例...
- php 监控文件夹变化,swoole 开发中监听目录文件变化, 自动重启项目
- 二值图像分析—轮廓发现
- Php将mp3转wav,mp3转换成wav的经验方法
- python保存简单网页图片到本地(详细步骤)
- 华为HCNA之OSPF多区域配置实验
- Python爬虫实战之12306抢票开源
- c语言做绘图软件,大佬们,小菜鸟想问一问用vc编译器做简易画图软件
- LINUX SHELL宝塔判断域名变化IP脚本
- 合工大计算机调剂到经济学,合肥工业大学金砖复试调剂经验
- Bootstrap教程简介
- C语言合法标识符(含知识点)
- 室内定位——视觉方法的发展
热门文章
- 游戏像素教程_30个像素爱好者的优秀像素艺术教程
- 计算机的本质:在信息的控制下,利用能量实现运算。(提高单位能耗的计算能力,一直都是IT业发展的方向)
- 【WIN 02】Download Tabby for Win10
- 【Visual C++】游戏开发笔记二十六 DirectX 11各组件的介绍 第一个DirectX 11 Demo的创建
- 《Web前端设计与开发》实验三:HTML+CSS综合实验
- 阿里妈妈漫天:只基于投放技巧的营销将成为历史
- 服务端高并发分布式架构演进之路
- 手里有10万块钱,创业做什么比较好?
- MySQL基础知识测试,文末领取面试资料
- C++ 省略 std:: 前缀