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


Posted in Javascript onJune 13, 2019

背景

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

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

实现

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

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

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

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

<canvas canvas-id="canvasid" style="width: 375px; height: 500px;" wx:if="{{canvasShow}}"></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....文章很短暂,这里只是提供一下解决的思路,希望能帮助到大家~

总结

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

Javascript 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
javascript时区函数介绍
Sep 14 Javascript
AngularJS自动表单验证
Feb 01 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
AngularJS指令用法详解
Nov 02 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 #Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 #Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 #Javascript
深入了解JavaScript代码覆盖
Jun 13 #Javascript
js使用cookie实现记住用户名功能示例
Jun 13 #Javascript
探索JavaScript中私有成员的相关知识
Jun 13 #Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 #Javascript
You might like
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
python编写Logistic逻辑回归
2020/12/30 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Python 列表的清空方式
2020/01/13 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
python中如何进行连乘计算
2020/05/28 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Python类成员继承重写的实现
2020/09/16 Python
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
医务工作者先进事迹材料
2014/01/26 职场文书
学生检讨书范文
2014/10/30 职场文书
校本课程教学计划
2015/01/19 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript