IOS-SWIFT 如何自定义组件提供给WEEX使用？

最新推荐文章于 2025-08-11 21:24:53 发布

转载最新推荐文章于 2025-08-11 21:24:53 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c5063e16fb9a049f362812a

文章标签：

#移动开发 #swift #前端 #ViewUI

本文详细介绍如何在Weex中自定义iOS-Swift组件，包括创建WXDivExtraComponent类，实现showToast方法，以及在Weex端使用自定义组件的过程。通过实例演示，帮助开发者掌握跨平台开发技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们在使用Weex开发时，时常会觉得很不爽，因为官方提供的组件太少了

对于前端开发者来说，又多了一件麻烦事,要去接触原生

但对于爱学习的你来说，这正好是一个绝机会

我们的下一个技能就是，提供原生组件给weex使用

那就开始吧

自定义原生组件分为主要两部分

1.IOS-SWIFT自定义组件

2.weex端对于自定义组件的使用
复制代码

一.IOS-SWIFT自定义组件

新建 WXDivExtraComponent.h

#import
@interfaceWXDivExtraComponent :WXComponent
@end
复制代码

声明一个基于WXComponent的类

新建 WXDivExtraComponent.m

在.m文件里我们提供一个方法给weex端使用，使用WX_EXPORT_METHOD暴露方法

#import"WXDivExtraComponent.h"

@implementationWXDivExtraComponent
WX_EXPORT_METHOD(@selector(showToast:))

@end
复制代码

新建WXDivExtraComponent.swift文件

使用swift来扩展WXDivExtraComponent类，并实现方法showToast

我自己也是刚开始学IOS，也不会写；于是我就去gayhub上，找到一些例子，直接借鉴他人的经验与智慧

在gayhub上，找到GSMessage，专门做toast的第三方，用pod安装后，引入

importFoundation
importGSMessages
importUIKit
publicextensionWXDivExtraComponent{
    @objc public fun showToast(_ text: String){
        let mView =UIView(frame:CGRect(origin:CGPoint.zero, size:CGSize(width:0, height:0)))
        self.view.addSubview(mView)
        let vc = mView.getFirstViewController()
        vc!.view.showMessage(text, type: .info, options: [
        .animations([.fade]),
        .animationDuration(0.3),
        .autoHide(true),
        .autoHideDelay(3.0),
        .cornerRadius(0.0),
        .height(44.0),
        .hideOnTap(true),
        .margin(.zero),
        .padding(.init(top:10, left:30, bottom:10, right:30)),
        .position(.top),
        .textAlignment(.center),
        .textColor(.white),
        .textNumberOfLines(1),
        ])
    }
}
复制代码

好了,IOS端我们要提供给weex端的一个自定义toast组件,就写完了

当然，我们还有最重要的一步，注册该组件；在Appdelege里，找到配置weex的相关代码，添加如下代码

WXSDKEngine.registerComponent("divExtra",with:NSClassFromString("WXDivExtraComponent"));
复制代码

二.weex端如何使用原生组件

<template>
    。。。。。。
    <text   @click=“test(‘Hit me')"></text>
    <text   @click=“test(‘点我啊')"></text>
    <divExtra ref=“test"></divExtra>
   。。。。。。
</template>
复制代码

调用如下：

test (text ){
    This.$refs.test.showToast(text)
}
复制代码

很简单,我们来看一下跑起来的效果.

到这，这个简单的例子就完成了，但是这个例子只是简单的跑了下大致流程,如何自定义原生组件并且如何在weex端使用,还有很多问题没有研究,比如原生组件如何适配屏幕？？性能如何？用weex的时候，如果牵扯到原生,那么就很麻烦,所谓的一次编写,多端运行就是纯扯淡

转载于:https://juejin.im/post/5c5063e16fb9a049f362812a