小程序OfficialAccount 去掉黑色边框的一种思路

首先来看一下实现后的样式

思路: 通过父元素设置overflow: hidden属性 + 子元素宽高大于父元素来实现 注意: OfficialAccount组件限定最小宽度为300px，高度为定值84px。且一个页面只能加载一个关注公众号组件

废话不多说 上干货

import Taro from '@tarojs/taro'
import { View, OfficialAccount } from '@tarojs/components'

import './cFollow.scss'

function CFollow () {
  const [show, setShow] = Taro.useState(true) // 加载失败时不展示dom, 提高性能
  const [hidden, setHidden] = Taro.useState(true) // 加载成功时 将dom展示出来

  /**
   * @description: 加载成功回调
   * @return {*}
   */
  const onLoad = () => setHidden(false)

  /**
   * @description: 加载失败回调
   * @return {*}
   */
  const onError = () => setShow(false)

  return show && (
    <View className='c-follow' hidden={hidden}>
      <View className='c-follow-warp'>
        <OfficialAccount
          onLoad={onLoad}
          onError={onError}
          className='c-follow-wx'
        />
      </View>
    </View>
  )
}

export default Taro.memo(CFollow)

scss代码

.c-follow {
  width: 700px;
  height: 170px;
  display: flex;
  padding: 0 18px;
  margin: 16px auto;
  background: #fff;
  align-items: center;
  border-radius: 28px;
  box-sizing: border-box;
  justify-content: center;

  &-warp {
    position: relative;
    width: 100%;
    height: 80PX;
    overflow: hidden;
  }

  &-wx {
    position: absolute;
    top: -2PX;
    left: -2PX;
    width: calc(100% + 4PX);
  }
}