tencent cloud

Feedback

Custom native component

Last updated: 2024-03-04 22:58:40

    Using Custom Native Components

    TCMPP supports custom UI components, with the custom components for the Mini Program end being <external-element>. If you wish to use custom UI components, adhere to the following steps:
    1. After the SDK is connected into the client, create a class inheriting from UIView, such as QMATestView. Import the "TMAExternalJSPlugin.h" file, and ensure that QMATestView complies with the "TMAExternalElementView" protocol.
    2. Invoke the TMARegisterExternalElement method, register the QMATestView class as maTestView.
    3. Implement the createWithParams and operateWithParams methods within 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;
    }
    
    //Processing call events from the mini program end
    - (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 results to the mini program end
    TMAExternalJSPluginResult *result = [TMAExternalJSPluginResult new];
    result.result = @{@"result":@"success"};
    [context doCallback:result];
    }
    }];
    }

    Send events to the mini program end.

    In a custom native component, if you wish to send events to the mini program end, first record the context in the createWithParams:context: method:
    _context = context;
    When sending events, write as follows:
    - (void)onClickButton:(UIButton *)button {
    _textLabel.text = @"What do you want me to do";
    // Assemble data and send events
    NSString *data = [MAUtils JSONStringify:@{@"externalElementId":_elementId,@"type": @"elvisgao callback"}];
    [_context doSubscribe:kTMAOnExternalElementEvent data:data];
    }

    The mini program end uses:

    1. Incorporate in the mini program's wxml:
    <external-element
    id="comp1"
    type="maTestView"
    _insert2WebLayer
    style="width: 200px;height: 100px;"
    bindexternalelementevent="handleEvent"
    ></external-element>
    Note:
    The type needs to be agreed with the native side. If it is not the same layer, the _insert2WebLayer attribute will not be set.
    bindexternalelementevent can monitor the operations transmitted by the native end, with callback parameters including:
    {
    target,
    currentTarget,
    timeStamp,
    touches,
    detail, // Parameters passed by the native
    }
    2. Create an instance within the mini program's JavaScript.
    
    this.ctx = wx.createExternalElementContext('comp1');
    Note:
    The parameter for wx.createExternalElementContext is the element id within the wxml.
    3. Invoke instance methods within 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 method to be invoked is distinguished through parameters, and the basic library will call the call method to transparently pass parameters to the native end.
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support