E企盈营销工具技术服务商 热线:4006-838-530

微信小程序分享,小程序分享模块超级详解

E企盈直播平台营销卖货系统

导语:在项目开发中,分享能力几乎是每个项目必备的要求,但原生的分享能力比较有限,不够灵活,今天就我们就一起来研究下,如何在现有基础上,增强小程序分享的能力,使信息传递更加直观、灵活。示例项目地址:本文目录:小程序分享基础API介绍基于canvas动态绘制分享图片canvas对不同来源图片的处理(本地图片,网络图片,base64图片)canvas生成图片后如何保存到本地如何生成小程序码及验证小程序码所带信息抽离配置文件,使绘制更加灵活小程序分享基础API介绍微信分享的API只提供了分享给微信好友的能力,并没有提供分享朋友圈的能力,这是为啥子呢!!!从网上收集的一些咨询来看,主要有如下两点原因:由于微商泛滥,公众号鸡汤泛滥,朋友圈质量已经有所下降,如果小程序再开放分享朋友圈功能,可能会进一步影响到整个微信生态,造成用户活跃度下降,用户流失等问题。微信不让小程序在朋友圈转发,更多是保护朋友圈的”广告位”阵地,不能够让这块”肥肉”变成了公益设施。其实一些童鞋应该留意到了在朋友圈,官方已经推了一些小程序的广告,只不过这项能力还没有完全放开,以后会不会放开先不讨论,智慧的开发小哥哥早已想到了通过生成带有小程序码的海报作为替代方案(撒花!!!),本文后面的部分也会说到,我们先回到正题。用法:Page({onShareAppMessage:function(){return{title:’xxxxx’,//自定义转发标题path:’/page/user?id=123′,//分享页面路径imageUrl:’/common/images/xxx.png’//分享图片宽高比5:4}}})//如果只写成如下形式,title默认是小程序名,path为当前页面路径(不带参数),imageUrl为当前页面截图Page({onShareAppMessage:function(){}})复制代码触发方法(一定要在page中先写入上述方法):点击小程序的胶囊菜单,会从底部弹出转发选项。button组件open-type=”share”即buttonopen-type=”share”,点击后触发。触发后效果如下:观察上述结果,不难看出,title能分享出去的信息非常有限,那我们能不能对分享的图片做些文章,让它带出更多的信息呢?下面进入到我们的第二个部分基于canvas动态绘制分享图片基于canvas动态绘制分享图片因为每个页面的信息很多都是通过接口返回或者用户输入产生,是在不断变化的,设计师所画的静态图片肯定是不足以去展示这些信息的,那么我们就要想,有没有一种办法,是可以把静态图片和动态信息绘制在一起后在生成一张新的图片?答案是肯定的!!!把图片和文字画在一起?我们就一定会想到神奇的canvas,根据小程序画布相关的API绘制如下://创建画布(组件中一定要绑定this,切记!!!)varctx=wx.createCanvasContext(‘myCanvas’,this);//画布上绘制图片ctx.drawImage(path,0,0,width,height);//画布上绘制文字ctx.setFillStyle(‘#fff’);ctx.setFontSize(32);ctx.fillText(startTime,24,54);//其他信息绘制//…ctx.draw();复制代码上述已经通过canvas把图片和文字绘制到了一起,那如何把这个画布转成一个图片,供开发者使用呢?强大的小程序给我们提供了原生的方法://在上面代码的draw()的回调中使用wx.canvasToTempFilePathvarthat=this;ctx.draw(true,()={setTimeout(()={wx.canvasToTempFilePath({canvasId:’myCanvas’,success:(res)={that.setData({//res.tempFilePath生成图片的临时路径picUrl:res.tempFilePath});}},that);//在组件中使用这里一定记得要绑定this,切记!!!},300);//此处加入300毫秒延时是为了解决小程序绘制过程中的渲染问题});复制代码把图片路径传递给image标签,得到下图结果。imagesrc=”{{picUrl}}”/复制代码同理:把picUrl赋值给onShareAppMessage中的imageUrl,分享出去后的图片则带有了动态信息!对不同来源图片的处理(本地图片,网络图片,base64图片)在上面的例子中,绘制本地图片时直接使用ctx.drawImage(path,0,0,width,height),path直接传入图片路径即可。但是如果是网络图片或者是base64的图片时,drawImage是无法直接绘制的,下面就介绍下针对上述两种情况如何做兼容处理。网络来源图片//将网络图片转换为本地路径handleNetImg:function(imagePath){varthat=this;returnnewPromise((resolve,reject)={wx.getImageInfo({src:imagePath,success:function(res){resolve(res);}});});}handleNetImg(‘网络图片地址’).then((res)={console.log(res.path);//输出转换后的本地图片路径ctx.drawImage(res.path,0,0,width,height);//此时图片即可在画布上绘制出来})复制代码base64图片使用ctx.drawImage(base64Data,0,0,width,height)在小程序开发者工具上是可以绘制的,然而!!!这个大骗纸!!!真机上是失效的!!!(心碎一分钟。。。)跟上面类似的思路,我们把base64的图片转为本地的png图片varhandleBase64Img=function(){//wx.getFileSystemManager小程序文件管理器varfsm=wx.getFileSystemManager();varFILE_NAME=’base64src’;varbase64src=function(base64data){returnnewPromise((resolve,reject)={//解析base64,提取出图片类型:imgtype,解析内容bodyData(去掉data:image/png;base64,以后的内容)var[,imgType,bodyData]=/data:image/(w+);base64,(.)/.exec(base64data)||[];if(!imgType){reject(newError(‘ERROR_BASE64SRC_PARSE’));}/wx.env.USER_DATA_PATH本地用户文件本地用户文件是从1.7.0版本开始新增的概念。提供了一个用户文件目录给开发者,开发者对这个目录有完全自由的读写权限。通过wx.env.USER_DATA_PATH可以获取到这个目录的路径。/varfilePath=`${wx.env.USER_DATA_PATH}/${FILE_NAME}.${imgType}`;//按指定写入文件的字符编码encoding,向地址filepath,写入数据data。fsm.writeFile({filePath,data:bodyData,encoding:’base64′,success(){resolve(filePath);},fail(){reject(newError(‘ERROR_BASE64SRC_WRITE’));},});});};returnbase64src;}varbase64src=that.handleBase64Img();varhandleBase64src=base64src(base64data);handleBase64src.then(res={//res即为base64转化为图片后的本地路径,即可在画布上绘制成功that.ctx.drawImage(res,left,top,width,height);});复制代码通过上述的一些内容,我们已经知道如何利用canvas把图片和文字绘制在一起后生成一张新的图片,这里就产生了一个新的问题:我们如何把生成的图片保存下来呢???我们接着往细看canvas生成图片后如何保存到本地canvas生成图片后如何保存到相册中想要保存到相册中第一步首先当然是要获得访问相册的权限!!!//访问相册授权wx.getSetting({success:(res)={//检查是否有访问相册的权限,如果没有则通过wx.authorize方法授权(授权只需要一次就好,后面就可以直接访问相册)if(!res.authSetting[‘scope.writePhotosAlbum’]){console.log(‘没有获取授权’);wx.authorize({scope:’scope.writePhotosAlbum’,success:(res)={//用户点击允许获取相册信息后逻辑进入这里,如上图所示}})}}});//获取了相册的访问权限,使用wx.saveImageToPhotosAlbum将图片保存到相册中wx.saveImageToPhotosAlbum({filePath:that.data.sharePicPath,success:(res)={//保存成功弹出提示,告知一下用户wx.showModal({title:’已保存到手机相册’,content:’将图片发送到朋友圈,邀请好友加入’,confirmColor:’#0bc183′,confirmText:’知道了’,showCancel:false})}})复制代码如何生成小程序码及验证小程序码所带信息在小程序的分享朋友圈的解决方案中,往往在生成的海报页面中都会有一个小程序码,使得用户有进入小程序的入口,那么这个小程序码如何生成呢?官方文档:获取小程序码注意:因为生成小程序码的接口参数需要access_token,安全起见,一般都通过后台调用在拿到base64的数据在返回给前端。我们在回到正题:上述三种生成接口,大家根据情况按需使用,因为我的项目里,需要经常生成不同页面对应的小程序码,B类接口比较符合我的要求,这里就重点描述下B类接口的使用和自测B类接口入参,出参官方说明–重点看下scene:最大32个可见字符,有页面路径带参数的情况下要尤其注意!!!把page,scene等参数传递给后台后,后台调用B类接口,返回给前端一个base64的图片数据,我们把这个数据绘制到海报上就好!!!绘制方法上面已经说过canvas对不同来源图片的处理(本地图片,网络图片,base64图片)现在小程序码的图片已经生成了,那么我们要如何自测呢?怎么才能知道小程序码中所携带信息是否正确呢?官方给出的方法:上述方法在开发阶段是比较方便,但是在正式的提测阶段,此种方式显得有些牵强,有人想到真机调试?官方接口只能生成已发布的小程序的二维码也就是说,你扫码就连上生产环境了!!!没有办法调试,那到底怎么办呢???解决办法就要借助强大的小程序开发者工具啦!!!首先把生成的小程序码保存到电脑里,方法见上述canvas生成图片后如何保存到本地部分。然后通过开发者工具选择二维码编译模式,文件夹中选择带有小程序码的图片即可!!!注意:获取scene值时要decodeURIComponentPage({onLoad(query){//scene需要使用decodeURIComponent才能获取到生成二维码时传入的sceneconstscene=decodeURIComponent(query.scene)}})复制代码抽离配置文件,使绘制更加灵活我们观察如下一个小程序海报:除了上图红框中的的内容会发生写变化以外,整体的结构大部分是基本已经固定了的,因为海报内容和业务是强相关的,如果我把绘制的逻辑写入组件里,那岂不是换个业务,我的组件就要改一次?这样失去了组件的通用型肯定是不行的,那怎么办呢?下面介绍一个业界比较好的解决方案:小程序海报说白了就是由canvas画布上绘制的一些形状,图片,文字,线等等组成的,那我们是不是可以把这些绘制的基本能力封装成方法,通过设计稿量出海报上每个元素的位置大小等信息,当作一个配置文件传递给这些绘制方法,这样就保证组件的通用型,而且绘制信息抽离成一个配置文件也更加方便后期维护。share-config.js:functionsetShareInfo(time,start,end,imageSrc){return{width:750,height:1300,background:’#F2FCF8′,views:[{type:’rect’,parent:true,radius:true,radiusVal:16,left:40,width:670,height:1140,shadow:true,background:’#cacacd’,shadowColor:’rgba(0,0,0,.6)’,line:true},//….{type:’text’,content:’长按或扫描二维码,查看这条线路’,color:’#9B9BA1′,top:1052,left:224,fontSize:28,font:’PingFangSC-Medium’,},{type:’image’,path:’/common/images/station-flag.png’,top:746,left:80,width:32,height:104}]}}export{setShareInfo}复制代码只需要在几个动态信息改变时,传入这些变化的值即可。import{setShareInfo}from’../../common/config/share-config’;page({onLoad:function(){this.setData({shareMessageInfoTimeline:setShareInfo(‘3月7号下午16:30发车’,’腾讯大厦’,’平安国际中心’,”)});//…},});复制代码通过shareMessageInfoTimeline获取配置信息viewmod-share-timelinetimelineShow=”{{timelineShow}}”picContent=”{{shareMessageInfoTimeline}}”bindcloseTimelineShow=”closeTimelineShow”//view复制代码总结本文对小程序分享所需的基础能力进行了拆分详解,把上述能力进行不同的组合,应该可以满足大部分的分享需求。比如:动态绘制分享给微信好友的分享图片。生成并保存小程序海报。作者:你猜我叫啥原文:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序分享,小程序分享模块超级详解
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