devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序生成二维码海报并分享

作者：繁依Fanyi0 | 2024-05-28 23:02:21

赞

踩

小程序生成二维码

背景：点击图标，生成海报后，点击保存相册，可以保存

生成海报：插件wxa-plugin-canvas，此处使用页面异步生成组件方式，官网地址：wxa-plugin-canvas - npm

二维码：调用后端接口生成二维码

1.二维码按钮

  1.           <!-- 二维码按钮 -->
  2.           <view class="item" bindtap="onCreatePoster">
  3.             <van-icon name="scan" size="20px" />
  4.             <view class="icon-title">
  5.               二维码
  6.             </view>
  7.           </view>

2.二维码海报显示图层

  1. <!-- 二维码海报：注意布局要和其他元素独立 -->
  2. <view bindtap="closePoster">
  3.   <!-- 一定要设置元素的id="poster" -->
  4.   <poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
  5.   <view wx:if="{{posterShow}}" class="popup-mask"></view>
  6.   <view wx:if="{{posterShow}}" class="posterImg-box">
  7.     <image mode="widthFix" class="posterImg" src="{{posterImg}}"></image>
  8.     <view class="btn-create" data-pic="{{basicInfo.pic}}" catchtap="savePosterPic">保存到相册</view>
  9.   </view>
  10. </view>

3.点击按钮后异步生成海报

需要调用获取图片信息接口wx.getImageInfo()，获取到图片的宽高以做整体宽高配置

  1.   /**
  2.      * 异步生成海报
  3.      */
  4.     async onCreatePoster() {
  5.       console.log("异步生成海报");
  6.       // 获取二维码信息(实质是后端生成的一张二维码图片)
  7.       const qrRes = await createQRCode({id: this.data.basicInfo.id});
  8.       console.log(qrRes,"qrRes");
  9.  
  10.       // 获取图片信息,图片获取成功后调用方法生成海报
  11.       const pic = this.data.basicInfo.pic;
  12.       wx.getImageInfo({
  13.         src: pic,
  14.         success:(res)=> {
  15.           console.log(res.width)
  16.           // console.log(res.height)
  17.           const height = 490 * res.height / res.width
  18.             // setData配置数据，数据配置完成后，生成海报
  19.             this.createPosterDone(height, qrRes.data);
  20.         }
  21.       })
  22.     },
  23.   createPosterDone(picHeight,qrCode){
  24.     const _this = this
  25.     const _baseHeight = 74 + (picHeight + 120)
  26.     this.setData({
  27.       posterConfig: {
  28.          // 海报总宽高
  29.         width: 750,
  30.         height: picHeight + 660,
  31.         backgroundColor: '#fff',
  32.         debug: false,
  33.         // 图片所在容器起始位置，宽高等配置
  34.         blocks: [{
  35.           x: 76,
  36.           y: 74,
  37.           width: 604,
  38.           height: picHeight + 120,
  39.           borderWidth: 2,
  40.           borderColor: '#c2aa85',
  41.           borderRadius: 8
  42.         }],
  43.         // 图片配置
  44.         images: [{
  45.             x: 133,
  46.             y: 133,
  47.             url: _this.data.goodsInfoList.basicInfo.pic, // 商品图片
  48.             width: 490,
  49.             height: picHeight
  50.           },
  51.           {
  52.             x: 76,
  53.             y: _baseHeight + 199,
  54.             url: qrCode, // 二维码
  55.             width: 222,
  56.             height: 222
  57.           }
  58.         ],
  59.         // 文字信息：商品标题、价格、二维码处文字
  60.         texts: [{
  61.             x: 375,
  62.             y: _baseHeight + 80,
  63.             width: 650,
  64.             lineNum: 2,
  65.             text: _this.data.goodsInfoList.basicInfo.name,
  66.             textAlign: 'center',
  67.             fontSize: 40,
  68.             color: '#333'
  69.           },
  70.           {
  71.             x: 375,
  72.             y: _baseHeight + 180,
  73.             text: '￥' + _this.data.goodsInfoList.basicInfo.minPrice,
  74.             textAlign: 'center',
  75.             fontSize: 50,
  76.             color: '#e64340'
  77.           },
  78.           {
  79.             x: 352,
  80.             y: _baseHeight + 320,
  81.             text: '长按识别小程序码',
  82.             fontSize: 28,
  83.             color: '#999'
  84.           }
  85.         ],
  86.       }
  87.     }, () => {
  88.       Poster.create(this.data.posterConfig, this);
  89.     });
  90.   },

