Weex系列(5) —— 封装原生组件和模块

娣辩孩发布于2019-08-23 14:36 / 1952人阅读

摘要：官网的所有组件和模块的截图在官网扩展版块，是可以找到封装的方法步骤的。封装组件的版块，我把里面的组件代码拿出来了，也是为了后面章节做铺垫吧。

Weex系列(序) —— 总要知道原生的一点东东(iOS)

Weex系列(序) —— 总要知道原生的一点东东(Android)

Weex系列(1) —— Hello World项目

Weex系列(2) —— 页面跳转和通信

Weex系列(3) —— 单页面还是多页面

Weex系列(4) —— 老生常谈的三端统一

Weex系列(5) —— 封装原生组件和模块

[Weex系列(6) —— css相关小结]

[Weex系列(7) —— web组件和webview]

[Weex系列(8) —— 是时候简析一下流程原理了]

[Weex系列(9) —— 踩坑填坑的集锦]

[Weex系列(10) —— 先这么多吧想到再写。。。]

哇，2019年了，时间总是那么快，快过新年了，忙点了也懒点了，还有点想家了，先祝大家新年快乐吧。

这一章官网上有介绍，但还是多带带拎出来讲一讲，因为后期这块用的还是挺多的。

官网的所有组件和模块的截图：

在官网扩展版块，是可以找到封装的方法步骤的。

自定义模块

iOS：

第一步：

新建 myModule.h

</>复制代码 
#import 
#import 
@interface myModule : NSObject
@end

新建 myModule.m

</>复制代码 
#import "myModule.h"
@implementation myModule
WX_EXPORT_METHOD(@selector(log:))
- (void)log:(NSString *)inputParam
{
    NSLog(@"%@",inputParam);
}
@end

第二步：

AppDelegate.m里面注册module

</>复制代码 
[WXSDKEngine registerModule:@"myModule" withClass:[myModule class]];

Android：

第一步：

新建myModule.java

</>复制代码 
public class MyModule extends WXModule {
  //run JS thread
  @JSMethod (uiThread = false)
  public void log(String inputParam) {
    Log.d("自定义模块：", inputParam);
  }
}

第二步：

WXApplication.java里面注册module

</>复制代码 
WXSDKEngine.registerModule("MyModule", MyModule.class);

最后：

在上层vue里面，我们可以require我们自己封装的module，就能够调用原生的log方法，分别在xcode和Android Studio的控制台，看到hello weex的消息了。

这里需要强调一点的是：iOS和Android的module的名字方法要一致，这样在vue里面才能统一的。

</>复制代码 
weex.requireModule("myModule").log("hello weex")

自定义组件

组件封装起来比模块是麻烦许多的，一开始也是摸不着头脑，后来就找到weexsdk里面封装的组件，依样画葫芦的开始了。

iOS：

第一步：

新建myComponent.h

</>复制代码 
#import "WXComponent.h"
@interface myComponent : WXComponent
- (void)notifyWebview:(NSDictionary *) data;
- (void)reload;
- (void)goBack;
- (void)goForward;
@end

新建myComponent.m

