1. What is Weex?


It works like this: For example, if you are developing a native iOS app using Vue, you can first develop and debug it in a front-end editor (such as Sublime), and finally use the tool package to generate a JS file that contains all the content and dependencies you are developing. Then drag the JS file into the native app and configure it according to Weex requirements. At this time the native need to integrate Weex parsing rendering components, in iOS is WeexSDK, this SDK will parse this JS, and eventually render the code into the native inside. Weex although in fact with Vue development, in fact, really to the native rendering of the components are native components, which also ensures that the Weex style and experience is consistent with the native. Students who support native development can develop their own native components. There is also a problem that Weex will not support all Vue syntax functions, because Vue was originally developed for the Web, such as the Dom concept in the Web, which does not exist in the native. Specific differences can view weex.incubator.apache.org/cn/guide/us here…

2. How to integrate Weex into native applications

1. Create an iOS application.

Configure the Podfile as follows: 

source '[email protected]:CocoaPods/Specs.git'
target 'YourTarget' do
    platform :ios, '7.0'
    pod 'WeexSDK'.'0.17.0'   ## Suggest using the new version of WeexSDK
endCopy the code

2. Create a Weex application

1. Set up the development environment.
www.jianshu.com/p/084b5b1e7…

2. After the development and debugging, execute NPM run build in the root directory of the project, then locate the dist folder in the root directory, which is the generated JS file, and drag it directly into xcode.



3. Initialize the Weex environment



4. Render weex instance in ViewController





5. Destroy weeX Instance 

- (void)dealloc {
    [_instance destroyInstance];
}Copy the code

Here we have integrated WEEX into native ios in a very simple form.

3. Develop a native component

There are two types of native components: Module and Component.

Module mainly encapsulates some function sets, such as network request, etc.

Component encapsulates view components such as maps.

Let’s use module as an example. Component is similar.

1. Custom modules follow the WXModuleProtocol and expose JavaScript methods through the WX_EXPORT_METHOD macro



From there, you can freely develop native, and then callback to js via callback. The first parameter is the data to be called back to JS, and the second BOOL, YES, is destroyed after a callback, NO, is not destroyed.

2. Register the Module where the WEEX environment was initialized.



3. The JavaScript side is used as follows:



At this point we have integrated WEEX into the native application and completed a module package.