What is Weex?
Weex is a framework for building high-performance cross-platform mobile applications with a modern web development experience.
You can pronounce "Weex" as /wiːks/, just like "Weeks".
The structure of Weex is decoupled. The render engine is separated from the syntax layer(DSL). This means that Weex does not rely on any specific front-end framework or language. For now, Weex is widely used with the supports of Vue.js and Rax. Another primary goal of Weex is to keep up with modern development technologies and platform capabilities both for web and native. Productivity and performance can coexist in Weex. Write a Weex page is almost like writing a web page, even if the page is designated to run on native environment.
To have a glance of the abilities of Weex, it is very simple.
- Install WeexPlayground. In the playground you can try various demos.
- Visit Weex online playground. On this site, you can write and run single page demos using Vue.js. And you can use WeexPlayground app to scan the demo.
Here is an example written in Weex and Vue.js which will give you an overall view of how Weex works:
<template> of the source code, you will notice the
<div> element which is widely used on the web. It is also the generic container in Weex. The
<text> component, however, is provided by Weex and is a block-level text container. All texts should be placed in
<text> container and this is a difference from traditional HTML.
<style> tag, you can write CSS to describe the styles of a component, and those styles are scoped forcibly in Weex.
In the example above, the
<div> and the
<text> elements are rendered by native views on mobile device.
Weex implements render engines both on iOS and Android and provides a group of built-in components. You can also write your own components wrapping native maps, videos, etc. Visit Extend-iOS or Extend-Android for more details.
Behind the scenes, Weex uses native components and provides maximum uniformity for iOS and Android. But there exists slight differences for different platform. For example, the
<switch> component looks different on Android and iOS.
For those features that do not rely on the UI views, Weex wraps them into modules, check Animation Module for an overview. In your front-end code, just use
stream module to fetch the star count of Vue.js.
Similarly, Weex provides a group of built-in modules for basic usage, and supports the integration of the existing native modules into the Weex platform. Visit the following documents for more details.
Write Once, Run Everywhere
Yes, Weex enables developers to build apps for Android, iOS, and Web on a single codebase which dramatically increases development productivity and simplify the testing, building, and publishing processes.
Although a Weex page use single codebase, you can still write platform specific code. Weex provides
WXEnvironment to get the current runtime environment. Check Weex Variables for more details.
Using Front-End Frameworks
- Vue.js is a progressive front-end framework for building user interfaces.
- Rax is a front-end framework with React-compatible APIs.
Vue.js and Rax are already integrated into Weex SDK.
It is possible to integrate your favorite front-end framework into Weex but it is not easy work. If you have any idea, you could contact us. You can read Front-End Frameworks for more details.
At this point, you should have a general understanding of Weex. The next step is to explore and try the advanced features of Weex.
If you want to use weex to write your own app now, please read
If you want to contribute to Weex code and documents, or commit a bug, please read