当我们在使用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的时候，如果牵扯到原生，那么就很麻烦，所谓的一次编写，多端运行就是纯扯淡
网友评论