tencent cloud

腾讯云超级应用服务

动态与公告
【2025年1月2日】关于腾讯云小程序平台更名为腾讯云超级应用服务的公告
控制台更新动态
Android SDK 更新动态
iOS SDK 更新动态
Flutter 更新动态
IDE 更新动态
基础库更新动态
产品简介
产品概述
产品优势
应用场景
购买指南
计费概述
按量计费（后付费）
续费指引
停服说明
快速入门
套餐管理
概述
控制台账号管理
存储配置
加速配置
品牌化配置
平台功能
控制台登录
用户和权限体系
小程序管理
小游戏管理
应用管理
商业化
平台管理
用户管理
团队管理
运营管理
安全中心
代码接入指引
Demo 及 SDK 获取
Android
iOS
Flutter
App 服务端接入指南
GUID 生成规则
小程序开发指南
小程序介绍与开发环境
小程序代码组成
指南
框架
组件
API
服务端
JS SDK
基础库
IDE 使用指南
小游戏开发指南
指南
API
服务端
实践教程
小程序登录实践教程
小程序订阅消息实践教程
支付相关实践教程
广告接入实践教程
小游戏订阅消息实践教程
相关协议
数据处理和安全协议
文档腾讯云超级应用服务代码接入指引iOSiOS API自定义小程序能力自定义小程序视图组件

自定义小程序视图组件

PDF
聚焦模式
字号
最后更新时间： 2025-01-16 19:14:27

使用自定义原生组件

我们支持自定义 UI 组件，小程序端的自定义组件为 <external-element>。如果您想使用自定义 UI 组件，请遵循以下步骤：
1. 客户端接入 SDK 后新建继承自 UIView 的类，例如 QMATestView，导入"TMAExternalJSPlugin.h"文件，使 QMATestView 遵循“TMAExternalElementView”协议。
2. 调用 TMARegisterExternalElement 方法，注册 QMATestView 类为 maTestView。
3. 实现“TMAExternalElementView”协议中的 createWithParams 和 operateWithParams 方法。 
#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;
}

//接收小程序端的调用事件进行处理
- (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];
        // 把结果返回给小程序端
        TMAExternalJSPluginResult *result = [TMAExternalJSPluginResult new];
        result.result = @{@"result":@"success"};
        [context doCallback:result];
      }
    }];
}

发送事件给小程序端

在自定义原生组件里如果想发送事件给小程序端，先在 createWithParams:context: 方法中记录 context：
_context = context;
发送事件时这样写：
- (void)onClickButton:(UIButton *)button {
    _textLabel.text = @"What do you want me to do";
    // 组装数据 发送事件
    NSString *data = [MAUtils JSONStringify:@{@"externalElementId":_elementId,@"type": @"elvisgao callback"}];
    [_context doSubscribe:kTMAOnExternalElementEvent data:data];
}

小程序端使用

1. 在小程序 wxml 中引入：
<external-element
    id="comp1"
    type="maTestView"
    _insert2WebLayer
    style="width: 200px;height: 100px;"
    bindexternalelementevent="handleEvent"
></external-element>
说明：
type 需与 native 端约定，如非同层则不设置 _insert2WebLayer 属性。
bindexternalelementevent 可监听 native 传递的操作，回调参数包括：

{
target,
currentTarget,
timeStamp,
touches,
detail, // native传递的参数
}
2. 小程序 js 中创建实例。

this.ctx = wx.createExternalElementContext('comp1');
说明：
wx.createExternalElementContext 参数为 wxml 中元素 id。
3. 在小程序中调用实例方法：
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)
}
})
说明：
实例提供 call 方法，success、fail、complete 回调；通过参数区分调用方法，基础库会调用 invoke 方法透传参数到 native。

上一篇: 自定义小程序 API下一篇: 介绍

帮助和支持

本页内容是否解决了您的问题？

填写满意度调查问卷，共创更好文档体验。

文档反馈