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

小程序实大洼县E企盈小程序现分享朋友圈

E企盈小程序直播系统

有过小程序基础的同学都应该知道,小程序是不能直接分享到朋友圈,起码是自从我写下这边文章起,小程序还没有提供分享朋友圈的api。但是公司很多时候都会想要传播自己的小程序,从而获取更多的流量,从而分享朋友圈的功能就诞生了。老规矩,先说说我的实现思路:1、通过canvas组件把要分享出去的东西画出来2、通过saveImageToPhotosAlbum方法把canvas生成的画布转成图片保存到本地3、通过发朋友圈的方式把之前保存的图片发到朋友圈实现过程中要注意的点:1、如果是请求网络图片的话,绘制图片的方法一定要写在请求的回调方法里面。2、获取相册的授权scope.writePhotosAlbum3、如果发现绘制出来的图片很模糊,那一定是没有将deswidth和desheight乘24、找准每一个元素在画布上的坐标,切记文字的Y轴坐标是文字的最底下好了,说了这么多,直接上干货。分享前的图片 分享后的图片 实现代码: /*** 生命周期函数–监听页面加载*/onLoad: function (options) { var that=this;//获取用户设备信息,屏幕宽度wx.getSystemInfo({success: res = {console.log(res);that.setData({screenWidth: res.screenWidth,screenHeight: res.screenHeight,});}});var name = decodeURIComponent(options.queryString);that.setData({queryString:name});//请求后台数据wx.request({url: ‘https://xxx.do’,data: {‘queryString’: name,},method: ‘POST’,header: { ‘content-type’: ‘application/x-www-form-urlencoded;开通贝壳包小程序电话:4006-838-530charset=utf-8′ },success: function (res) {var list = res.data.data;if (list != null && list.length0){var obj1 = list[0];var obj2 = list[1];var obj3 = list[2];if (obj1 != null) {that.setData({guanname: obj1.name,guancount: obj1.displayPercent,imgpath: obj1.imgUrl,desc: obj1.description,txtone: true});}if (obj2 != null) {that.setData({yaname: obj2.name,yacount: obj2.displayPercent,txttwo: true});}if (obj3 != null) {that.setData({jiname: obj3.name,jicount: obj3.displayPercent,txtthree: true});}//制作要分享的图片const ctx = wx.createCanvasContext(‘sharecan’)//主要就是计算好各个图文的位置 //绘制红色背景ctx.setFillStyle(‘#FF5554’)ctx.fillRect(0, 0, that.data.screenWidth, 528) //绘制文字ctx.setFontSize(25)ctx.setFillStyle(“#ffffff”)ctx.fillText(“品牌鉴定”, 12, 64) //绘制机器人ctx.drawImage(‘/pages/images/jqr.png’, 115, 42, 29, 24); //绘制文字ctx.setFontSize(14)ctx.setFillStyle(“#ffffff”)var dsj = ‘经过商标大数据分析,最符合 ‘ + name + ‘™ 品牌的商品是’;ctx.fillText(dsj, 12, 89) ctx.setFillStyle(‘#ffffff’)//设置矩形的背景颜色ctx.fillRect(12, 96, 351, 244) //请求的网络图片路径 wx.getImageInfo({src: that.data.imgpath,success: function (res) {//请求成功后将会生成一个本地路径即res.path,//然后将该路径缓存到storageKeyUrl关键字中 wx.setStorageSync(“imgUrl”, res.path);var imgurl = wx.getStorageSync(“imgUrl”); ctx.drawImage(imgurl, 12, 96, 351, 173);ctx.setFillStyle(‘#E21917’)//设置水印ctx.fillText(name + ‘™’, 293, 145)var desc = name + ‘™牌’ + that.data.guanname + ‘,’ + that.data.desc;var descone = “”;var desctwo = “”;if (desc.length 18) {descone = desc.substring(0, 18);desctwo = desc.substring(18, desc.length);console.log(descone);console.log(desctwo)ctx.setFillStyle(“#222222”)ctx.setFontSize(18)ctx.fillText(descone, 24, 302)ctx.setFillStyle(“#222222”)ctx.setFontSize(18)ctx.fillText(desctwo, 24, 326)} else {ctx.setFillStyle(“#222222”)ctx.setFontSize(18)ctx.fillText(desc, 24, 302)} ctx.setFontSize(12)ctx.setFillStyle(‘#FFAAA9’)ctx.fillText(“* 图源网络,非商业用途,如有侵权请联系删除”,12,360);ctx.setFontSize(20)ctx.setFillStyle(‘#FFFFFF’)var dds = ‘大多数注册 ‘ + name + ‘™ 相关商标品牌中’ctx.fillText(dds, 12, 390) if (that.data.txtone) {ctx.drawImage(‘/pages/images/guanjun.png’, 12, 404.5, 9.5, 15); ctx.setFontSize(14)ctx.setFillStyle(‘#FFBFBF’)var gn = that.data.guancount + ‘ 的人用做’;ctx.fillText(gn, 27.5, 419.5) ctx.setFontSize(14)ctx.setFillStyle(‘#ffffff’)ctx.fillText(that.data.guanname + ‘;’, 120, 419.5);} if (that.data.txttwo) {ctx.drawImage(‘/pages/images/yajun.png’, 12, 430.5, 9.5, 15); ctx.setFontSize(14)ctx.setFillStyle(‘#FFBFBF’)var ya = that.data.yacount + ‘ 的人使用’;ctx.fillText(ya, 27.5, 444) ctx.setFontSize(14)ctx.setFillStyle(‘#ffffff’)ctx.fillText(that.data.yaname + ‘;’, 120, 444);} if (that.data.txtthree) {ctx.drawImage(‘/pages/images/jijun.png’, 12, 456.5, 9.5, 15); ctx.setFontSize(14)ctx.setFillStyle(‘#FFBFBF’)var jn = that.data.jicount + ‘ 的人用来’;ctx.fillText(jn, 27.5, 471) ctx.setFontSize(14)ctx.setFillStyle(‘#ffffff’)ctx.fillText(that.data.jiname + ‘;’, 120, 471);}//绘制底部的分享图片ctx.drawImage(‘/pages/images/botshare.png’, 0, 528, that.data.screenWidth, 139);//绘制完成之后的回调方法ctx.draw(false, function (e) {that.data.isCompletedDraw = true}); }});}else{wx.navigateTo({url: ‘/pages/ppblank/ppblank?name=’+encodeURIComponent(that.data.queryString),})}}}); } sharepyq:function(e){//点击分享朋友圈 var that=this;if (!that.data.isCompletedDraw){wx.showToast({image: ‘/pages/images/tishi.png’,title: ‘图片正在生成中’,icon: ‘none’,});return ;}console.log(“是否拒绝过授权:”+that.data.auth)if(that.data.auth==false){wx.showModal({content: ‘T _ T 请打开保存相册的权限’,showCancel: false,confirmText: ‘去打开’,confirmColor: ‘#72B9C3’,success: function (res) {//进入授权页面wx.openSetting({success: (res) = {res.authSetting = {“scope.writePhotosAlbum”: true}that.setData({modaltwo: false,auth:true});}});}});return false;}var finwid = that.data.screenWidth*2;var finhei = that.data.screenHeight*2;wx.canvasToTempFilePath({x: 0,y: 0,width: that.data.screenWidth,height: that.data.screenHeight,destWidth: finwid,destHeight: finhei,canvasId: ‘sharecan’,success: function (res) {that.setData({preurl: res.tempFilePath,canvasHidden: false});//生产环境时 记得这里要加入获取相册授权的代码wx.getSetting({success(res) { if (!res.authSetting[‘scope.writePhotosAlbum’]) {//未授权,则重新授权wx.authorize({scope: ‘scope.writePhotosAlbum’,success() {// 用户已经同开通丝袜小程序电话:4006-838-530意小程序使用保存相册功能,//后续调用 wx.saveImageToPhotosAlbum 接口不会弹窗询问wx.saveImageToPhotosAlbum({filePath: that.data.preurl,success(res) {wx.showModal({content: ‘图片已保存到相册,赶紧晒一下吧~’,showCancel: false,confirmText: ‘好哒’,confirmColor: ‘#72B9C3’,success: function (res) {if (res.confirm) {console.log(‘用户点击确定’);that.setData({canvasHidden: true});}that.setData({modaltwo: false,});}})}});}, fail: function (r开通黄金首饰小程序电话:4006-838-530es) {console.log(“拒绝授权”);console.log(res);that.setData({canvasHidden: true,modaltwo: false,auth: false});}}) } else {//已经授权,则保存图片wx.saveImageToPhotosAlbum({filePath: that.data.preurl,success(res) {wx.showModal({content: ‘图片已保存到相册,赶紧晒一下吧~’,showCancel: false,confirmText: ‘好哒’,confirmColor: ‘#72B9C3’,success: function (res) {if (res.confirm) {console.log(‘用户点击确定’);that.setData({canvasHidden: true});}that.setData({modaltwo: false});}})}});}}});},fail: function (res) {console.log(“保存失败”)}})} 如果我的文章帮助到了大家,减少大家的弯路,愿意打赏的请扫下面的二维码,也可留言。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序实大洼县E企盈小程序现分享朋友圈
分享到: 更多 (0)
E企盈小程序直播营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