微信小程序保存图片以及分享给朋友

一、保存图片

微信小程序中使用得比较多的就是分享功能，基本上都会用到，尤其是对二维码图片，保存在本地或者将小程序分享给朋友，好在微信小程序提供的api中已经告诉了该怎么使用，下面就将所用到的分享出来。
首先是通过请求后端接口获取图片地址，当然也可以不用请求直接将地址写死。

 wx.request({url: getApp().data.serviceUrl +'/wechat/searchdata/proqrcode',//请求地址data: {//发送给后台的数据openid: that.data.openid},header: {//请求头"Content-Type": "application/json;charset=UTF-8;"},method: "POST",//get为默认方法/POSTsuccess: function (res) {var imageurl = res.data.contentthat.setData({shareImgSrc: getApp().data.qrServiceUrl + imageurl})wx.getImageInfo({src: that.data.shareImgSrc,//服务器返回的带参数的小程序码地址success: function (res) {//res.path是网络图片的本地地址var qrCodePath = res.path;//2. canvas绘制文字和图片const ctx = wx.createCanvasContext('myCanvas');// var imgPath = that.data.localImageUrl;ctx.drawImage(qrCodePath, 0, 0, 200, 200);ctx.setFillStyle('white')ctx.fillRect(0, 520, 600, 280);ctx.draw()// that.setData({//   localImageUrl: qrCodePath// })},fail: function (res) {//失败回调}});},fail: function (err) { },//请求失败})

经过上面一步已经图片展示出来了，接下来是将图片保存下来。这里通过按钮点击实现：

savedate: function (e) {var that = this;wx.canvasToTempFilePath({x: 0,y: 0,width: 200,height: 200,destWidth: 400,destHeight: 400,canvasId: 'myCanvas',success: function (res) {that.setData({saveImgSrc: res.tempFilePath})},fail: function (res) {console.log(res)}}) //4. 将图片保存到相册wx.saveImageToPhotosAlbum({filePath: that.data.saveImgSrc,success(res) {wx.showModal({title: '存图成功',content: '图片成功保存到相册了，去发圈噻~',showCancel: false,confirmText: '好哒',confirmColor: '#72B9C3',success: function (res) {if (res.confirm) {console.log('用户点击确定');}// that.hideShareImg()}})}})},

二、分享小程序

分享小程序需要在button中设置open-type，如下

<button class='sendfriend' bindtap = 'sendfriend' open-type="share">发送给微信好友</button>

通过onShareAppMessage方法实现发送给好友：

onShareAppMessage: function (ops) {if (ops.from === 'button') {// 来自页面内转发按钮console.log(ops.target)}var that = thisreturn {title: '分享给好友',path: 'pages/index/index?scene='+that.data.openid,//点击分享消息是打开的页面imageUrl: that.data.saveImgSrc,success: function (res) {// 转发成功console.log("转发成功:" + JSON.stringify(res));var shareTickets = res.shareTickets;},fail: function (res) {// 转发失败console.log("转发失败:" + JSON.stringify(res));}}},

微信小程序保存图片以及分享给朋友相关推荐

微信小程序将支持分享到朋友圈；美团入局社区团购；Kotlin 1.4-M3 发布 | 极客头条
整理 | 屠敏头图 | CSDN 下载自东方 IC 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 一分钟 ...
html 调用weixinsharetimeline,微信小程序使用onShareTimeline分享到朋友圈的方法
最近微信小程序终于公测了一个分享到朋友圈的功能,这对营销来说可是一个很重要的功能啊.如何使用这个功能呢?这里详细介绍一下. 使用到的函数onShareTimeline()与onShareAppMess ...
微信小程序如何支持分享给朋友和分享到朋友圈？如何解决分享朋友圈灰色问题
微信小程序分享给朋友和分享到朋友圈,都需要在小程序编写代码实现. 目录 1.官方文档 2.分享给朋友,即转发 3.分享到朋友圈 4.常见问题 4.1.分享朋友圈灰色 4.2.如何测试分享给朋友 4.3 ...
微信小程序开放「分享到朋友圈」功能
2020年7月7日(据说是6日深夜),一个很特别的日子,微信低调地放开了一个功能:微信小程序"分享到到朋友圈",这个看似微小的变化,对微信小程序来说意义重大. 用fenng大的话说 ...
微信小程序如何直接分享到朋友圈？
近日微信终于公开了小程序分享到朋友圈,下面就分享一下技术上如何将小程序分享到朋友圈吧. 官方技术文档如下: 分享到朋友圈(Beta) 从基础库 2.11.3 开始支持此功能为beta版,暂仅在And ...
uniapp实现微信小程序点亮分享到朋友圈权限
在可分享的页面文件里写: onShareAppMessage(){return {from:"menu"} }, onShareTimeline(){}, 微信官方文档: 效果:
微信小程序实现转发分享功能（好友朋友圈）
微信小程序分享微信小程序已经支持分享到好友和朋友圈功能(安卓),用户在朋友圈打开分享的小程序页面,并不会真正的打开小程序,而是进入一个"小程序单页面模式"的页面: 微信小程序文档 ...
uniapp实现微信小程序全局【发送给朋友】、【分享到朋友圈】、【复制链接】
在开发微信小程序的时候,发现[发送给朋友].[分享到朋友圈].[复制链接]功能,灰色不可用. 很常见的功能,但是这几个功能,并不是你项目建起来了就有的. 1.[发送给朋友]使用 onShareAppM ...
微信小程序非webview分享给好友及生成分享海报
微信小程序非webview分享给好友及分享海报 UI展示点击分享显示分享sheet: 点击生成海报,展示海报预览图片: 组件目录结构: 代码 works文件 woks.json中引入: " ...

微信小程序保存图片以及分享给朋友

一、保存图片

二、分享小程序

微信小程序保存图片以及分享给朋友相关推荐

最新文章

热门文章