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

  • 2022-02-11 06:30:36

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

分享朋友圈现在大家的通用做法就是通过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||

猜你喜欢