侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序前端自定义分享的实现方法

微信(小程序)  /  管理员 发布于 3年前   358

背景

目前手上有一个小程序的项目,希望转发时分享消息的界面能够自定义,然而微信小程序只提供设置图片的url和title。

 /**  * 用户点击右上角分享  */ onShareAppMessage: function() {  return {   imageUrl:'',   title:''  }; }

实现

我们要转发的显示内容多了一点东西:头像,用户名和点赞数。好在这个排版不是很复杂,所以我们思考了一下通过canvas去生成一张图片再return canvas所生成的图片url。

代码如下(其实还要作出一些显示上的优化,具体你们自己去调试):

先在页面里新建一个canvas 标签

   let context = wx.createCanvasContext('canvasid')   context.drawImage(back.path, 0, 60, backWidth, backHeight) //绘制下方背景图   //绘制圆形头像,参考教程:https://www.jianshu.com/p/9a6ee2648d6f 第二种方法   context.save();   var d = 2 * 25;   var cx = 0 + 25;   var cy = 0 + 25;   context.arc(cx, cy,25, 0, 2 * Math.PI);   context.clip();   context.drawImage(avatar.path, 0,0, d, d);   context.restore();   //绘制名字和点赞数   context.setFontSize(14)   context.fillText('userName', 70, 32)   let zanLength = ('100' + '次赞').length   context.fillText('100'+ '次赞', 375 - 14 * zanLength, 32)   //执行draw进行渲染 并返回图片url   context.draw(true, () => {    //此方法应执行在draw的回调中    wx.canvasToTempFilePath({     x: 0,     y: 0,     width: 375,     height: 400,     destWidth: 375,     destHeight: 400,     canvasId: 'canvasid',     success(res) {    //设置onShareAppMessage所返回的数据格式      let shareInfo = {       title: 'customTitle',       imageUrl      }      //隐藏画布      that.setData({       canvasShow: false      })     }    })   });

然而!

在canvas中绘制的图片要在真机上显示出来是有问题的(画布污染),非同源的图片在canvas不会显示出来的。后来我们使用 wx.getImageInfo去获取图片信息,通过里面的地址去显示图片(相当于是把图片转了一道)。

     wx.getImageInfo({        src: imgUrl,        success: function(res) {           /**拿到返回值res[0].path,再把该值作为canvas绘制图片的路径             context.drawImage(res[0].path,x,x,x)**/          let drawImgUrl = res[0].path        }      }); 

emmmm....文章很短暂,这里只是提供一下解决的思路,希望能帮助到大家~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家的支持。

您可能感兴趣的文章:

  • thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
  • 使用微信SDK自定义分享的方法
  • 微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
  • thinkphp项目如何自定义微信分享描述内容
  • 微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
  • php版微信公众号自定义分享内容实现方法
  • 微信自定义分享链接信息(标题,图片和内容)实现过程详解


  • 上一条:
    小程序组件之自定义顶部导航实例
    下一条:
    微信小程序实现渐入渐出动画效果
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • 如何优雅处理async await错误推荐:await-to-js库(0个评论)
    • lodash工具库(0个评论)
    • 在Laravel项目中使用中间件方式统计用户在线时长功能代码示例(0个评论)
    • 在Laravel中构建业务流程模型(0个评论)
    • windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
    • 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
    • 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
    • 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
    • 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
    • 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客