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


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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
原生js实现轮播图特效
May 04 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
PHP实现文件安全下载
2006/10/09 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
angular十大常见问题
2017/03/07 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
python中根据字符串调用函数的实现方法
2016/06/12 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
全球工业:Global Industrial
2020/02/01 全球购物
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
学校运动会加油词
2015/07/18 职场文书
Python实现拼音转换
2021/06/07 Python
Python 绘制多因子柱状图
2022/05/11 Python