</>复制代码 
#import "myComponent.h"
#import 
#import 
#import "WXUtility.h"
#import "WXURLRewriteProtocol.h"
#import "WXSDKEngine.h"
#import 
@interface WXWebView : UIWebView
@end
@implementation WXWebView
- (void)dealloc
{
    if (self) {
//        self.delegate = nil;
    }
}
@end
@interface myComponent ()
@property (nonatomic, strong) JSContext *jsContext;
@property (nonatomic, strong) WXWebView *webview;
@property (nonatomic, strong) NSString *url;
@property (nonatomic, assign) BOOL startLoadEvent;
@property (nonatomic, assign) BOOL finishLoadEvent;
@property (nonatomic, assign) BOOL failLoadEvent;
@property (nonatomic, assign) BOOL notifyEvent;
@end
@implementation myComponent
WX_EXPORT_METHOD(@selector(goBack))
WX_EXPORT_METHOD(@selector(reload))
WX_EXPORT_METHOD(@selector(goForward))
- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
{
    if (self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]) {
        self.url = attributes[@"src"];
    }
    return self;
}
- (UIView *)loadView
{
    return [[WXWebView alloc] init];
}
- (void)viewDidLoad
{
    _webview = (WXWebView *)self.view;
    _webview.delegate = self;
    _webview.allowsInlineMediaPlayback = YES;
    _webview.scalesPageToFit = YES;
    [_webview setBackgroundColor:[UIColor clearColor]];
    _webview.opaque = NO;
    _jsContext = [_webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    __weak typeof(self) weakSelf = self;
    _jsContext[@"$notifyWeex"] = ^(JSValue *data) {
        if (weakSelf.notifyEvent) {
            [weakSelf fireEvent:@"notify" params:[data toDictionary]];
        }
    };
    
    if (_url) {
        [self loadURL:_url];
    }
}
- (void)updateAttributes:(NSDictionary *)attributes
{
    if (attributes[@"src"]) {
        self.url = attributes[@"src"];
    }
}
- (void)addEvent:(NSString *)eventName
{
    if ([eventName isEqualToString:@"pagestart"]) {
        _startLoadEvent = YES;
    }
    else if ([eventName isEqualToString:@"pagefinish"]) {
        _finishLoadEvent = YES;
    }
    else if ([eventName isEqualToString:@"error"]) {
        _failLoadEvent = YES;
    }
}
- (void)setUrl:(NSString *)url
{
    NSString* newURL = [url copy];
    WX_REWRITE_URL(url, WXResourceTypeLink, self.weexInstance)
    if (!newURL) {
        return;
    }
    
    if (![newURL isEqualToString:_url]) {
        _url = newURL;
        if (_url) {
            [self loadURL:_url];
        }
    }
}
- (void)loadURL:(NSString *)url
{
    if (self.webview) {
        NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:url]];
        [self.webview loadRequest:request];
    }
}
- (void)reload
{
    [self.webview reload];
}
- (void)goBack
{
    if ([self.webview canGoBack]) {
        [self.webview goBack];
    }
}
- (void)goForward
{
    if ([self.webview canGoForward]) {
        [self.webview goForward];
    }
}
- (void)notifyWebview:(NSDictionary *) data
{
    NSString *json = [WXUtility JSONString:data];
    NSString *code = [NSString stringWithFormat:@"(function(){var evt=null;var data=%@;if(typeof CustomEvent==="function"){evt=new CustomEvent("notify",{detail:data})}else{evt=document.createEvent("CustomEvent");evt.initCustomEvent("notify",true,true,data)}document.dispatchEvent(evt)}())", json];
    [_jsContext evaluateScript:code];
}
#pragma mark Webview Delegate
- (NSMutableDictionary *)baseInfo
{
    NSMutableDictionary *info = [NSMutableDictionary new];
    [info setObject:self.webview.request.URL.absoluteString ?: @"" forKey:@"url"];
    [info setObject:[self.webview stringByEvaluatingJavaScriptFromString:@"document.title"] ?: @"" forKey:@"title"];
    [info setObject:@(self.webview.canGoBack) forKey:@"canGoBack"];
    [info setObject:@(self.webview.canGoForward) forKey:@"canGoForward"];
    return info;
}
- (void)webViewDidStartLoad:(UIWebView *)webView
{
    
}
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    if (_finishLoadEvent) {
        NSDictionary *data = [self baseInfo];
        [self fireEvent:@"pagefinish" params:data domChanges:@{@"attrs": @{@"src":self.webview.request.URL.absoluteString}}];
    }
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
    if (_failLoadEvent) {
        NSMutableDictionary *data = [self baseInfo];
        [data setObject:[error localizedDescription] forKey:@"errorMsg"];
        [data setObject:[NSString stringWithFormat:@"%ld", (long)error.code] forKey:@"errorCode"];
        
        NSString * urlString = error.userInfo[NSURLErrorFailingURLStringErrorKey];
        if (urlString) {
            // webview.request may not be the real error URL, must get from error.userInfo
            [data setObject:urlString forKey:@"url"];
            if (![urlString hasPrefix:@"http"]) {
                return;
            }
        }
        [self fireEvent:@"error" params:data];
    }
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    if (_startLoadEvent) {
        NSMutableDictionary *data = [NSMutableDictionary new];
        [data setObject:request.URL.absoluteString ?:@"" forKey:@"url"];
        [self fireEvent:@"pagestart" params:data];
    }
    return YES;
}
@end

第二步：

AppDelegate.m里面注册component