4.海报生成成功后将海报数据（海报临时路径）和是否显示海报层，存放到data中

  1. data:{
  2.         // 二维码海报配置
  3.     posterConfig:{},
  4.     // poster显示标识
  5.     posterShow: false,
  6.     // 保存到相册的图片
  7.     posterImg: ''
  8. },
  9.  
  10. onPosterSuccess(e){
  11.     console.log("二维码生成成功");
  12.     this.setData({
  13.       posterImg: e.detail,
  14.       posterShow: true
  15.     })
  16.   },

5.点击海报任何位置，除了保存到相册按钮，隐藏海报层

closePoster方法绑定到最外层

保存按钮使用catchbind阻止冒泡，即可防止点击保存时也会关掉海报层

  1. <!-- 二维码海报：注意布局要和其他元素独立 -->
  2. <view bindtap="closePoster">
  3.   <!-- 一定要设置元素的id="poster" -->
  4.   <poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
  5.   <view wx:if="{{posterShow}}" class="popup-mask"></view>
  6.   <view wx:if="{{posterShow}}" class="posterImg-box">
  7.     <image mode="widthFix" class="posterImg" src="{{posterImg}}"></image>
  8.     <view class="btn-create" data-pic="{{basicInfo.pic}}" catchtap="savePosterPic">保存到相册</view>
  9.   </view>
  10. </view>
  1.   // 关闭海报
  2.   closePoster(){
  3.     this.setData({
  4.       posterShow: false
  5.     })
  6.   },

6.点击保存到相册按钮，调用wx.saveImageToPhotosAlbum()方法保存图片到本地

注意wx.saveImageToPhotosAlbum()方法的参数filePath不能是绝对路径或者网络图片，必须是临时图片。所以在生成海报成功后需要将图片保存到data的posterImg中，保存时用这个就可以了

  1. // 保存海报到相册
  2.   savePosterPic(e){
  3.     console.log("保存到相册",e);
  4.     console.log(this.data.posterImg);//http://tmp/xlHB02MBJ50H9887bf9a40b5b5dc24b904e4132afcb0.png
  5.     wx.saveImageToPhotosAlbum({
  6.       // 不能直接使用this.data.basicInfo.pic的图片
  7.       // "saveImageToPhotosAlbum:fail https://file.winwebedu.com/mall/collage-01.jpg not absolute path"
  8.       filePath: this.data.posterImg,
  9.       success(res) { 
  10.         wx.showToast({
  11.           title: '保存成功',
  12.         })
  13.       },
  14.       fail(err){
  15.         console.log(err);
  16.         wx.showToast({
  17.           title: '保存失败',
  18.         })
  19.       },
  20.       // 无论成功与否关闭海报
  21.       complete(){
  22.         this.setData({
  23.           posterShow: false
  24.         });
  25.       }
  26.     })
  27.   },

