欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序分享朋友圈生成海报

程序员文章站 2022-03-03 10:18:41
...

微信小程序实现分享到朋友圈

分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存,然后自行转发朋友圈。最近项目有这个需求, 于是就记录一下。(老规矩,我的博客复制粘贴就好使

如果想要海报上的二维码扫码完直接跳到指定的页面, 那么就需要生成一个带参数的二维码, 你需要看我的另一篇博客:微信小程序生成带参数的二维码以及小程序码

先看一下效果图:
微信小程序分享朋友圈生成海报

一、先把代码写上去

index.wxml代码:

  1. <view class="container">
  2. <image src="{{shareImage}}" class="share-image"></image>
  3. <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>
  4. <button bind:tap="eventDraw">绘制</button>
  5. <button bind:tap="eventSave">保存到本地</button>
  6. </view>

index.wxss代码:

  1. .share-image {
  2. width: 600rpx;
  3. height: 810rpx;
  4. margin: 0 75rpx;
  5. padding: 1px;
  6. margin-top: 40px;
  7. }
  8. button {
  9. margin-top: 100rpx;
  10. }

index.js代码:

  1. Page({
  2. data: {
  3. painting: {},
  4. shareImage: '',
  5. },
  6. onLoad() {
  7. this.eventDraw()
  8. },
  9. eventDraw() {
  10. var that = this;
  11. wx.showLoading({
  12. title: '绘制分享图片中',
  13. mask: true
  14. })
  15. this.setData({
  16. painting: {
  17. width: 375,
  18. height: 568,
  19. clear: true,
  20. views: [
  21. //这个是一个纯白的图片,给整个画布一个白背景,要不然会有马赛克
  22. {
  23. type: 'image',
  24. url: 'https://tjhaizhixian.com/weixin/item/bai.jpg',
  25. width: 375,
  26. height: 568
  27. },
  28. //边框,直接拿了一张图,当做边框
  29. {
  30. type: 'image',
  31. url: 'https://tjhaizhixian.com/weixin/item/biankuang.png',
  32. width: 375,
  33. height: 568
  34. },
  35. //商品图
  36. {
  37. type: 'image',
  38. url: 'https://tjhan.com/seafood/public78fffad452d2e158636b.jpg',
  39. width: 328,
  40. height: 328,
  41. top:20,
  42. left:22,
  43. },
  44. //商品名称
  45. {
  46. type: 'text',
  47. content: '产品名称产品11111',
  48. fontSize: 20,
  49. lineHeight: 21,
  50. color: '#000000',
  51. textAlign: 'left',
  52. top: 360,
  53. left: 36,
  54. width: 290,
  55. MaxLineNumber: 2,
  56. breakWord: true,
  57. bolder: true
  58. },
  59. //线条,同样也是用的图
  60. {
  61. type: 'image',
  62. url: 'https://tjhaizhixian.com/weixin/item/xiantiao.png',
  63. width: 325,
  64. height: 5,
  65. top: 443,
  66. left:22
  67. },
  68. //商品价格
  69. {
  70. type: 'text',
  71. content: '¥198.00',
  72. fontSize: 20,
  73. color: '#E62004',
  74. textAlign: 'left',
  75. top: 414,
  76. left: 36,
  77. bolder: true
  78. },
  79. //名称
  80. {
  81. type: 'text',
  82. content: '名称名称',
  83. fontSize: 15,
  84. lineHeight: 21,
  85. color: '#7E7E8B',
  86. textAlign: 'left',
  87. top: 414,
  88. left: 267,
  89. width: 70,
  90. MaxLineNumber: 1,
  91. breakWord: true,
  92. },
  93. // 文字, 打不出这个文字带阴影的效果, 所以也用的图
  94. {
  95. type: 'image',
  96. url: 'https://tjhaizhixian.com/weixin/item/wenzi.png',
  97. width: 145,
  98. height: 75,
  99. top: 460,
  100. left: 36,
  101. },
  102. //二维码
  103. {
  104. type: 'image',
  105. url: 'https://tjhaizhixian.com/Public/Home/images/banner/min_code.jpg',
  106. top: 455,
  107. left: 260,
  108. width: 85,
  109. height: 85
  110. },
  111. ]
  112. }
  113. })
  114. },
  115. eventSave() {
  116. wx.saveImageToPhotosAlbum({
  117. filePath: this.data.shareImage,
  118. success(res) {
  119. wx.showToast({
  120. title: '保存图片成功',
  121. icon: 'success',
  122. duration: 2000
  123. })
  124. }
  125. })
  126. },
  127. eventGetImage(event) {
  128. console.log(event)
  129. wx.hideLoading()
  130. const {
  131. tempFilePath,
  132. errMsg
  133. } = event.detail
  134. if (errMsg === 'canvasdrawer:ok') {
  135. this.setData({
  136. shareImage: tempFilePath
  137. })
  138. }
  139. }
  140. })

index.json里面的代码:

  1. {
  2. "navigationBarTitleText": "生成海报",
  3. "usingComponents": {
  4. //在使用页面注册组件(下面有下载地址,如果放的路径不一样,自行就修改为你的路径就行)
  5. "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
  6. }
  7. }

组件下载地址:

  1. 链接:https://pan.baidu.com/s/1i9zq01x58p1MdDMVmnz-_Q&shfl=sharepset
  2. 提取码:8hrj

二、对象结构

1.数据对象的第一层需要三个参数: width、height、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image 标签中即可。
2.当前可以绘制3种类型的配置: image、text、rect。配置的属性基本上使用的都是 css 的驼峰名称,还是比较好理解的。

image(图片)
|属性|含义|默认值|可选值|
|—|—|—|—|
|url|绘制的图片地址,可以是本地图片,如:/images/1.jpeg|||
|top|左上角距离画板顶部的距离|||
|left|左上角距离画板左侧的距离|||
|width|要画多宽|0||
|height|要画多高|0||
text(文本)
|属性|含义|默认值|可选值|
|—|—|—|—|
|content|绘制文本|默认为空||
|color|颜色|black||
|fontSize|字体大小|16||
|textAlign|文字对齐方式|left|center、left、right|
|lineHeight|行高,只有在多行文本中才有用|20||
|top|文本左上角距离画板顶部的距离|0||
|left|文本左上角距离画板左侧的距离|0||
|breakWord|是否需要换行|false|true、false|
|MaxLineNumber|最大行数,只有设置 breakWord: true ,当前属性才有效,超出行数内容的显示为…|2||
|width|和 MaxLineNumber 属性配套使用,width 就是达到换行的宽度|0||
|bolder|是否加粗|false|true、false|
|textDecoration|显示中划线、下划线效果|none|underline(下划线)、line-through(中划线)|
rect (矩形,线条)
|属性|含义|默认值|可选值|
|—|—|—|—|
|background|背景颜色|black||
|top|左上角距离画板顶部的距离|||
|left|左上角距离画板左侧的距离|||
|width|要画多宽|0||
|height|要画多高|0||