全国服务热线:4008-888-888

公司新闻

手机微信微信小程序共享微信朋友圈的完成构思

完成构思

那麼即然微信小程序沒有共享到微信朋友圈的api,大家如何完成共享到微信朋友圈呢,下边我详细介绍一下完成构思。

即然沒有近道,那么就走繁杂一点的线路,那么就是必须客户手动式共享到微信朋友圈,难题来了,客户手动式共享得话,共享什么?大家实际上在微信朋友圈应当早已见到很多含有微信小程序码的照片,非常是年以前与年之后,应当见到很多智行列车票,携程网列车票共享到微信朋友圈的照片,协助朋友加快,用于抢列车票,也有像今天今日头条,共享新闻报道到微信朋友圈的方法。

她们相互的对策是转化成一张含有微信小程序码的照片,微信小程序码包括了共享者的客户信息内容,大家把照片转化成之后,客户自主储存照片到当地,随后共享到微信朋友圈,微信朋友圈朋友长按照片鉴别图上二维码,进到微信小程序后分析微信小程序码带上的信息内容,转化成相对的网页页面。那样就完成了共享到微信朋友圈那样一个步骤。

在这里个步骤中有2个难题。

第一个难题是如何转化成含有微信小程序码的照片,由于转化成的照片一般也不是孤伶伶的仅有微信小程序码,并且留意大家是要 转化成一幅图片储存到当地 。

第二个难题是转化成照片了,共享到微信朋友圈了,朋友根据大家共享的微信小程序码进到微信小程序了,那麼大家如何获取微信小程序码带上的客户信息内容,获得在其中带上的主要参数?

 转化成照片

现阶段我孰知道的有二种方法转化成微信小程序共享照片,第一种是前端开发转化成,第二种是后端开发转化成。

前端开发转化成照片得话,也不可防止的必须依靠canvas完成。手机微信微信小程序有自身的一套canvas的api,尽管为名上是他自身的制图作用,可是使用方法上与canvas并沒有很大差别,因此假如以前应用过canvas制图得话,应用起來应当不会太难。

,她们有自身转化成照片的方法,我询问了java,她们说java也是有的。

下边我关键讲前端开发应用canvas转化成共享照片的方法。

 

