當(dāng)我們?cè)谑褂肳eex開(kāi)發(fā)時(shí)，時(shí)常會(huì)覺(jué)得很不爽遇西，因?yàn)楣俜教峁┑慕M件太少了馅精；
對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，又多了一件麻煩事粱檀，要去接觸原生洲敢；但對(duì)于愛(ài)學(xué)習(xí)的你來(lái)說(shuō)，這正好是一個(gè)絕機(jī)會(huì)茄蚯；
我們的下一個(gè)技能就是压彭，提供原生組件給weex使用；
那就開(kāi)始吧渗常；
自定義原生組件分為主要兩部分
????1.IOS-SWIFT自定義組件
????2.weex端對(duì)于自定義組件的使用
一.IOS-SWIFT自定義組件
新建?WXDivExtraComponent.h
```
#import
?? ?@interfaceWXDivExtraComponent :WXComponent
?? ?@end
```
聲明一個(gè)基于WXComponent的類
新建?WXDivExtraComponent.m
在.m文件里我們提供一個(gè)方法給weex端使用壮不，使用WX_EXPORT_METHOD暴露方法
?? ?#import"WXDivExtraComponent.h"
?? ?@implementationWXDivExtraComponent
?? ?WX_EXPORT_METHOD(@selector(showToast:))
?? ?@end
新建WXDivExtraComponent.swift文件
使用swift來(lái)擴(kuò)展WXDivExtraComponent類，并實(shí)現(xiàn)方法showToast
我自己也是剛開(kāi)始學(xué)IOS皱碘，也不會(huì)寫(xiě)忆畅；于是我就去gayhub上，找到一些例子，直接借鑒他人的經(jīng)驗(yàn)與智慧
在gayhub上家凯，找到GSMessage缓醋，專門(mén)做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端的一個(gè)自定義toast組件送粱，就寫(xiě)完了；
當(dāng)然掂之，我們還有最重要的一步抗俄，注冊(cè)該組件；在Appdelege里世舰，找到配置weex的相關(guān)代碼动雹，添加如下代碼
WXSDKEngine.registerComponent("divExtra", with:NSClassFromString("WXDivExtraComponent"));
二.weex端如何使用原生組件
<template>
? ??……………
?? ?<text ? @click=“test(‘Hit me')"></text>
? ??<text ? @click=“test(‘點(diǎn)我啊')"></text>
? ? <divExtra ref=“test"></divExtra>
???………………
</template>
調(diào)用如下：
test (text ){
? ??This.$refs.test.showToast(text)
}
很簡(jiǎn)單，我們來(lái)看一下跑起來(lái)的效果跟压；
到這胰蝠，這個(gè)簡(jiǎn)單的例子就完成了，但是這個(gè)例子只是簡(jiǎn)單的跑了下大致流程震蒋，如何自定義原生組件并且如何在weex端使用茸塞；但還有很多問(wèn)題沒(méi)有研究，比如原生組件如何適配屏幕查剖？钾虐？性能如何？用weex的時(shí)候笋庄，如果牽扯到原生效扫，那么就很麻煩，所謂的一次編寫(xiě)直砂，多端運(yùn)行就是純扯淡
