更新记录

1.0.0(2021-12-16) 下载此版本

新增自定义关注微信公众号组件


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

目录

概要

  1. 需求:点击一个按钮去关注微信公众号,该按钮可以自定义样式。
  2. 实际开发中,发现微信官网只提供了一个组件official-account,并且几乎没有可扩展的内容,没有可配置的属性参数等,是固定样式。
  3. 于是自己开发插件解决该需求,能满足自定义的要求。

平台支持度

微信小程序

效果图

处理前:

image

处理后:

image

属性说明

属性名 类型 默认值 说明
msg String 关注微信公众号 提示的文字
isFollow Boolean false 是否已经关注过公众号,关注过就不显示(这个值可以根据后端接口判断)
max Number 3 关闭几次后就不再显示该组件

使用示例

<template>
    <view>
        <custom-official-account class="cont" msg="关注微信公众号,海量资料任你查阅!" :isFollow="false" :max="5"></custom-official-account>
    </view>
</template>
<style scoped>
    .cont {
        position: fixed;
        top: 60rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 700rpx;
    }
</style>

Tips

  1. 组件中不满足需求时,可以在uni_modules/custom-official-account/components/custom-official-account/custom-official-account.vue文件中去修改,与普通的uniapp中的vue页面开发是一样的。
  2. 该组件中'立即关注'按钮宽高使用px单位,这个按钮的宽高最好是不变,因为提供的组件的按钮差不多就是这么大,宽高也是固定的,并不会根据屏幕大小而改变。
  3. 该组件主要提供的是一种思路,所以最主要是读懂自己修改。
  4. 组件调试的时候,进入场景必须是1011(扫描二维码)才会生效。可以在微信开发工具里面添加该编译模式。
  5. 实现此功能之前最好是先了解下官方文档:开放能力 /official-account

如果对此插件有任何疑问,更多相关技术可以加QQ群交流:568984539

更多前端、uniapp、nodejs等相关知识可关注我个人博客:https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问