Tencent Cloud Super App as a Service
- Release Notes and Announcements
- Purchasing Guide
- Plan Management
- Branded Configurations
- Introduction to Platform Functions
- Commercialization
- Virtual Payment
- Guidelines for Code Integration
- Android
- Android SDK Description
- Android API
- Mini Program Management APIs
- Custom Mini Program Capabilities
- Custom SDK Capabilities
- iOS
- iOS SDK Description
- iOS API
- Mini Program Management APIs
- Customize Mini Program Capabilities
- Customised SDK Capabilities
- Flutter
- Flutter SDK Description
- Flutter API
- Mini Program Management API
- Mini Program Capabilities Customization
- Plugin Customization
- App Server
- Payment Development Notes
- Mini Program Payment: Parameter Application and Configuration
- Mini Game Payment: Parameter Application and Configuration
- Mini Program Payment: Signature and Verification
- Guildlines for Mini Program Development
- Mini Program Code Composition
- Guidance
- Learn About Mini Programs
- Configuring Mini Program
- Mini Program Framework
- Basic Competencies
- Open Capabilities
- Framework
- Mini Program Configuration
- Framework Interface
- WXML Syntax Reference
- WXS Syntax Reference
- Components
- API
- Interface
- Media
- Device
- JS SDK
- IDE Operation Instructions
- Guildlines for Mini Game Development
- Guide
- Game Engine
- Basic Capability
- Open Capabilities
- API
- Interface
- Rendering
- Device
- Practice Tutorial
- API Documentation
- Making API Requests
- User Management APIs
- Team Management APIs
- Sensitive API-Related APIs
- Role Management APIs
- Platform Management APIs
- Other Console APIs
- Mini Program APIs
- Management-Sensitive APIs
- Global Domain Management APIs
- Application APIs
DocumentationTencent Cloud Super App as a ServiceGuidelines for Code IntegrationiOSiOS APICustomize Mini Program CapabilitiesCustomize Mini Program View Components
Customize Mini Program View Components
Last updated: 2025-01-16 19:14:27
Using customized native components
We support customized UI components. The customized component on the mini program side is <external-element>. To use customized UI components, follow these steps:
1. Create a new class that inherits from UIView after integrating the SDK, e.g., QMATestView, and import the TMAExternalJSPlugin.h file. Ensure QMATestView conforms to the TMAExternalElementView protocol.
2. Register the QMATestView class as maTestView using the TMARegisterExternalElement method.
3. Implement the createWithParams and operateWithParams methods from the TMAExternalElementView protocol.
#import "QMATestView.h"#import "TMAExternalJSPlugin.h"@interface QMATestView () <TMAExternalElementView>@end@implementation QMATestView {UILabel *_textLabel;UIButton *_clickButton;id<TMAExternalJSContextProtocol> _context;}TMARegisterExternalElement(maTestView);+ (UIView *)createWithParams:(NSDictionary *)params context:(id<TMAExternalJSContextProtocol>)context {QMATestView *testView = [[QMATestView alloc] initWithFrame:CGRectZero];NSDictionary *testViewParams = QQ_Dict_DictValue(params, @"params");[testView setText:QQ_Dict_StringValue(testViewParams, @"text")];testView->_context = context;return testView;}//Handle events called from the mini program side- (void)operateWithParams:(NSDictionary *)param context:(id<TMAExternalJSContextProtocol>)context {NSDictionary *data = QQ_Dict_DictValue(param, @"data");NSDictionary *params1 = QQ_Dict_DictValue(data, @"params1");NSInteger age = [QQ_Dict_NumberValue(params1, @"age") integerValue];NSString *name = QQ_Dict_StringValue(params1, @"name");qq_weakify(self);[MAUtils executeOnThread:[NSThread mainThread] block:^{qq_strongify(self);if (self) {self->_textLabel.text = [NSString stringWithFormat:@"name = %@ , age = %ld",name,(long)age];// Return the result to the mini program sideTMAExternalJSPluginResult *result = [TMAExternalJSPluginResult new];result.result = @{@"result":@"success"};[context doCallback:result];}}];}
Sending events to the mini program side
To send events to the mini program side from a customized native component, first record the context in the `createWithParams:context:` method:
_context = context;
Send an event as follows:
- (void)onClickButton:(UIButton *)button {_textLabel.text = @"What do you want me to do";//Assemble data and send the eventNSString *data = [MAUtils JSONStringify:@{@"externalElementId":_elementId,@"type": @"elvisgao callback"}];[_context doSubscribe:kTMAOnExternalElementEvent data:data];}
Usage on the mini program side
1. Include the following in the mini program wxml:
<external-elementid="comp1"type="maTestView"_insert2WebLayerstyle="width: 200px;height: 100px;"bindexternalelementevent="handleEvent"></external-element>
Note：
The `type` must be agreed upon with the native side. If not on the same layer, do not set the _insert2WebLayer attribute.
`bindexternalelementevent` can listen to operations passed from the native side, with callback parameters including:
{target,currentTarget,timeStamp,touches,detail, // Parameters passed from native side}
2. Create an instance in the mini program js.
this.ctx = wx.createExternalElementContext('comp1');
Note：
The parameter for wx.createExternalElementContext is the element id in wxml.
3. Call instance methods in the mini program:
this.ctx.call({params1: {name: 'name1',age: 11},params2: {name: 'name2',age: 22},success: (e) => {console.log('====operate success=====', e)},fail: (e) => {console.log('====operate fail=====', e)},complete: (e) => {console.log('====operate complete=====', e)}})
Note：
The instance provides a call method with success, fail, and complete callbacks. The base library will call the invoke method to pass parameters to the native side.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No