Shulou(Shulou.com)06/02 Report--

I believe many inexperienced people don't know what to do about how to use weex in android. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

What is Weex?

Weex is an extendable cross-platform solution for dynamic programming and publishing projects.

Weex is an extensible, cross-platform solution for dynamic programming and publishing projects.

This is an introduction from Weex Document. This sentence is still very seductive. Why? Hit the mobile side to develop two pain points.

Dynamic programming + publishing. Weex can be programmed and released to the server at any time, and the application side can be updated immediately. Think about the past, application development-test-release, what a tedious and time-consuming process, bug online, that is really painful, especially when there are millions of users of applications, the boss even has the heart to kill you. But with Weex, it's different. Fix bug, users are not aware (the boss is also unaware, ).

Cross-platform. This is what countless people on the mobile look forward to and work hard for. Write in one place and run everywhere. Weex supports three major platforms of Android,iOS,Web, one code, and three platforms are common. When one day, Weex really grows strong, the company's cost is estimated to be able to save a lot. Will a Weex developer get three salaries? I guess I think too much.

Github address: [https://github.com/alibaba/weex(https://github.com/alibaba/weex)

Meet weex

Install Weex Playground App to see examples we already written.

If you want to write a demo, install weex-toolkit in Node.js 4.0 + and

Run weex init to generate & start a simple project in an empty folder.

Follow the instructions in the project README.

Enjoy it.

Install Playground.apk to the phone, if you want to write a demo, install weex-toolkit based on the Node.js 4.0 + environment, use weex to generate and start a simple project in a folder. For more information, please see README

For android

Prerequisites

Install Node.js 4.0 +

Under project root

-- npm install, install project

--. / start

Install Android Environment

Run playground, In Android Studio

Open android/playground

In app/java/com.alibaba.weex/IndexActivity, modify CURRENT_IP to your local IP

Click (Run button)

Add an example

To sum up, you first need to install the node.js4.0+ environment. Then install the weex-toolkit tool to generate a .we file, scan it with Playground.apk and install it to the phone for debugging.

You can also use weex-devtools (android) to debug using a chrome browser

Build the official Chinese version environment and run the Weex Quick start course on demo (Weex Tutorial)

Flow chart of weex startup and interface rendering

Initialization process

Initialization process png

Start the calling process

Start the calling procedure .png

The effect really reached write once,run everywhere! And the running effect is comparable to that of the original sound, and the addition of virtual dom optimizes the performance problems, and provides a good reservation for native extension. At present, it can be integrated in the form of components and full pages.

Initialization operation

1. BaseApplication initializes the SDK engine

WXSDKEngine.init (this, null, null, new ImageAdapter (), null)

WXSDKEngine initializes three things:

1. Initialize so library files, rendering logic, script business framework, etc. are encapsulated here.

2. Initialize initScriptsFramework: initialize the script framework

3. Register operation to initialize weex components and module

Private void renderWX () {

Rect outRect = new Rect ()

GetWindow (). GetDecorView (). GetWindowVisibleDisplayFrame (outRect)

If (instance! = null) {

Instance.destroy ()

Instance = null

}

Instance = new WXSDKInstance (this)

Instance.registerRenderListener (this)

Map options = new HashMap ()

Options.put ("bundleUrl", WEEX_INDEX_URL)

Instance.renderByUrl (TAG, WEEX_INDEX_URL, options, null, ScreenUtil.getDisplayWidth (this))

ScreenUtil.getDisplayHeight (this), WXRenderStrategy.APPEND_ASYNC)

}

First of all, look at this method, which can be called in activity oncreate. You can clearly see that with the registration of the rendering listener and the input of the width and height of the current screen and url, you can guess that the adaptation scheme of weex adopts the percentage scheme.

2. WXSDKInstance

Httpadapter is called in the renderByUrl method to load url, and the user-agent header parameter is assembled.

3. DefaultWXHttpAdapter

Network processing is actually a simple encapsulated network request tool class that calls back the requested json data to WXSDKInstance.

4. Initialize the creation of view using WXSDKInstance render method

5. WXSDKManager createInstance

1. Add json data and instanceId to renderManager

2. Use bridge Bridge Manager for UI drawing

6. WXBridge function: execJS calls so library method to execute JS script for UI rendering

Finally, a comparison with React Native is provided:

Good question:

The syntax of DSL varies greatly. Maybe weex is lighter and faster to use.

Native performance weex still has some advantages, and the package is smaller.

After reading the above, have you mastered how to use weex in android? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.