欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
小程序前端自定义共享的实现
来源:南京网站制作 时间:2019-12-09 09:10:28

当前,有一个小程序项目在手。希望转发时可以自定义消息共享界面。但是,微信小程序只提供URL和标题来设置图片。

 
/**
  *Users click the upper right corner to share
  */
 onShareAppMessage: function() {
  return {
   imageUrl:'',
   title:''
  };
 }
实现
 
我们需要转发更多显示内容:头像,用户名和喜欢。幸运的是,这种布局不是很复杂,因此我们考虑通过画布生成图像并返回画布而生成的图像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) // draw the background below
   //Draw a circular head, refer to the tutorial: https://www.jianshu.com/p/9a6ee2648d6f the second method
 
   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();
   //Draw name and likes
   context.setFontSize(14)
   context.fillText('userName', 70, 32)
   Let zanlength = ('100 '+' second likes'). Length
   Context. Filltext ('100 '+' times like ', 375 - 14 * zanlength, 32)
   //Execute draw to render and return the image URL
   context.draw(true, () => {
    //This method should be executed in the callback of draw
    wx.canvasToTempFilePath({
     x: 0,
     y: 0,
     width: 375,
     height: 400,
     destWidth: 375,
     destHeight: 400,
     canvasId: 'canvasid',
     success(res) {
    //Set the data format returned by onshare appmessage
      let shareInfo = {
       title: 'customTitle',
       imageUrl
      }
      //Hide canvas
      that.setData({
       canvasShow: false
      })
     }
    })
   });
然而!
 
在画布上绘制的图片要显示在真实机器上存在问题(画布污染)。非同源图片将不会显示在画布中。以后,我们使用wx.getimageinfo获取图像信息,并通过其中的地址显示图像(相当于翻转图像)。
 
wx.getImageInfo({
        src: imgUrl,
        success: function(res) {
           /**Get the return value res [0]. Path, and then use the value as the path for canvas to draw pictures 
            context.drawImage(res[0].path,x,x,x)**/
          let drawImgUrl = res[0].path
        }
      });
嗯〜
 
摘要
 
以上是本文的全部内容。南京小程序开发希望本文的内容对您的学习或工作具有一定的参考学习价值。感谢您对我们的支持。

本文地址:http://www.tntyw.com/web/2867.html
Tag:
专业服务:南京网站制作,南京网站制作公司,南京网站建设公司
联系电话:025-65016872
上一篇: 5G对网站建设和开发的影响
下一篇: 如何创建更多可网站点击标题的提示
最新案例
珠海跨境电商
珠海跨境电商
五颗星商城
五颗星商城
上海万客生鲜超市
上海万客生鲜超市
一九在线商城
一九在线商城
鼓楼医院系统平台
鼓楼医院系统平台
你可能感兴趣
南京网站建设关于网站网络写作建议
南京网站制作分享WordPress语言翻译的三个选项
成功的网站南京网站建设是怎么定义的
南京网站制作从这9个方面定制网站需要重新设计了
如何将视频用作网站背景
网站博客有哪些研究技术
南京网站建设建议大家隔几年就需要重新设计网站的好处
网站上面南京网站制作为什么坚持说需要博客呢?
最后更新
合适的网站开发公司南京网站制作教你怎么选择 开发商网站南京网站建设建议需要做的10件事 南京网站制作:改善您在Google上的本地排名的3个步骤 南京网站建设认为网站是需要大型菜单功能的 南京网站制作教你识别网页设计师是不是在骗您 2020年最热门的5个网站设计趋势南京网站建设分享 南京网站制作认为制作出色网站照片的五个步骤 2020年南京网站建设最佳的网站设计服务
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例
安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三 安徽快三