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

发布时间:2023年12月19日

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

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

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

1.二维码按钮

          <!-- 二维码按钮 -->
          <view class="item" bindtap="onCreatePoster">
            <van-icon name="scan" size="20px" />
            <view class="icon-title">
              二维码
            </view>
          </view>

2.二维码海报显示图层

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

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

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

  /**
     * 异步生成海报
     */
    async onCreatePoster() {
      console.log("异步生成海报");
      // 获取二维码信息(实质是后端生成的一张二维码图片)
      const qrRes = await createQRCode({id: this.data.basicInfo.id});
      console.log(qrRes,"qrRes");

      // 获取图片信息,图片获取成功后调用方法生成海报
      const pic = this.data.basicInfo.pic;
      wx.getImageInfo({
        src: pic,
        success:(res)=> {
          console.log(res.width)
          // console.log(res.height)
          const height = 490 * res.height / res.width
            // setData配置数据,数据配置完成后,生成海报
            this.createPosterDone(height, qrRes.data);
        }
      })
    },
  createPosterDone(picHeight,qrCode){
    const _this = this
    const _baseHeight = 74 + (picHeight + 120)
    this.setData({
      posterConfig: {
         // 海报总宽高
        width: 750,
        height: picHeight + 660,
        backgroundColor: '#fff',
        debug: false,
        // 图片所在容器起始位置,宽高等配置
        blocks: [{
          x: 76,
          y: 74,
          width: 604,
          height: picHeight + 120,
          borderWidth: 2,
          borderColor: '#c2aa85',
          borderRadius: 8
        }],
        // 图片配置
        images: [{
            x: 133,
            y: 133,
            url: _this.data.goodsInfoList.basicInfo.pic, // 商品图片
            width: 490,
            height: picHeight
          },
          {
            x: 76,
            y: _baseHeight + 199,
            url: qrCode, // 二维码
            width: 222,
            height: 222
          }
        ],
        // 文字信息:商品标题、价格、二维码处文字
        texts: [{
            x: 375,
            y: _baseHeight + 80,
            width: 650,
            lineNum: 2,
            text: _this.data.goodsInfoList.basicInfo.name,
            textAlign: 'center',
            fontSize: 40,
            color: '#333'
          },
          {
            x: 375,
            y: _baseHeight + 180,
            text: '¥' + _this.data.goodsInfoList.basicInfo.minPrice,
            textAlign: 'center',
            fontSize: 50,
            color: '#e64340'
          },
          {
            x: 352,
            y: _baseHeight + 320,
            text: '长按识别小程序码',
            fontSize: 28,
            color: '#999'
          }
        ],
      }
    }, () => {
      Poster.create(this.data.posterConfig, this);
    });
  },

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

data:{
        // 二维码海报配置
    posterConfig:{},
    // poster显示标识
    posterShow: false,
    // 保存到相册的图片
    posterImg: ''
},

onPosterSuccess(e){
    console.log("二维码生成成功");
    this.setData({
      posterImg: e.detail,
      posterShow: true
    })
  },

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

closePoster方法绑定到最外层

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

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

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

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

// 保存海报到相册
  savePosterPic(e){
    console.log("保存到相册",e);
    console.log(this.data.posterImg);//http://tmp/xlHB02MBJ50H9887bf9a40b5b5dc24b904e4132afcb0.png
    wx.saveImageToPhotosAlbum({
      // 不能直接使用this.data.basicInfo.pic的图片
      // "saveImageToPhotosAlbum:fail https://file.winwebedu.com/mall/collage-01.jpg not absolute path"
      filePath: this.data.posterImg,
      success(res) { 
        wx.showToast({
          title: '保存成功',
        })
      },
      fail(err){
        console.log(err);
        wx.showToast({
          title: '保存失败',
        })
      },
      // 无论成功与否关闭海报
      complete(){
        this.setData({
          posterShow: false
        });
      }
    })
  },

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

<poster class="wxcode-box" id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
            </poster>

  onPosterSuccess(e){
    // console.log("二维码生成成功");
    const { detail } = e;
    console.log(detail);
    wx.previewImage({
        current: detail,
        urls: [detail]
    })
  },
  
  posterConfig配置:
  jdConfig: {
        width: 750,
        height: 1334,
        backgroundColor: '#fff',
        debug: false,
        pixelRatio: 1,
        blocks: [
            {
                width: 690,
                height: 808,
                x: 30,
                y: 183,
                borderWidth: 2,
                borderColor: '#f0c2a0',
                borderRadius: 20,
            },
            {
                width: 634,
                height: 74,
                x: 59,
                y: 770,
                backgroundColor: '#fff',
                opacity: 0.5,
                zIndex: 100,
            },
        ],
        texts: [
            {
                x: 113,
                y: 61,
                baseLine: 'middle',
                text: '伟仔',
                fontSize: 32,
                color: '#8d8d8d',
            },
            {
                x: 30,
                y: 113,
                baseLine: 'top',
                text: '发现一个好物,推荐给你呀',
                fontSize: 38,
                color: '#080808',
            },
            {
                x: 92,
                y: 810,
                fontSize: 38,
                baseLine: 'middle',
                text: '标题标题标题标题标题标题标题标题标题',
                width: 570,
                lineNum: 1,
                color: '#8d8d8d',
                zIndex: 200,
            },
            {
                x: 59,
                y: 895,
                baseLine: 'middle',
                text: [
                    {
                        text: '2人拼',
                        fontSize: 28,
                        color: '#ec1731',
                    },
                    {
                        text: '¥99',
                        fontSize: 36,
                        color: '#ec1731',
                        marginLeft: 30,
                    }
                ]
            },
            {
                x: 522,
                y: 895,
                baseLine: 'middle',
                text: '已拼2件',
                fontSize: 28,
                color: '#929292',
            },
            {
                x: 59,
                y: 945,
                baseLine: 'middle',
                text: [
                    {
                        text: '商家发货&售后',
                        fontSize: 28,
                        color: '#929292',
                    },
                    {
                        text: '七天退货',
                        fontSize: 28,
                        color: '#929292',
                        marginLeft: 50,
                    },
                    {
                        text: '运费险',
                        fontSize: 28,
                        color: '#929292',
                        marginLeft: 50,
                    },
                ]
            },
            {
                x: 360,
                y: 1065,
                baseLine: 'top',
                text: '长按识别小程序码',
                fontSize: 38,
                color: '#080808',
            },
            {
                x: 360,
                y: 1123,
                baseLine: 'top',
                text: '超值好货一起拼',
                fontSize: 28,
                color: '#929292',
            },
        ],
        images: [
            {
                width: 62,
                height: 62,
                x: 30,
                y: 30,
                borderRadius: 62,
                url: 'https://img.yzcdn.cn/vant/cat.jpeg',
            },
            {
                width: 634,
                height: 634,
                x: 59,
                y: 210,
                url: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
            },
            {
                width: 220,
                height: 220,
                x: 92,
                y: 1020,
                url: 'https://img.yzcdn.cn/vant/cat.jpeg',
            },
            {
                width: 750,
                height: 90,
                x: 0,
                y: 1244,
                url: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
            }
        ]

    },

文章来源:https://blog.csdn.net/qq_34569497/article/details/135021956
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。