1.微信小程序暂时没有分享到朋友圈的功能,分享的思路是用canvas画布生成一张分享图片,保存到相册,用户将带有分享二维码的图片发到朋友圈,其他人可以识别图中二维码的方式进入小程序的指定分享页面。可参考智行火车票的助力抢票功能。
2.
3.1、wxml文件
viewclass='share'canvascanvas-id="shareCanvas"style="width:300px;height:380px"/canvas/viewviewclass='btn-box'buttonbindtap='downloadImg'分享到朋友圈/button/view4.2、wxss样式文件(如果不想显示canvas,可以将canvas定位到可视区域外部)
page{background:#eee;}.share{width:300px;height:380px;position:fixed;left:0;right:0;top:0;bottom:100rpx;margin:auto;}.btn-box{padding:1060rpx60rpx060rpx;}button{background:darkturquoise;}5.3、js文件
Page({data:{sharebg:'http://qiniu.jnwtv.com/H520181206092255188568494.png',//分享底部背景图shareTitle:'哈哈哈男孩从小就没有地位,看来一万个心酸哈哈哈男孩从小就没有地位,看来一万个心酸',//分享标题shareCoverImg:'http://qiniu.jnwtv.com/H520181210164154569520223.jpeg',//分享封面图shareQrImg:'http://qiniu.jnwtv.com/H520181210164146322557972.jpg',//分享小程序二维码userInfo:{headImg:'http://qiniu.jnwtv.com/H520181210164138180428653.jpg',//用户头像nickName:'打豆豆',//昵称},seeDate:'2018-12-04',//看视频日期},onLoad:function(options){},downloadImg:function(){letthat=this;//创建画布constctx=wx.createCanvasContext('shareCanvas')//白色背景ctx.setFillStyle('#fff')ctx.fillRect(0,0,300,380)ctx.draw()//下载底部背景图wx.getImageInfo({src:that.data.sharebg,success:(res1)={ctx.drawImage(res1.path,0,250,300,130)//下载视频封面图wx.getImageInfo({src:that.data.shareCoverImg,success:(res2)={ctx.drawImage(res2.path,0,0,300,168)//分享标题//ctx.setTextAlign('center')//文字居中ctx.setFillStyle('#000')//文字颜色:黑色ctx.setFontSize(20)//文字字号:20pxif(that.data.shareTitle.length=14){//不用换行ctx.fillText(that.data.shareTitle,10,200,280)}elseif(that.data.shareTitle.length=28){//两行letfirstLine=that.data.shareTitle.substring(0,14);letsecondLine=that.data.shareTitle.substring(14,27);ctx.fillText(firstLine,10,200,280)ctx.fillText(secondLine,10,224,280)}else{//超过两行letfirstLine=that.data.shareTitle.substring(0,14);letsecondLine=that.data.shareTitle.substring(14,27)+'...';ctx.fillText(firstLine,10,200,280)ctx.fillText(secondLine,10,224,280)}//下载二维码wx.getImageInfo({src:that.data.shareQrImg,success:(res3)={letqrImgSize=70ctx.drawImage(res3.path,212,256,qrImgSize,qrImgSize)ctx.stroke()ctx.draw(true)//用户昵称ctx.setFillStyle('#000')//文字颜色:黑色ctx.setFontSize(14)//文字字号:16pxctx.fillText(that.data.userInfo.nickName,38,284)//观看日期ctx.setFillStyle('#999')//文字颜色:黑色ctx.setFontSize(10)//文字字号:16pxctx.fillText('在'+that.data.seeDate+'观看这个视频',38,298)//下载用户头像wx.getImageInfo({src:that.data.userInfo.headImg,success:(res4)={//先画圆形,制作圆形头像(圆心x,圆心y,半径r)ctx.arc(22,284,12,0,Math.PI*2,false)ctx.clip()//绘制头像图片letheadImgSize=24ctx.drawImage(res4.path,10,272,headImgSize,headImgSize)//ctx.stroke()//圆形边框ctx.draw(true)//保存到相册wx.canvasToTempFilePath({canvasId:'shareCanvas',success:function(res){wx.saveImageToPhotosAlbum({filePath:res.tempFilePath,success:function(res){wx.showToast({title:'分享图片已保存到相册'})}})}},this)}})}})}})}})}})6.4、生成canvas的图片资源需要缓存到本地,所以需要在微信公众平台,将需要用到的分享图片,包括二维码的图片域名添加到微信安全域名范围内,否则会报下载图片失败的错误。刚开始也可以将微信开发者工具的校验安全域名关掉,进行测试。开发者工具对canvas图片的生成可能会有问题,请尽量使用真机测试。
7.5、通过api获取的小程序二维码是二进制格式,后台返回的图片应该是base64形式的图片,前端需要把二维码base64格式转换成本地图片,方法见我的另一篇博客https://blog.csdn.net/bocongbo/article/details/84954567
小程序如何分享朋友圈-微信小程序分享朋友圈-小程序分享
浏览量:2322
时间:
来源:不求甚解bc
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。
最新资讯
-

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。 -

零代码 + AI 双轮驱动|即速应用解锁人工智能小程序开发新范式
无需代码、无需 AI 算法功底,普通人也能快速搭建智能小程序。即速应用将人工智能与零代码开发深度融合,推出 AI 智能生成能力,用户通过自然语言描述需求,AI 自动生成小程序页面、功能模块与后台配置,覆盖商城、预约、同城、社区团购等全场景。平台内置 AI 智能推荐、智能客服、用户画像分析等能力,一键对接微信生态,打通视频号、企业微信、短信跳转,帮企业快速落地 AI 应用,抢占智慧经营先机,让每家企业都拥有 AI 驱动的智慧店铺。