</>复制代码 
[WXSDKEngine registerComponent:@"myComponent" withClass:[myComponent class]];

这里需要说明：上面基本上是照着weexsdk里面的webview组件改的，而且就是改了一下名字，方法什么的大家就可以自由发挥了。

Android：

第一步：

新建myComponent.java

</>复制代码 
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 * 
 *   http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
package com.taobao.weex.ui.component;
import android.content.Context;
import android.net.Uri;
import android.support.annotation.NonNull;
import android.text.TextUtils;
import android.view.View;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.annotation.Component;
import com.taobao.weex.adapter.URIAdapter;
import com.taobao.weex.common.Constants;
import com.taobao.weex.dom.WXDomObject;
import com.taobao.weex.ui.view.IWebView;
import com.taobao.weex.ui.view.WXWebView;
import com.taobao.weex.utils.WXUtils;
import java.util.HashMap;
import java.util.Map;
@Component(lazyload = false)
public class myComponent extends WXComponent {
    public static final String GO_BACK = "goBack";
    public static final String GO_FORWARD = "goForward";
    public static final String RELOAD = "reload";
    protected IWebView mWebView;
    @Deprecated
    public myComponent(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, String instanceId, boolean isLazy) {
        this(instance,dom,parent,isLazy);
    }
    public myComponent(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, boolean isLazy) {
        super(instance, dom, parent, isLazy);
        createWebView();
    }
    protected void  createWebView(){
        mWebView = new WXWebView(getContext());
    }
    @Override
    protected View initComponentHostView(@NonNull Context context) {
        mWebView.setOnErrorListener(new IWebView.OnErrorListener() {
            @Override
            public void onError(String type, Object message) {
                fireEvent(type, message);
            }
        });
        mWebView.setOnPageListener(new IWebView.OnPageListener() {
            @Override
            public void onReceivedTitle(String title) {
                if (getDomObject().getEvents().contains(Constants.Event.RECEIVEDTITLE)) {
                    Map params = new HashMap<>();
                    params.put("title", title);
                    fireEvent(Constants.Event.RECEIVEDTITLE, params);
                }
            }
            @Override
            public void onPageStart(String url) {
                if ( getDomObject().getEvents().contains(Constants.Event.PAGESTART)) {
                    Map params = new HashMap<>();
                    params.put("url", url);
                    fireEvent(Constants.Event.PAGESTART, params);
                }
            }
            @Override
            public void onPageFinish(String url, boolean canGoBack, boolean canGoForward) {
                if ( getDomObject().getEvents().contains(Constants.Event.PAGEFINISH)) {
                    Map params = new HashMap<>();
                    params.put("url", url);
                    params.put("canGoBack", canGoBack);
                    params.put("canGoForward", canGoForward);
                    fireEvent(Constants.Event.PAGEFINISH, params);
                }
            }
        });
        return mWebView.getView();
    }
    @Override
    public void destroy() {
        super.destroy();
        getWebView().destroy();
    }
    @Override
    protected boolean setProperty(String key, Object param) {
        switch (key) {
            case Constants.Name.SHOW_LOADING:
                Boolean result = WXUtils.getBoolean(param,null);
                if (result != null)
                    setShowLoading(result);
                return true;
            case Constants.Name.SRC:
                String src = WXUtils.getString(param,null);
                if (src != null)
                    setUrl(src);
                return true;
        }
        return super.setProperty(key,param);
    }
    @WXComponentProp(name = Constants.Name.SHOW_LOADING)
    public void setShowLoading(boolean showLoading) {
        getWebView().setShowLoading(showLoading);
    }
    @WXComponentProp(name = Constants.Name.SRC)
    public void setUrl(String url) {
        if (TextUtils.isEmpty(url) || getHostView() == null) {
            return;
        }
        if (!TextUtils.isEmpty(url)) {
            loadUrl(getInstance().rewriteUri(Uri.parse(url), URIAdapter.WEB).toString());
        }
    }
    public void setAction(String action) {
        if (!TextUtils.isEmpty(action)) {
            if (action.equals(GO_BACK)) {
                goBack();
            } else if (action.equals(GO_FORWARD)) {
                goForward();
            } else if (action.equals(RELOAD)) {
                reload();
            }
        }
    }
    private void fireEvent(String type, Object message) {
        if (getDomObject().getEvents().contains(Constants.Event.ERROR)) {
            Map params = new HashMap<>();
            params.put("type", type);
            params.put("errorMsg", message);
            fireEvent(Constants.Event.ERROR, params);
        }
    }
    private void loadUrl(String url) {
        getWebView().loadUrl(url);
    }
    private void reload() {
        getWebView().reload();
    }
    private void goForward() {
        getWebView().goForward();
    }
    private void goBack() {
        getWebView().goBack();
    }
    private IWebView getWebView() {
        return mWebView;
    }
}