复制代码
 wx.downloadFile({ url: app.globalData.userInfo.avatarUrl, success: function (res1) { //缓存文件头像照片 that.setData({ portrait_temp: res1.tempFilePath }) //缓存文件canvas绘图微信小程序二维码 wx.downloadFile({ url: that.data.qrcode, success: function (res2) { console.log( 二维码: + res2.tempFilePath) //缓存文件二维码 that.setData({ qrcode_temp: res2.tempFilePath }) console.log( 刚开始绘图照片 ) that.drawImage(); wx.hideLoading(); setTimeout(function () { that.canvasToImage() }, 200) } }) } })
复制代码

 

先详细介绍一下上边的编码,为何要先实行上边的编码呢,大家应用canvas绘图照片,要应用微信小程序码的照片相对路径,假如立即应用得话应用canvas是画不了去的,务必要根据wx.downloadFile这一api先把照片免费下载到当地,取得临时性相对路径,才可以给下边的canvas绘图步骤应用,因此要先实行上边的编码。

上边编码中有实行that.drawImage()这一涵数,下边释放这一涵数内的编码。


复制代码
drawImage() { //绘图canvas照片 var that = this const ctx = wx.createCanvasContext( myCanvas ) var bgPath = ../../../images/share_bg.png var portraitPath = that.data.portrait_temp var hostNickname = app.globalData.userInfo.nickName var qrPath = that.data.qrcode_temp var windowWidth = that.data.windowWidth that.setData({ scale: 1.6 }) //绘图情况照片 ctx.drawImage(bgPath, 0, 0, windowWidth, that.data.scale * windowWidth) //绘图头像 ctx.save() ctx.beginPath() ctx.arc(windowWidth / 2, 0.32 * windowWidth, 0.15 * windowWidth, 0, 2 * Math.PI) ctx.clip() ctx.drawImage(portraitPath, 0.7 * windowWidth / 2, 0.17 * windowWidth, 0.3 * windowWidth, 0.3 * windowWidth) ctx.restore() //绘图第一段文字 ctx.setFillStyle( #ffffff ) ctx.setFontSize(0.037 * windowWidth) ctx.setTextAlign( center ) ctx.fillText(hostNickname + 已经报名参加瘋狂大红包主题活动 , windowWidth / 2, 0.52 * windowWidth) //绘图第二段文字 ctx.setFillStyle( #ffffff ) ctx.setFontSize(0.037 * windowWidth) ctx.setTextAlign( center ) ctx.fillText( 邀约你一起來领券领红包啦~ , windowWidth / 2, 0.57 * windowWidth) //绘图二维码 ctx.drawImage(qrPath, 0.64 * windowWidth / 2, 0.75 * windowWidth, 0.36 * windowWidth, 0.36 * windowWidth) //绘图第三段文字 ctx.setFillStyle( #ffffff ) ctx.setFontSize(0.037 * windowWidth) ctx.setTextAlign( center ) ctx.fillText( 长按二维码领取红包 , windowWidth / 2, 1.36 * windowWidth) ctx.draw(); },
复制代码

提到这儿突然感觉要讲明楚这儿的每一个关键点有点儿艰难,大伙儿尽可能效仿在其中的构思,实际的编码我不会太将会都详尽表述。上边的编码是js一部分,wxml一部分必须留意的点是应用canvas标识后假如不愿使他在网页页面抽出现,可使用精准定位,使他出不来如今视线范畴内就行。

填补:忘掉说一点了,上边编码绘图头像一部分,在其中绘图圆形头像也是一个小专业知识点哦!!!


复制代码
 !-- canvas绘图共享图 -- view >
复制代码

绘图完照片后也要把它转换成照片


复制代码
canvasToImage() { var that = this wx.canvasToTempFilePath({ x: 0, y: 0, width: that.data.windowWidth, height: that.data.windowWidth * that.data.scale, destWidth: that.data.windowWidth * 4, destHeight: that.data.windowWidth * 4 * that.data.scale, canvasId: myCanvas , success: function (res) { console.log( 微信朋友圈共享图转化成取得成功: + res.tempFilePath) wx.previewImage({ current: res.tempFilePath, // 当今显示信息照片的http连接 urls: [res.tempFilePath] // 必须浏览的照片http连接目录 }) }, fail: function (err) { console.log( 不成功 ) console.log(err) } }) },
复制代码

转化成照片后大部分就大获全胜了,应用微信小程序出示的wx.previewImage或是wx.saveFile全是能够的。

 载入微信小程序码带上主要参数信息内容
debug/wxadoc/dev/
上边的相对路径是微信小程序有关微信小程序码的官方网文本文档表明,实际配备转化成微信小程序二维码必须后端开发相互配合。
我下边关键讲如何载入微信小程序码带上的信息内容。
在微信小程序性命周期时间onload涵数中能够带上option主要参数,option.scene便是微信小程序码中带上的信息内容,简易信息内容能够立即放进scene中,假如是繁杂信息内容,能够把获得到的scene做为主要参数,根据ajax恳求获得到你必须的信息内容。下边是一部分编码,完成构思是那样的。

复制代码
if (options.scene) { //微信小程序码扫二维码进到 console.log( 微信小程序码扫二维码进到 ) that.setData({ scene: decodeURIComponent(options.scene), entryType: scan }) wx.request({ url: app.globalData.subDomain + /GetSceneCode , data: { scene: decodeURIComponent(options.scene) }, method: POST , success: function (res) {}
复制代码

 

 总结

上边讲了微信小程序共享到微信朋友圈的主题风格步骤和一些将会会碰到的难题难题,本文关键是出示了一个构思,编码能够做为参照,终究每一个人的新项目要求一直有区别的,我上边所写的內容就是我完成这一作用的步骤和方法,我不会了解也有沒有更强的方法,假如有更强的完成方法,热烈欢迎评价留有您的提议,或是共享一些更强的连接也是能够的,感谢。





在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服