微信小程序转发朋友圈接触过微信小程序的都应该知道微信小程序只开辟了一个转发给好友和群的api,如果想发送到朋友圈,方法大同小异,无非就是保存图片到本机 然后在进行朋友圈发表,话不多说,先上图,然后上代码。1.首先需要一个保持一般分享图和打开地址的按钮,因为在用户在取消允许保存图片到手机的时候,在调用是调用不起来的 这时候就用到wx.authorize这个api 具体看官方文档①.wxml<canvas canvas-id=”myCanvas” style=”width:{{Width}}px;height:{{Height}}px;”/><button type=’primary’ size=’mini’ bindtap=’save’ class=’baocun’ wx:if=”{{!state}}”>保存分享图</button><button bind:tap=”addressAgain” type=’primary’ size=’mini’ bindopensetting=”addressAgain” class=’baocun1′ wx:if=”{{state}}”> 打开地址</button> 2.样式( 这里也是大概写了写 需要更好 看的样式自己微调就啊好了 )②.wxsscanvas{ position: fixed; top: 0;}image{ margin: 10% 10%;}.baocun{position:absolute;right:5%;top:76%;}.baocun1{position:absolute;right:5%;top:76%;}3.具体的实现流程,如有不懂可留言③.js// pages/img/img.jsPage({ /** * 页面的初始数据 */ data: { state: false, Width: ”, Height: ”, imagePath: ” }, /** * 生命周期函数–监听页面加载 */ onLoad: function (options) { //进入页面是否授权,如果没授权的话授权 let _this = this wx.getSetting({ success(res) { console.log(res) //授权,如果取消授权的话 显示打开设置,进行授权,否则没有办法进行下一步 if (!res.authSetting[‘scope.writePhotosAlbum’]) { wx.authorize({ scope: ‘scope.writePhotosAlbum’, success() { console.log(‘授权成功’) _this.share() }, fail() { //state默认为false 保存分享图显示 _this.setData({ state: true }) } }) }else{ _this.share() } } }) }, share: function () { var that = this //获取系统信息,具体的属性请前往微信小程序官网查看 wx.getSystemInfo({ success: res => { console.log(res); that.setData({ Width: res.screenWidth, Height: res.screenHeight }) } }) var qrcode = ‘./erweima.png’//二维码图片一般为网络图片后台生成 var bgImgPath = ‘./two.jpg’//首先你需要准备一张背景图 var width = that.data.Width var height = that.data.Height const ctx = wx.createCanvasContext(‘myCanvas’)//创建 canvas 绘图上下文 ctx.drawImage(bgImgPath, 0, 100, width, height / 2) //将背景图绘制到画布中 ctx.drawImage(qrcode, 0, height / 2, width, height / 7) ctx.clip(); ctx.draw() setTimeout(function () { //当前画布指定区域的内容导出生成指定大小的图片 wx.canvasToTempFilePath({ x: 0, y: 100, width: that.data.Width, height: 470, destWidth: that.data.Width, destHeight: 470, canvasId: ‘myCanvas’, fileType: ‘png’, quality: 1, success: function (res) { console.log(res.tempFilePath); /* 这里 就可以显示之前写的 预览区域了 把生成的图片url给image的src */ that.setData({ imagePath: res.tempFilePath, }) }, fail: function (res) { console.log(“失败” + res) } }) }, 200) }, save: function () { var that = this //保存图片 wx.saveImageToPhotosAlbum({ filePath: that.data.imagePath, success: function (res) { console.log(res) wx.showModal({ content: ‘图片已保存到相册,赶紧晒一下吧~’, showCancel: false, confirmText: ‘好的’, confirmColor: ‘#333’, success: function (res) { if (res.confirm) { console.log(‘用户点击确定’); wx.navigateBack({ delta: 1 }) } } }) }, fail: function (res) { console.log(‘保存图片失败’) } }) }, addressAgain: function () { const _this = this wx.openSetting({ success(res) { if (!res.authSetting[“scope.writePhotosAlbum”]) { console.log(‘状态不对’) } else { _this.setData({ state: false }) _this.share() } }, }) }})博主也是刚接触微信小程序不久 ,希望和小伙伴共同学习 共同努力。如有不全 请留言博主肯定第一时间来进行更新和改写小程序
微信小程序转发朋友圈
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序转发朋友圈
相关推荐
如何实现线上卖断货?私域流量与公域流量哪个重要?15013808327
数据恢复软件(二):用C++重写恢复B乐都县E企盈小程序MP位图文件的小程序
公众号再次改版高坪区E企盈小程序小程序又多了一个入口
微信小程序加载图片时,湘桥区E企盈小程序先拉长,再恢复正常
转:(很有用)有多个按钮,点击一个变色,点击另吴中区E企盈小程序一个变色,原来的恢复颜色的方法
第12课微信小程序Component构造器自道里区E企盈小程序定义组件:
导航中的南海区E企盈小程序小竖线总结
小程序:after实现德格县E企盈小程序1px纵向分割线
汉沽区E企盈小程序企业微信内测朋友圈和客户群功能:小程序C位出道!
小程序运行加载密山市E企盈小程序机制
小程通城县E企盈小程序序中间有字的分隔线
公众号和小程序可以同名了名称支持同主体复盘锦E企盈小程序用
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务