第二步：

WXApplication.java里面注册component

</>复制代码 
WXSDKEngine.registerComponent("myComponent", myComponent.class);

最后：

在上层vue里面，我们就可以直接使用封装好的组件。

这里需要强调一点的是：iOS和Android的组件名字一定要一致，这样在vue里面才能统一的。

</>复制代码

小结

1、从上面可以看出不管是组件还是模块，都是要iOS和Android各封装一套的，而且名字还要一致，如果兼容web端，还要做web的扩展，这样才能三端统一的。
2、封装组件的版块，我把weex sdk里面的web组件代码拿出来了，也是为了后面webview章节做铺垫吧。
3、建议大家可以多看看weex sdk的源码，（这里请忘掉我只是一个前端，我干嘛还要学习oc、java的这些想法吧）其实也还好，也可能是目前我们的项目没有太复杂，封装的还不是很多，也还算简单，谷歌上一搜基本都能解决吧。

最后祝大家新的一年，少点bug，多点money，越来越好吧。

如果喜欢就请点个赞收藏一下啦~~~

GPU云服务器云服务器原生js封装ajax 如何封装html组件 Nodejs模块封装组件和组件通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100842.html

Weex系列(5) —— 封装原生组件和模块

摘要：官网的所有组件和模块的截图在官网扩展版块，是可以找到封装的方法步骤的。封装组件的版块，我把里面的组件代码拿出来了，也是为了后面章节做铺垫吧。目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello World项目 Weex系列(2) —— 页面跳转和通信 Weex系列(...

Rindia 2019-08-16 14:13 评论0 收藏0
Weex系列(4) —— 老生常谈的三端统一

摘要：刚看到这仨页面的时候，我就想着可以用路由，做成三端统一。样式这部分真的三端基本是高度统一的，部分微调一下就可以了，也正是这样，我们后续才能迅速解决和。终于不是谈谈三端统一了，也是真的体验了一次，虽然最后有点出入，但是下次基本是没问题了。目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(...

wzyplus 2019-08-23 14:09 评论0 收藏0
Weex系列(1) ——Hello World项目

摘要：由于最开始没有一点点原生开发的经验，所以我就直接用的脚手架初始化项目。那下面我们就从最最原始的项目开始吧，序篇太枯燥，自由发挥时间开始啦。执行如下代码，最后会得到如图的项目结构。入口文件等简析进行了初始化。目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello Wor...

xiaowugui666 2019-08-23 12:53 评论0 收藏0
Weex系列(6) —— web组件和webview

摘要：安卓要麻烦许多，网上大多也都是安卓的讲解，我也是遇到了好多坑。我是在里面重新绘制了一下，在适配的时候会用到，安卓倒是没有怎么处理。目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello World项目 Weex系列(2) —— 页面跳转和通信 Weex系列(3) ——...

LucasTwilight 2019-08-23 15:34 评论0 收藏0

发表评论

登陆后可评论

0条评论

娣辩孩

男|高级讲师

我要关注我要私信

TA的文章

我的女朋友做软件测试人很好很阳光有点调皮但也很严肃对了厨艺可是一级棒哟！我爱她只是她喜欢

阅读 3825·2021-09-02 15:11
UCloud夏季钜惠：快杰云服务器低至47元/年起,价保双11

阅读 4854·2021-08-16 10:47
vs code 插件折腾记（一）

阅读 1711·2019-08-29 18:35
前端利器：SASS基础与Compass入门

阅读 3245·2019-08-28 17:54
javascript

阅读 2982·2019-08-26 11:37
数据类型

阅读 1622·2019-08-23 16:51
Weex系列(5) —— 封装原生组件和模块

阅读 1953·2019-08-23 14:36
es6箭头函数深入学习1

阅读 1927·2019-08-23 14:21

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

Weex系列(5) —— 封装原生组件和模块

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章