UniApp开发秘籍：打造用户无法抗拒的公众号弹窗组件

在移动端开发中，吸引用户关注公众号是一个常见需求。UniApp作为一个多平台开发框架，为此提供了便捷的解决方案。本文将介绍如何在UniApp中利用official-account组件封装一个灵活可控的公众号弹窗，提升用户互动体验并优化关注流程。

组件封装步骤
首先，在components目录下创建一个名为GzhContainer的Vue组件：

路径：
/components/GzhContainer/GzhContainer.vue

组件模板（template）

<template>
  <view class="gzh-container" v-if="isShow">
    <view class="gzh-bg">
      <image class="gzh-bg" src="/static/icon/gh-bg.png" mode="widthFix"></image>
      <view class="gzh-close" @click="onClose">
        <image class="icon-close" src="/static/icon/gh-close.png"></image>
      </view>
    </view>
    <view class="gzh-cnt">
      <official-account @load="bindLoad" @error="bindError"></official-account>
    </view>
  </view>
</template>

组件脚本（script）

<script>
export default {
  name: "GzhContainer",
  props: {
    status: {
      type: Number,
      default: 1, // 0 未关注(显示)，1 已关注(不显示)
    }
  },
  data() {
    return {
      isShow: false,
      loading: true,
      isError: false,
    };
  },
  watch: {
    status(newVal) {
      this.isShow = newVal === 0 && !this.loading && !this.isError;
    },
    loading(newVal) {
      this.isShow = this.status === 0 && !newVal && !this.isError;
    },
  },
  methods: {
    bindLoad({ detail }) {
      this.isShow = detail.status === 0;
      this.loading = false;
      this.$emit('load', true);
    },
    bindError() {
      this.isShow = false;
      this.loading = false;
      this.isError = true;
      this.$emit('load', false);
    },
    onClose() {
      this.isShow = false;
      this.$emit('close');
    },
  }
}
</script>

组件样式（style）

<style lang="scss">
.gzh-container {
  position: fixed;
  bottom: 180rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 10;

  .gzh-bg {
    width: 728rpx;
    height: 318rpx;
    position: relative;
  }

  .gzh-cnt {
    position: absolute;
    width: 668rpx;
    left: 50%;
    transform: translate(-50%, 0%);
    bottom: 40rpx;
  }

  .gzh-close {
    position: absolute;
    right: 30rpx;
    top: 44rpx;
    height: 50rpx;
    width: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon-close {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
</style>

在上述代码中，通过控制isShow状态，我们可以灵活地显示或隐藏公众号弹窗。此外，bindLoad和bindError方法分别处理组件的加载成功与失败状态，通过$emit方法与父组件通信。

使用示例
在App.vue或其他页面组件中引入并使用GzhContainer组件：

<template>
  <view>
    <!-- 页面内容 -->
    <gzh-container :status="status" @load="handleLoad" @close="handleClose"></gzh-container>
  </view>
</template>

<script>
import GzhContainer from "@/components/GzhContainer/GzhContainer";

export default {
  components: { GzhContainer },
  data() {
    return {
      status: 0, // 示例：0 未关注，1 已关注
    };
  },
  methods: {
    handleLoad(success) {
      if (success) {
        console.log("公众号弹窗加载成功");
      } else {
        console.log("公众号弹窗加载失败");
      }
    },
    handleClose() {
      console.log("公众号弹窗被关闭");
    },
  },
};
</script>

通过这种方式，开发者可以轻松集成和控制公众号弹窗组件，增强用户的互动体验。此外，可根据实际需求调整组件的样式和行为，以适应不同的应用场景。