Skip to main content
Supported Regions:上海

Official Account Follow

WdOfficialAccount

Applicable Scenarios​

You can configure the Official Account Follow Component in the Mini Program, enabling users to quickly follow the official account.

Usage Instructions​

  1. Before using the component, go to the WeChat Official Accounts Platform and set the official account to be displayed under "Settings"->"Follow Official Account". Note: The official account set must be under the same entity or an associated entity as the Mini Program.

image

  1. Please confirm that the selected application supports mini-program-side building. For specific operations, refer to Create Application Guide.

  2. Add the Official Account Follow component to the editing area. This component does not require attribute configuration. After the Mini Program is published, it will directly display the official account bound to the WeChat Official Accounts Platform.

image

  1. Publish the application to the Mini Program. After scanning the QR code to enter the Mini Program, you can see that the Official Account Follow component has been successfully rendered.

image

Component Usage Limitations​

  1. The component must be used in a WeChat Mini Program to view the actual effect. After publishing, scan the Mini Program QR code to preview.
  2. The Official Account Follow Component only displays in specific scenarios. Please adjust the layout accordingly.

  • When the Mini Program scene value matches any of the following values, the Official Account Follow Component can be displayed. View Details:

    • 1011 Scan the QR code

    • 1017 Go to the entry page of the Mini Program trial version

    • 1025 Scan the barcode

    • 1047 Scan the Mini Program code

    • 1124 Scan the "One Thing, One Code" to open the Mini Program

  • When the Mini Program hot start scene value matches any of the following values, or the cold start scene value is among [1011, 1017, 1025, 1047, 1124], the Official Account Follow Component can be displayed:

    • 1001 Main entry for Mini Programs in the Discover tab, "Recently Used" list

    • 1038 Return from another Mini Program

    • 1041 Return to Mini Program from plugin Mini Program

    • 1089 Pull down the WeChat chat main interface to reveal the "Recently Used" section

    • 1090 Long press the menu in the top right corner of the Mini Program to bring up the recently used history

    • 1104 Pull down the WeChat chat main interface to reveal the "My Mini Programs" section

    • 1131 Floating Window

    • 1187 New Floating Window, starting from WeChat 8.0

  1. The component has a minimum width of 300px and a fixed height of 84px. You can nest a regular container outside the Official Account Follow Component and adjust the width of the Official Account Follow Component by adjusting the width of the regular container.

image

  1. Only one such component can be configured per page. If multiple Official Account Follow Components are configured on a single page, only the first one will be displayed.

Properties​

None

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
公众号加载成功loadobject
  • status: number

    状态码
  • errMsg: string

    错误信息
Mini Program

公众号加载成功时触发

公众号加载失败errorobject
  • status: number

    状态码
  • errMsg: string

    错误信息
Mini Program

公众号加载失败时触发

The meanings corresponding to the status values in the output parameters are as follows:
ValueDescription
-2Network error
-1Data parsing error
0Load successful
1Official Account follow function banned in Mini Program
2Associated Official Account banned
3Association unbound or associated Official Account not selected
4Official Account follow function not enabled
5Invalid scene value
6Duplicate creation

Method API​

None

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
根元素.wd-official-account公众号关注组件根元素
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-official-account {
  /* Write CSS styles here */
}
小程序端根元素.wd-mp-official-account可以为小程序端的组件编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-official-account {
  /* Write CSS styles here */
}

Learn about Style API