We will make a simple but realistic list, in which the technologies Weex uses will be shown. This form of list also works for a lot of e-commercial apps and mobile sites.
Let’s get started with the list item, which contains one
image element and one
text right behind.
You can directly copy and paste the above code into a Weex file named
.we is our recommended filename extension).
Once created, we want to see the running result of the
.we file. But before that, we must make sure the dependencies are installed.
When installation completed, you can check if Weex CLI is installed properly by running
weex command in the command line. The following text is expected:
If all work well, navigate to the directory where you saved
tech_list.we, then type:
A browser window will be opened automatically to display the running result like below (weex-toolkit version should be greater than 0.1.0, use
weex --version to check it):
So it’s time for introducing the syntax.
Given the content of
Template is the skeleton that gives Weex structure. It is composed of tags which surround content and apply meaning to it. Tags have attributes, different attribute means different feature, for example,
class attribute makes it possible to define the same styles for multiple tags,
onclick attribute makes the tag respond to click event.
Style describes how Weex tags are to be displayed. We prefer CSS very much. So we try to keep consistent with CSS standard as possible. Weex Style supports a lot of CSS features, like margin, padding, fixed and so on. Better yet, flexbox layout (flex) is well supported in Weex Style.
Script adds data & logic to Weex tags, helping you easily access local or remote data and update tags. You can also define some methods for your tag to respond to different events. Weex Script organization learns a lot from CommonJS module style.
More information about Weex syntax can be found in our Syntax chapter.
We can’t call one item a list, so we need to add more items to our tech list. Open
tech_list.we in your favorite editor and update it’s content like below:
Now we will try to render our
tech_list.we with Weex native renderer. Open your terminal and navigate to the directory where you save the
tech_list.we again, then type:
It’s RECOMMENDED to use
-h option to specify your local ip address or hostname.
A QR code will be displayed in the terminal window like below:
The QR code can work together with Weex Playground App. Open it and tap the scan icon at the top-right corner, then scan the QR code displayed in your terminal. If all work well, a beautiful list will be displayed in your phone.
Here, I must stress that the list is rendered by a native view, instead of Webkit, so your app gets faster loading and less memory overhead than common Webview renderer.
tech_list.we again and try to change some text, after changes saved the Weex playground App will immediately display these changes. We call that Hot-Reload, which is intended to help you use Weex better.
Instead of writing basic tags by yourself, Weex provides a lot of built-in components. For example, Slider is common to many apps and mobile websites, so Weex includes a built-in Slider so that you can easily use it in your script. Let’s open
tech_list.we and update it’s content like below.
Open terminal and run the command again:
You should see a slider prepend to our list.
More information about Slider component can be found here.
Just as the previous example, the slider can be rendered in native, easily in Weex playground, or in your App. Please refer the document for integrating Weex into your App.