preface

In the process of learning Weex, refer to the official development documentation and blog summary for an article. From Weex literacy to deciding to use Weex. The next step will be research on the details of development environment construction, development, packaging and package delivery.

I. Introduction to Weex

(1) Overview

Weex is a set of alibaba open source to build high-performance, scalable native application cross-platform development program. On December 15, 2016, Alibaba announced that it would donate the mobile open source project Weex to the Apache Foundation for incubation.

Weex is dedicated to enabling developers to build Android, iOS and Web applications based on common cross-platform Web development languages and development experience. In short, with the WeexSDK integrated, you can use the JavaScript language and front-end development experience to develop mobile applications.

(2) Characteristics

  • Page development support Rax and Vue;
  • One writing, three terminal (Android, iOS, Web) running;
  • UI is drawn through Native components, JavaScript logic runs in THE JS engine, and the two communicate through JavaScriptCore.
  • Native extension support;
  • Each WEEx page is packaged into a JS file. WeexSDK renders the JS file into a View.

(3) Why to use Weex development

  • The efficiency problem

  • Dynamic: WEEX page packaging is a JS file, as long as it can do dynamic JavaScript, it can be dynamic, can be hot repair, or even hot deployment, completely replace or new pages.

  • Maturity: In alibaba Double 11 in 2016, Weex coverage rate in Alibaba Double 11 venue is close to 99%, the number of pages is close to 2000, covering the main venue, sub-venue, sub-venue, crowd venue and almost all of alibaba Double 11 venue business.

2. Weex working principle

In Weex code, pages or components can be written using template, style, and Script tags, and the front-end page (.vue) will then be converted to JSBundle for deployment. When the server returns the JSBundle to the client, the client will process the JSBundle through the JavaScript engine of WeexSDK, manage rendering native view, call native API and user interaction.

WeexSDK include: JS Framework–JSBundle execution environment, JS-native Bridge– middleware or communication Bridge, also called Weex Runtime, Native Render Engine– parse the instructions issued by the JS side to do Native control layout rendering.

3. Weex development environment construction

(1) Installing node –> (2) Installing NPM –> (3) Installing WEEX-Toolkit

Step 1: Download and install Node.js. Default installation is under C:\Program Files\nodejs. Step 2: Check whether Node.js and NPM are installed successfully. Command line: node -v NPM -v (Usually, when the Node.js environment is installed, the NPM package management tool is installed with it. Therefore, use NPM to install weeX-Toolkit. NPM is a JavaScript package management tool that makes it easy for developers to share and reuse code. Much of Weex's reliance comes from the community, and Weex also releases many of its tools to the community for developers to use. NPM install -g weex-Toolkit Domestic developers can consider using the NPM image of Taobao -- CNPM to install weeX-Toolkit command lines: NPM install - g CNPM - registry=https://registry.npm.taobao.org command line: CNPM install -g weex-Toolkit If a permission error message is displayed, use the sudo keyword to install the cli: sudo 4 install -g weex-Toolkit Step 4: Check whether the installation is successful. Weex -v (-weexpack/weex-builder/weex-previewer)Copy the code

4. Create Weex projects

Step 1: Create a WEEx-project on disk D. Step 2: run the CD D:\weex-project command. Step 3: initialize the WEEX project. CD D:\weex-project\day01 step 5: Install the project dependency command line: NPM install or CPNM install (depending on the environment setup step 3) step 6: Step 7: In the day01 directory, type NPM run dev (success or failure does not matter), then reopen a command window, go to the day01 directory, type command line: NPM run serve, browser automatically open weeX page 8: code in SRC /index.vue viewCopy the code

Five, Weex development needs to master the knowledge

Node, Vue, ES6 are Android and iOS development tools.

Weex packaging and delivery

(1) Packing

As anyone familiar with ReactNative knows, ReactNative’s distribution is essentially the distribution of a JSBundle. Weex does the same, but Weex subcontracts the project and distributes multiple Jsbundles. Since Weex is a single-page stand-alone development, each page will be packaged into a separate JSBundle using the Weex packager. The advantage of this is to reduce the size of the individual bundles and make them small and lightweight enough to improve the efficiency of incremental updates.

$weex Build Andriod package + Build + Install $weex Run AndriodCopy the code

The preceding three scenarios trigger Weex to package the project. After we execute the packaging command above, all the project files will be bundled into a separate JSBundle as follows:

The packaged JSBundle comes in two formats:

// {"framework": "vue "} (function(modules){....... // {"framework": "weex "} (function(modules){....... })Copy the code

The different headers tell you what syntax to use to resolve this JSBundle. At this point, we are ready to prepare the “hot update package”, the next is to send the package to execute.

(2) Contract delivery

The packaged JSBundle is usually published to the originating server, and the client can update the package from the server and execute the new version at the next startup without re-downloading the app, because the WeexSDK that runs on it already exists on the client, unless the new package relies on the new SDK, which is the basic principle of hot update.

Seven,

The above is what I learned from learning Weex. I will further study and record the development environment construction, development and packaging in the future.