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.

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

3. 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.

4. 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.

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

2. 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.

3. 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

无

Events

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名	事件code	事件出参 event.detail	适用情况	说明

公众号加载成功	load	object status: number 状态码 errMsg: string 错误信息	小程序	公众号加载成功时触发
公众号加载失败	error	object status: number 状态码 errMsg: string 错误信息	小程序	公众号加载失败时触发

The meanings corresponding to the status values in the output parameters are as follows:

Value	Description
-2	Network error
-1	Data parsing error
0	Load successful
1	Official Account follow function banned in Mini Program
2	Associated Official Account banned
3	Association unbound or associated Official Account not selected
4	Official Account follow function not enabled
5	Invalid scene value
6	Duplicate creation

Method API

无

Style API

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称	类名	说明和示例

根元素	.wd-official-account	公众号关注组件根元素 /* :scope 指的是当前组件元素 */ /* 具体可参考样式 API 文档 */ :scope.wd-official-account { /* 在这里编写CSS 样式 */ }
小程序端根元素	.wd-mp-official-account	可以为小程序端的组件编写样式 /* :scope 指的是当前组件元素 */ /* 具体可参考样式 API 文档 */ :scope.wd-mp-official-account { /* 在这里编写CSS 样式 */ }

了解样式 API