微信小程序分享到朋友圈方法与技巧
来源 | https://www.cnblogs.com/MohunBlogs/archive/2018/05/23/9079942.html
小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友。小程序如何分享到朋友圈呢?我提供的方法是,使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。
再通过发朋友圈的方式,选择保存的图片,当用户浏览朋友圈时,可以长按图片、识别图中二维码进入小程序。
效果展示:
准备工作和小程序配置(步骤一和步骤二)
配置小程序下载域名(不效验合法域名,可忽略此选项),准备一张带有小程序二维码的图片、一张背景图、内容缩略图
Page({ data: { bgImg: "http://image.lqmohun.com/canvasbg.jpg", //背景图 dataImg: "http://image.lqmohun.com/ceshi.jpg", //内容缩略图 ewrImg: "http://image.lqmohun.com/erweima.jpg", //小程序二维码图片 systemInfo: null, //系统类型 canvasWidth:0, //canvas的宽 canvasHeight: 0 //canvas的高 },
步骤三:下载需要的图片资源到本地
downloadImages: function () {let that = this; wx.downloadFile({ //背景图 url: that.data.bgImg, success: function (res) { wx.downloadFile({ //内容缩略图 url: that.data.dataImg, success: function (res1) { wx.downloadFile({ url: that.data.ewrImg, success: function (res2) {// 小程序二维码图 that.convas(res.tempFilePath, res1.tempFilePath, res2.tempFilePath); }, fail: function () { } }); } }); } }) },
步骤四:将需要分享的信息绘制成图片
convas: function (bgImg, dataImg, ewrImg) { let that = this; var ctx = wx.createCanvasContext('myCanvas'); var scWidth = that.data.systemInfo.windowWidth; var scHeight = that.data.systemInfo.screenHeight; var defaultHeight = 0.020 * that.data.systemInfo.screenHeight; //第一步:刻画背景图 ctx.drawImage(bgImg, 0, 0, scWidth, scHeight); //第二步:刻画背景色 ctx.setFillStyle('white'); ctx.fillRect(20, 30, scWidth-40, scHeight-60); //第三步:刻画内容缩略图 var imgHeight = parseInt(this.imageProportion()); ctx.drawImage(dataImg, 20, 30, scWidth - 40, imgHeight); //第三步:刻画标题 ctx.setFontSize(0.056 * scWidth); ctx.setFillStyle('#333333'); ctx.setTextAlign('center'); ctx.fillText("食物美容,远离肌肤衰老", (scWidth) / 2, imgHeight + 63 + defaultHeight ); //第四步:刻画内容;(备注:canvas好像没有自动换行,有需要此步骤的同学,可根据canvas宽度,设置文字个数) ctx.setFontSize(0.044 * scWidth) ctx.setFillStyle('#333333'); ctx.setTextAlign('left'); ctx.fillText("简介:岁月如刀,刀刀催人老,到我们25", 35, imgHeight + 100 + defaultHeight); ctx.fillText("岁的时候,皮肤就开始进入衰老期,皱纹", 35, imgHeight + 125 + defaultHeight); ctx.fillText("、色斑。皮肤松弛等现象逐渐出现,这时", 35, imgHeight + 150 + defaultHeight); ctx.fillText(",抗衰老工程也正式展开。", 35, imgHeight + 175 + defaultHeight); // 第五步:刻画小程序码 ctx.drawImage(ewrImg, 35, imgHeight + 200 + defaultHeight, 120, 120); //第六步:提示用户,长按图片下载或分享 ctx.setFontSize(0.050 * scWidth) ctx.setFillStyle('#333333') ctx.fillText('长按码查看详情', 165, imgHeight + 250 + defaultHeight); ctx.fillText('小程序名字', 165, imgHeight + 280 + defaultHeight); //第七步将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中ctx.draw(false, function (e) { //第八步:生成图片并预览 that.imageGeneratePreview(); }); }
小程序canvas做测试时,文字好像不能自动换行。提供一种比较笨的方法,根据屏幕宽度判断文字个数,循环绘制文字就行了;
this.imageProportion()的方法获取缩略图等比例缩小之后的宽高。defaultHeight不同宽高屏幕,绘制内容上下间距优化。
步骤五:将canvas画布导出成指定大小图片、并预览
imageGeneratePreview: function () { let that=this; //把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径 wx.canvasToTempFilePath({ width: this.data.systemInfo.windowWidth, height: this.data.systemInfo.screenHeight, destWidth: this.data.systemInfo.windowWidth * 3, destHeight: this.data.systemInfo.screenHeight * 3, canvasId: 'myCanvas', success: function (res) { //预览图片 wx.previewImage({ urls: res.tempFilePath.split(','), // 需要预览的图片http链接列表 fail: function (res) { console.log("预览图片失败" + res) } }) }, fail: function (res) { console.log("出错了:"+jsON.stringify(res)); },complete:function(){ wx.hideLoading(); } }) },
备注:
测试手机(苹果5,华为)
本文章只提供一种思路,具体排版还请以实际项目为主。
微信小程序分享到朋友圈方法与技巧相关推荐
- golang-vue实现微信小程序分享到朋友圈
最近涉及到微信小程序分享到朋友圈,不知道微信为什么不直接接口分享,咱也不敢佛,咱也不敢问,只能百度问度娘,看官方文档,网上的一些分享五花八门,每一个重点的,所以整理了一下到底怎样生成二维码分享图片才是 ...
- android微信分享走小程序流程,教你怎么把微信小程序分享到朋友圈
教你怎么把微信小程序分享到朋友圈 2020年07月13日 | 萬仟网移动技术 | 我要评论 7月8日收到邀请,可将小程序页面分享到朋友圈.适用于内容型页面的分享,不适用于有较多交互的页面分享.该功能为 ...
- 解决 ios 微信小程序分享到朋友圈 禁用问题
微信小程序分享到朋友圈 显示当前页面的转发按钮 显示当前页面的转发按钮 wx.showShareMenu 配置当前页面的转发按钮. onLoad(){wx.showShareMenu({withSha ...
- 微信小程序分享到朋友圈,在朋友圈打开报错 error code -501023
未登录模式 | 微信开放文档 未登录模式即无登录态的模式,在未登录模式中,不存在用户的登录态.未登录模式的场景有如: 单页模式:小程序/小游戏分享到朋友圈被打开时 Web 未登录模式:没有登录的 We ...
- 微信小程序分享到朋友圈,打开链接报错“ogin:fail rejected due to no permission current”
场景: 进入商品详情页,点击分享到朋友圈,打开分享链接以后,提示 "login:fail rejected due to no permission current" 产生原因: ...
- 微信小程序分享到朋友圈
记录一下做小程序分享的坑 官方文档 代码 onShareTimeline: function () {return {title: '分享朋友圈',query: 'page=1&size=10 ...
- 教你怎么把微信小程序分享到朋友圈
7月8日收到邀请,可将小程序页面分享到朋友圈.适用于内容型页面的分享,不适用于有较多交互的页面分享. 该功能为beta版,灰度测试中,暂仅在Android平台支持,从基础库 2.11.3 开始支持. ...
- 微信小程序分享到朋友圈-遇到的问题drawImage真机不显示网络图片
网上有现成的例子,所以直接拿来用了,见链接,接下来说下自己遇到的问题 -> 因为在我的项目中,我的图片是网络图片,canvas上绘制的目前只支持本地图片,那应该怎么办呢?不可能图 ...
- 微信小程序分享到朋友圈onShareTimeline()传参及接参
代码如下: // index.jsonShareTimeline: function () {return {title: '我是分享后显示的标题', // 可不填query: 'id=123', / ...
最新文章
- C++知识点20——使用C++标准库(再谈string——string的大小、容量、交换与迭代器失效)
- etcd — 安装部署
- IT趣闻:世界知名IT公司名字由来
- windows修改策略后执行命令_Windows 下的提权大合集
- 比较正宗的验证邮箱的正则表达式js代码详解
- 通过Java Hipster升级Spring Security OAuth和JUnit测试
- Vim 可视化模式入门
- SQL Server 2012新功能
- 计算机课有什么作业,计算机组成原理课堂作业
- python 中的 type(), dtype(), astype()的区别
- ajax跨域例子,ajax跨域例子
- photoshop插画插件_照片快速转矢量插画PS动作插件 Vector Art Photoshop Action
- 差分相干解调 matlab,2DPSK差分相干解调器Simulink仿真.doc
- java微信获取素材列表_微信公众号开发之获取素材列表并保存
- 独立院校转设,高考新生何去何从|转设对新生有哪些影响
- 艾宾浩斯遗忘规律学习记东西(诗词,单词等)
- 在需要密码的情况,卸载symantec endpoint protection 。可以不用密码删除symantec endpoint protection...
- Webpack中 的css-loader和less-loader
- 转载一些值得收藏的文章
- 微信小程序全局变量改变监听