UniApp二維碼生成詳解

一、UniApp二維碼生成海報

海報是一種非常流行的宣傳方式。在UniApp中，我們可以利用uni-app-qrcode組件生成二維碼再利用canvas生成海報。具體步驟如下：

1、為了保證海報生成的清晰度，我們需要在manifest.json文件中增加以下代碼：

"mp-weixin": {
  "screenshot": {
    "borderRadius": "20px"
  }
}

2、在template中使用uni-app-qrcode生成二維碼，並將其渲染至canvas中：

<template>
  <view>
    <canvas canvas-id="qrcode" class="qr-canvas"/>
  </view>
</template>

<script>
  import QRCode from '@/uni_modules/uni-app-qrcode/components/uni-app-qrcode/uni-app-qrcode.vue';

  export default {
    components: {
      QRCode
    },
    mounted() {
      this.draw();
    },
    methods: {
      draw() {
        const query = this.$root.$mp.query;
        uni.showToast({
          title: '海報生成中',
          icon: 'loading'
        });
        let qrcanvas = uni.createCanvasContext('qrcode', this);
        let canvasWidth = 375;
        let canvasHeight = 667;
        let qrcodeWidth = 200;
        let x = (canvasWidth - qrcodeWidth) / 2;
        qrcanvas.drawImage('/static/logo.png', x, 160, qrcodeWidth, qrcodeWidth);
        qrcanvas.draw(false, () => {
          uni.canvasToTempFilePath({
            canvasId: 'qrcode',
            success: (res) => {
              let qrSrc = res.tempFilePath;
              this.drawPoster(qrSrc);
            }
          }, this);
        }, this);
      },
      drawPoster(qrSrc) {
        // 生成海報內容
        let poster = uni.createCanvasContext('poster', this);
        let canvasWidth = 375;
        let canvasHeight = 667;
        poster.setFillStyle('#f3f3f3');
        poster.fillRect(0, 0, canvasWidth, canvasHeight);
        poster.drawImage('/static/bg.jpg', 0, 0, canvasWidth, 400);
        poster.save();
        poster.beginPath();
        poster.arc(70, 350, 35, 0, 2*Math.PI);
        poster.clip();
        poster.drawImage('/static/avatar.png', 35, 315, 70, 70);
        poster.restore();
        poster.setFontSize(16);
        poster.fillText('海報標題', 100, 340);
        poster.fillText('海報內容', 100, 360);
        poster.drawImage(qrSrc, 230, 410, 100, 100);
        poster.draw(true, () => {
          uni.canvasToTempFilePath({
            canvasId: 'poster',
            success: (res) => {
              this.posterSrc = res.tempFilePath;
              uni.hideToast();
            }
          }, this);
        }, this);
      }
    }
  }
</script>

二、UniApp生成小程序二維碼

在UniApp中，我們可以使用uni.request接口調用微信提供的API生成小程序二維碼。具體步驟如下：

1、首先，在manifest.json文件中聲明需要使用uni.request接口的url地址：

{
  "mp-weixin": {
    "request": {
      "url": "https://api.weixin.qq.com/wxa/getwxacodeunlimit"
    }
  }
}

2、在uni-app中引入uni.request，編寫生成小程序二維碼的代碼：

<template>
  <image :src="image" />
</template>

<script>
  export default {
    data() {
      return {
        image: ''
      };
    },
    mounted() {
      this.getQRCode();
    },
    methods: {
      async getQRCode() {
        let res = await uni.request({
          url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit',
          method: 'POST',
          header: {
            'content-type': 'application/json',
            'Authorization': 'Bearer ' + accessToken
          },
          data: {
            "scene": "123",
            "width": 280,
            "auto_color": false,
            "line_color": {"r":"0","g":"0","b":"0"},
            "is_hyaline": false
          },
          responseType: 'arraybuffer'
        });
        let base64 = uni.arrayBufferToBase64(res.data);
        this.image = 'data:image/jpeg;base64,' + base64;
      }
    }
  }
</script>

三、UniApp生成帶信息的二維碼

生成帶信息的二維碼，可以使用uni-app-qrcode組件。具體步驟如下：

1、在template中使用uni-app-qrcode生成帶信息的二維碼：

<template>
  <view>
    <qr-code content="{{ content }}" :size="300" :mode="mode" :margin="margin" :background="background" :foreground="foreground"></qr-code>
  </view>
</template>

<script>
  import QRCode from '@/uni_modules/uni-app-qrcode/components/uni-app-qrcode/uni-app-qrcode.vue';

  export default {
    components: {
      QRCode
    },
    data() {
      return {
        content: 'https://www.baidu.com',
        mode: 'square',
        margin: 4,
        background: '#ffffff',
        foreground: '#000000'
      };
    }
  }
</script>

四、UniApp長按識別二維碼

為了方便用戶識別二維碼，我們可以通過長按來觸發手機的識別功能。具體步驟如下：

1、在template中使用uni-longtap指令綁定長按事件：

<template>
  <image :src="qrCode" uni-longtap="previewQrCode" />
