背景：點(diǎn)擊圖標(biāo)，生成海報(bào)后，點(diǎn)擊保存相冊，可以保存

生成海報(bào)：插件wxa-plugin-canvas，此處使用頁面異步生成組件方式，官網(wǎng)地址：wxa-plugin-canvas - npm

二維碼：調(diào)用后端接口生成二維碼

1.二維碼按鈕

          <!-- 二維碼按鈕 -->
          <view class="item" bindtap="onCreatePoster">
            <van-icon name="scan" size="20px" />
            <view class="icon-title">
              二維碼
            </view>
          </view>

2.二維碼海報(bào)顯示圖層

<!-- 二維碼海報(bào)：注意布局要和其他元素獨(dú)立 -->
<view bindtap="closePoster">
  <!-- 一定要設(shè)置元素的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.點(diǎn)擊按鈕后異步生成海報(bào)

需要調(diào)用獲取圖片信息接口wx.getImageInfo()，獲取到圖片的寬高以做整體寬高配置

  /**
     * 異步生成海報(bào)
     */
    async onCreatePoster() {
      console.log("異步生成海報(bào)");
      // 獲取二維碼信息(實(shí)質(zhì)是后端生成的一張二維碼圖片)
      const qrRes = await createQRCode({id: this.data.basicInfo.id});
      console.log(qrRes,"qrRes");

      // 獲取圖片信息,圖片獲取成功后調(diào)用方法生成海報(bào)
      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配置數(shù)據(jù)，數(shù)據(jù)配置完成后，生成海報(bào)
            this.createPosterDone(height, qrRes.data);
        }
      })
    },
  createPosterDone(picHeight,qrCode){
    const _this = this
    const _baseHeight = 74 + (picHeight + 120)
    this.setData({
      posterConfig: {
         // 海報(bào)總寬高
        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
          }
        ],
        // 文字信息：商品標(biāo)題、價(jià)格、二維碼處文字
        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: '長按識(shí)別小程序碼',
            fontSize: 28,
            color: '#999'
          }
        ],
      }
    }, () => {
      Poster.create(this.data.posterConfig, this);
    });
  },

4.海報(bào)生成成功后將海報(bào)數(shù)據(jù)（海報(bào)臨時(shí)路徑）和是否顯示海報(bào)層，存放到data中

data:{
        // 二維碼海報(bào)配置
    posterConfig:{},
    // poster顯示標(biāo)識(shí)
    posterShow: false,
    // 保存到相冊的圖片
    posterImg: ''
},

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

5.點(diǎn)擊海報(bào)任何位置，除了保存到相冊按鈕，隱藏海報(bào)層

closePoster方法綁定到最外層

保存按鈕使用catchbind阻止冒泡，即可防止點(diǎn)擊保存時(shí)也會(huì)關(guān)掉海報(bào)層

<!-- 二維碼海報(bào)：注意布局要和其他元素獨(dú)立 -->
<view bindtap="closePoster">
  <!-- 一定要設(shè)置元素的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>

  // 關(guān)閉海報(bào)
  closePoster(){
    this.setData({
      posterShow: false
    })
  },

6.點(diǎn)擊保存到相冊按鈕，調(diào)用wx.saveImageToPhotosAlbum()方法保存圖片到本地

注意wx.saveImageToPhotosAlbum()方法的參數(shù)filePath不能是絕對路徑或者網(wǎng)絡(luò)圖片，必須是臨時(shí)圖片。所以在生成海報(bào)成功后需要將圖片保存到data的posterImg中，保存時(shí)用這個(gè)就可以了文章來源地址http://www.zghlxwxcb.cn/news/detail-842182.html

// 保存海報(bào)到相冊
  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: '保存失敗',
        })
      },
      // 無論成功與否關(guān)閉海報(bào)
      complete(){
        this.setData({
          posterShow: false
        });
      }
    })
  },

7.補(bǔ)充，如果要直接生成二維碼不使用異步

<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: '發(fā)現(xiàn)一個(gè)好物，推薦給你呀',
                fontSize: 38,
                color: '#080808',
            },
            {
                x: 92,
                y: 810,
                fontSize: 38,
                baseLine: 'middle',
                text: '標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題',
                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: '商家發(fā)貨&售后',
                        fontSize: 28,
                        color: '#929292',
                    },
                    {
                        text: '七天退貨',
                        fontSize: 28,
                        color: '#929292',
                        marginLeft: 50,
                    },
                    {
                        text: '運(yùn)費(fèi)險(xiǎn)',
                        fontSize: 28,
                        color: '#929292',
                        marginLeft: 50,
                    },
                ]
            },
            {
                x: 360,
                y: 1065,
                baseLine: 'top',
                text: '長按識(shí)別小程序碼',
                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',
            }
        ]

    },

到了這里，關(guān)于微信小程序生成二維碼海報(bào)并分享的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！