小白玩WEEX（二）IOS-SWIFT 如何自定义组件提供给WE

当我们在使用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){

        letmView =UIView(frame:CGRect(origin:CGPoint.zero, size:CGSize(width:0, height:0)))

self.view.addSubview(mView)

letvc = 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的时候，如果牵扯到原生，那么就很麻烦，所谓的一次编写，多端运行就是纯扯淡