tencent cloud

Tencent Cloud Super App as a Service

DocumentationTencent Cloud Super App as a ServiceCode Integration GuideiOSiOS APICustomizing Mini Program CapabilitiesCustomizing Mini Program View Components

Customizing Mini Program View Components

Download
Focus Mode
Font Size
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 side
        TMAExternalJSPluginResult *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 event
    NSString *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-element
    id="comp1"
    type="maTestView"
    _insert2WebLayer
    style="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.

Previous Topic: Custom Mini Program APIsNext Topic: Introduction

Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback