tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Cloud Mini Program Platform
    Documentation
    Download PDF

    Customize mini program view components

    Last updated: 2024-07-03 18:03:57
    Download PDF

      Using customized native components

      TCMPP supports 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.
      
      Contact Us

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

      Contact Us
      Technical Support

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

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy