Weex Learning and Practice (3): principles of iOS

Weex Learning & Practice 1 :Weex, What you Need to know

Weex Learning & Practice ii :iOS Integration tips

Weex Learning and Practice (3): principles of iOS

This article mainly introduces weexSDK-ios classes, Weex page iOS rendering process, JS calling iOS methods

The main class

WXSDKEngine

WXSDKEngine is primarily used to initialize the WeexSDK environment

It starts by loading the configuration file main.js and registering some default components, modules, and handlers

+ (void)initSDKEnviroment:(NSString *)script
{
   
    [self _registerDefaultComponents];
    [self _registerDefaultModules];
    [self _registerDefaultHandlers];
    
    [[WXSDKManager bridgeMgr] executeJsFramework:script];
}

Copy the code

WXSDKInstance

A WXSDKInstance corresponds to a UIViewController and a WEEX page.

It’s mainly used to render pages, usually through renderWithURL methods, and then receive callbacks and view-specific methods

RenderFinish // componentForRef // Get the corresponding component view via the view indexCopy the code

WXBridgeManager

WXBridgeManager is JS and iOS through JSCore interaction class, related classes also have WXBridgeContext, WXJSCoreBridge.

Like calling JS

- (void)executeJsMethod:(WXBridgeMethod *)method { if (! method) return; __weak typeof(self) weakSelf = self; WXPerformBlockOnBridgeThread(^(){ [weakSelf.bridgeCtx executeJsMethod:method]; }); }Copy the code

JS calls native through the registerCallNative method of WXJSCoreBridge

WXComponent

Component base class, from which components that implement their own iOS applications inherit. Related are WXComponentFactory, a factory class responsible for component initialization, and WXComponentManager

WXModuleProtocol

Customize the protocol that the Module needs to implement

Weex iOS page rendering process

First initialize WXSDKInstance in render in ViewController. Since Render supports real-time refresh, you need to destroy the instance each time.

    [_instance destroyInstance];
    _instance = [[WXSDKInstance alloc] init];

Copy the code

WXSDKManager then saves the instanceId

        [WXSDKManager storeInstance:self forID:_instanceId];

Copy the code

It then calls renderWithURL to load the script, where it decides if it’s a local file or if it needs to be downloaded from the server,

- (void)renderWithURL:(NSURL *)url options:(NSDictionary *)options data:(id)data{
	    if ([url isFileURL]) {
        //from local
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
            NSString *path = [url path];
            NSData *scriptData = [[NSFileManager defaultManager] contentsAtPath:path];
            NSString *script = [[NSString alloc] initWithData:scriptData encoding:NSUTF8StringEncoding];
            [weakSelf renderView:script options:newOptions data:data];
        });
    }else{
    	//from server
    }
}

Copy the code

The view is then rendered from the script file

[weakSelf renderView:script options:newOptions data:data];

Copy the code

In this method, the root view is created first, and WXSDKInstance receives a callback from onCreate when the creation is complete

//TODO WXRootView WXPerformBlockOnMainThread(^{ self.rootView = [[WXView alloc] initWithFrame:self.frame]; if(self.onCreate) { self.onCreate(self.rootView); }});Copy the code

You then invoke the JS methods through the Bridge to start creating the instance

    [self callJSMethod:@"createInstance" args:args];

Copy the code

It then determines whether the JSFramework (main.js) has been loaded and then executes the JS method through the JSContext of the WXJSBridge

- (void)callJSMethod:(NSString *)method args:(NSArray *)args
{
    [[_jsContext globalObject] invokeMethod:method withArguments:args];
}

Copy the code

Finally, main.js calls WXSDKInstance’s createFinish method to end the rendering of the page

JS calls the iOS method

The first step is to register a component

    [self registerModule:@"dom" withClass:NSClassFromString(@"WXDomModule")];

Copy the code

The following method is used to register a Module

+ (void)registerModule:(NSString *)name withClass:(Class)clazz
{
    WXAssert(name && clazz, @"Fail to register the module, please check if the parameters are correct ！");
    
    NSString *moduleName = [WXModuleFactory registerModule:name withClass:clazz];
    NSDictionary *dict = [WXModuleFactory moduleMethodMapsWithName:moduleName];
    
    [[WXSDKManager bridgeMgr] registerModules:dict];
}
Copy the code

Send all methods registered with macros to the JS side

WX_EXPORT_METHOD(@selector(createBody:))

This exposes the method with the name “wx_export_method_” plus the line number of the code, wx_export_method_25

Components and modules are for the JS side, whereas handlers are for objC itself, so there is no need to send messages to the JS side

We then use methodForSelector to get the return value of the WX_EXPORT_METHOD method and store it in methods

- (void)registerModuleMethods {

            if ([currentClass respondsToSelector:selector]) {
                method = ((NSString* (*)(id, SEL))[currentClass methodForSelector:selector])(currentClass, selector);
            }
            [_methods setObject:method forKey:name];

}

Copy the code

Then fetch the _moduleMap composed of WXModuleConfig and send it to the JS side

    [[WXSDKManager bridgeMgr] registerModules:dict];

Copy the code

Finally, you need your own callNative callback, which is passed to when JS is called

- (void)registerCallNative:(WXJSCallNative)callNative
{
    NSInteger (^callNativeBlock)(JSValue *, JSValue *, JSValue *) = ^(JSValue *instance, JSValue *tasks, JSValue *callback){
        NSString *instanceId = [instance toString];
        NSArray *tasksArray = [tasks toArray];
        NSString *callbackId = [callback toString];
        
        return callNative(instanceId, tasksArray, callbackId);
    };
    
    _jsContext[@"callNative"] = callNativeBlock;
}
Copy the code

Tasks contain information about methods, including Module (such as DOM), Method (such as updateFinish), and args

Weex-devtool-ios is a derivative of PonyDebugger.

Debug iOS applications using PonyDebugger

FLEXNetworkObserver

Reprint please note the original link :coderyi.com/posts/weex3…

Welcome to join the Weex study group and learn Weex together!