</template>

<script>
  export default {
    data() {
      return {
        qrCode: '/static/qrcode.jpg'
      };
    },
    methods: {
      previewQrCode() {
        uni.previewImage({
          urls: [this.qrCode]
        });
      }
    }
  }
</script>

五、UniApp生成二維碼圖片

在UniApp中使用uni-app-qrcode組件生成二維碼圖片非常簡單。

1、在template中使用uni-app-qrcode生成二維碼圖片：

<template>
  <qr-code content="{{ content }}" :size="300" :mode="mode" :margin="margin" :background="background" :foreground="foreground" @imageLoad="onImageLoad" />
</template>

<script>
  import QRCode from '@/uni_modules/uni-app-qrcode/components/uni-app-qrcode/uni-app-qrcode.vue';

  export default {
    components: {
      QRCode
    },
    data() {
      return {
        content: 'https://www.baidu.com',
        mode: 'square',
        margin: 4,
        background: '#ffffff',
        foreground: '#000000'
      };
    },
    methods: {
      onImageLoad(e) {
        uni.saveImageToPhotosAlbum({
          filePath: e.detail.path,
          success: () => {
            uni.showToast({
              title: '保存成功'
            });
          },
          fail: () => {
            uni.showToast({
              title: '保存失敗'
            });
          }
        });
      }
    }
  }
</script>

六、UniApp識別二維碼

其中一種識別二維碼的方式是使用uni.scanCode，在UniApp中非常簡單。

1、在template中添加觸發識別二維碼的按鈕：

<template>
  <button type="primary" @click="scanQRCode">掃描二維碼</button>
</template>

<script>
  export default {
    methods: {
      scanQRCode() {
        uni.scanCode({
          onlyFromCamera: true,
          success: (res) => {
            uni.navigateTo({
              url: res.result
            });
          }
        });
      }
    }
  }
</script>

七、UniApp生成二維碼海報

最後，我們可以將UniApp二維碼生成和海報生成結合起來，生成二維碼海報。具體步驟如下：

1、在template中使用uni-app-qrcode生成二維碼，並將其渲染至canvas中：

<template>
  <view>
    <canvas canvas-id="qrcode" class="qr-canvas"/>
  </view>
</template>

<script>
  import QRCode from '@/uni_modules/uni-app-qrcode/components/uni-app-qrcode/uni-app-qrcode.vue';

  export default {
    components: {
      QRCode
    },
    mounted() {
      this.draw();
    },
    methods: {
      draw() {
        const query = this.$root.$mp.query;
        uni.showToast({
          title: '正在生成海報',
          icon: 'loading'
        });
        let qrcanvas = uni.createCanvasContext('qrcode', this);
        let canvasWidth = 375;
        let canvasHeight = 667;
        let qrcodeWidth = 200;
        let x = (canvasWidth - qrcodeWidth) / 2;
        qrcanvas.drawImage('/static/logo.png', x, 160, qrcodeWidth, qrcodeWidth);
        qrcanvas.draw(false, () => {
          uni.canvasToTempFilePath({
            canvasId: 'qrcode',
            success: (res) => {
              let qrSrc = res.tempFilePath;
              this.drawPoster(qrSrc);
            }
          }, this);
        }, this);
      },
      drawPoster(qrSrc) {
        // 生成海報內容
        let poster = uni.createCanvasContext('poster', this);
        let canvasWidth = 375;
        let canvasHeight = 667;
        poster.setFillStyle('#f3f3f3');
        poster.fillRect(0, 0, canvasWidth, canvasHeight);
        poster.drawImage('/static/bg.jpg', 0, 0, canvasWidth, 400);
        poster.save();
        poster.beginPath();
        poster.arc(70, 350, 35, 0, 2*Math.PI);
        poster.clip();
        poster.drawImage('/static/avatar.png', 35, 315, 70, 70);
        poster.restore();
        poster.setFontSize(16);
        poster.fillText('海報標題', 100, 340);
        poster.fillText('海報內容', 100, 360);
        poster.drawImage(qrSrc, 230, 410, 100, 100);
        poster.draw(true, () => {
          uni.canvasToTempFilePath({
            canvasId: 'poster',
            success: (res) => {
              uni.hideToast();
              this.posterSrc = res.tempFilePath;
            }
          }, this);
        }, this);
      }
    }
  }
</script>

八、UniApp如何生成二維碼

通過上面的幾個例子，我們已經了解了UniApp如何生成二維碼。簡單總結如下：

1、使用uni-app-qrcode組件，可以方便地生成二維碼；

2、使用uni.request接口，可以調用微信提供的API生成小程序二維碼；

3、在canvas中使用uni-app-qrcode組件，可以生成帶信息的二維碼，並將其加入到海報中；

4、通過長按事件，可以觸發手機的識別功能，方便用戶識別二維碼；

5、使用uni.scanCode接口，可以實現掃描二維碼的功能；

6、最後，我們將生成的二維碼加入到海報中，生成一張精美的二維碼海報。

原創文章，作者：ZYQZR，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/371566.html