7.补充，如果要直接生成二维码不使用异步

  1. <poster class="wxcode-box" id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
  2.             </poster>
  1.  
  2.   onPosterSuccess(e){
  3.     // console.log("二维码生成成功");
  4.     const { detail } = e;
  5.     console.log(detail);
  6.     wx.previewImage({
  7.         current: detail,
  8.         urls: [detail]
  9.     })
  10.   },
  11.   
  12.   posterConfig配置：
  13.   jdConfig: {
  14.         width: 750,
  15.         height: 1334,
  16.         backgroundColor: '#fff',
  17.         debug: false,
  18.         pixelRatio: 1,
  19.         blocks: [
  20.             {
  21.                 width: 690,
  22.                 height: 808,
  23.                 x: 30,
  24.                 y: 183,
  25.                 borderWidth: 2,
  26.                 borderColor: '#f0c2a0',
  27.                 borderRadius: 20,
  28.             },
  29.             {
  30.                 width: 634,
  31.                 height: 74,
  32.                 x: 59,
  33.                 y: 770,
  34.                 backgroundColor: '#fff',
  35.                 opacity: 0.5,
  36.                 zIndex: 100,
  37.             },
  38.         ],
  39.         texts: [
  40.             {
  41.                 x: 113,
  42.                 y: 61,
  43.                 baseLine: 'middle',
  44.                 text: '伟仔',
  45.                 fontSize: 32,
  46.                 color: '#8d8d8d',
  47.             },
  48.             {
  49.                 x: 30,
  50.                 y: 113,
  51.                 baseLine: 'top',
  52.                 text: '发现一个好物，推荐给你呀',
  53.                 fontSize: 38,
  54.                 color: '#080808',
  55.             },
  56.             {
  57.                 x: 92,
  58.                 y: 810,
  59.                 fontSize: 38,
  60.                 baseLine: 'middle',
  61.                 text: '标题标题标题标题标题标题标题标题标题',
  62.                 width: 570,
  63.                 lineNum: 1,
  64.                 color: '#8d8d8d',
  65.                 zIndex: 200,
  66.             },
  67.             {
  68.                 x: 59,
  69.                 y: 895,
  70.                 baseLine: 'middle',
  71.                 text: [
  72.                     {
  73.                         text: '2人拼',
  74.                         fontSize: 28,
  75.                         color: '#ec1731',
  76.                     },
  77.                     {
  78.                         text: '¥99',
  79.                         fontSize: 36,
  80.                         color: '#ec1731',
  81.                         marginLeft: 30,
  82.                     }
  83.                 ]
  84.             },
  85.             {
  86.                 x: 522,
  87.                 y: 895,
  88.                 baseLine: 'middle',
  89.                 text: '已拼2件',
  90.                 fontSize: 28,
  91.                 color: '#929292',
  92.             },
  93.             {
  94.                 x: 59,
  95.                 y: 945,
  96.                 baseLine: 'middle',
  97.                 text: [
  98.                     {
  99.                         text: '商家发货&售后',
  100.                         fontSize: 28,
  101.                         color: '#929292',
  102.                     },
  103.                     {
  104.                         text: '七天退货',
  105.                         fontSize: 28,
  106.                         color: '#929292',
  107.                         marginLeft: 50,
  108.                     },
  109.                     {
  110.                         text: '运费险',
  111.                         fontSize: 28,
  112.                         color: '#929292',
  113.                         marginLeft: 50,
  114.                     },
  115.                 ]
  116.             },
  117.             {
  118.                 x: 360,
  119.                 y: 1065,
  120.                 baseLine: 'top',
  121.                 text: '长按识别小程序码',
  122.                 fontSize: 38,
  123.                 color: '#080808',
  124.             },
  125.             {
  126.                 x: 360,
  127.                 y: 1123,
  128.                 baseLine: 'top',
  129.                 text: '超值好货一起拼',
  130.                 fontSize: 28,
  131.                 color: '#929292',
  132.             },
  133.         ],
  134.         images: [
  135.             {
  136.                 width: 62,
  137.                 height: 62,
  138.                 x: 30,
  139.                 y: 30,
  140.                 borderRadius: 62,
  141.                 url: 'https://img.yzcdn.cn/vant/cat.jpeg',
  142.             },
  143.             {
  144.                 width: 634,
  145.                 height: 634,
  146.                 x: 59,
  147.                 y: 210,
  148.                 url: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
  149.             },
  150.             {
  151.                 width: 220,
  152.                 height: 220,
  153.                 x: 92,
  154.                 y: 1020,
  155.                 url: 'https://img.yzcdn.cn/vant/cat.jpeg',
  156.             },
  157.             {
  158.                 width: 750,
  159.                 height: 90,
  160.                 x: 0,
  161.                 y: 1244,
  162.                 url: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
  163.             }
  164.         ]
  165.  
  166.     },

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/639645
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号