小程序优雅实现公众号二维码弹窗

使用 Vue 3 实现二维码弹窗并支持长按识别

找了一些关注二维码的方法，都是弹出链接跳转到公众号，或者确认，点击图片长按，步骤有些繁琐

创建自定义组件

我们将创建一个名为 components/QRCodeModal.vue 的自定义组件，用于显示二维码弹窗。主要 show-menu-by-longpress="true"参数为长按识别的

QRCodeModal.vue

<template>
  <div v-if="isOpened" class="modal">
    <div class="modal-content">
      <p class="modal-title">关注公众号</p>
      <p class="modal-desc">请长按识别下方二维码关注小马智帮</p>
        <image
          show-menu-by-longpress="true"
          class="modal-qrcode"
          :src="qrCodeUrl"
          alt="QR Code"
        />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  isOpened: Boolean,
  qrCodeUrl: String
});

const emits = defineEmits(['close']);

const onClose = () => {
  emits('close');
};
</script>

<style lang="scss">
  .modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
  }
  
  .modal-title {
    font-size: 40px;
    font-weight: bold;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .modal-desc {
    margin-bottom: 20px;
  }
  
  .modal-qrcode {
    width: 300px;
    height: 300px;
  }
</style>

页面使用自定义组件

接下来，我们将在主页面中使用这个自定义组件。

Index.vue

<template>
    <view class="body">
        <view class="title">关注小马智帮公众号，第一时间收到商家发布的需求供您查阅</view>
        <view class="button">
            <nut-button color="#FF9912" size="small" @click="show = true"> 点击关注 </nut-button>
        </view>
    </view>
  <nut-popup v-model:visible="show" :style="{ padding: '30px 50px' }" closeable>
    <QRCodeModal
            :qrCodeUrl="qrCodeUrl"
            />
    </nut-popup>
</template>

<script setup>
import { ref } from 'vue';
import QRCodeModal from '@/components/QRCodeModal';

const show = ref(false)
const qrCodeUrl = ""


</script>

结果展示