Let’s start by writing a list item.
Please create a file named tech_list.we (. We is the Weex recommended suffix) and copy and paste the above code into it.
Since the Weex toolchain is built using Node.js, before proceeding to the next steps, You need to install Node. Js (https://nodejs.org/en/download/stable/), In the Node. Js after successful installation, you can perform the following command to install Weex command-line program Weex Toolkit (https://www.npmjs.com/package/weex-toolkit).
After the installation is complete, you can run the weex command on the CLI to check whether the tool is correctly installed. After just typing weex and hitting Enter, you should see something like this:
If all is well, switch the working directory on the command line to the directory where you stored tech_list.we and type the following command:
The window of your system’s default browser will open automatically to show the following:
Grammatical concepts
Now let’s look at some simple grammar concepts. As shown in tech_list.we, the Weex code consists of three parts: template, style, and script. These three concepts are to Weex what HTML, CSS, and javascript are to the Web.
The template provides the Weex with a skeleton and consists of tags and contents surrounded by tags. The Weex contains two types of labels: open labels (EG:) and closed labels (EG:). Each pair of open and closed labels is called a group of Weex labels. Attributes can be added to tags. Different attributes have different meanings. For example, the class attribute allows the same style to be applied to multiple groups of Weex tags, and the onclick attribute allows the tag to respond to user clicks.
The style section describes how Weex labels are displayed. Like you, we love CSS, so the styles in Weex are as close to CSS standards as possible. Weex supports many CSS features: margin, padding, fixed…… Even better, the Flexbox layout model is well supported in Weex.
The script section adds data and logic to Weex tags, where you can easily access local and remote data and update tags. You can also define methods and have them respond to different events. Weex scripts are organized in accordance with the CommonJS Module specification.
More information about Weex grammar, you can in the Syntax chapter (http://alibaba.github.io/weex/doc/syntax/main.html) to view.
Add more list items
A single list item is not a list, so let’s add more. Open the tech_list.we file and update it with the following:
Now, let’s try rendering this file using Weex Native. Open the terminal, switch to the directory where the file is saved, and run
A QR code will appear on the terminal, similar to the following:
The qr code need to cooperate with Weex Playground App (http://alibaba.github.io/weex/download.html). After downloading and installing, click the scan icon in the App, and then scan the QR code in the terminal with your mobile phone camera. A beautiful list will appear on your phone.
I want to emphasize that this list is rendered entirely by Native View (not Webkit), and your App will get faster page loading and less memory overhead than webKit-rendered interfaces.
Now you can try out some changes in tech_list.we. After saving the changes, Weex Playground will immediately reflect those changes on the interface. This feature is often called hot-reload and hopefully will make Weex development easier for you.
Adding built-in components
In addition to writing your own basic tags, Weex comes with many built-in components. Sliders are common in mobile apps and pages, so we’ve provided a built-in Slider that lets you easily add a Slider to your interface. Open up tech_list.we and change the contents as follows:
Run this command again in the same directory on the terminal:
A nice slider will be added to the top of the list we wrote earlier.
More information about slider component (http://alibaba.github.io/weex/doc/components/slider.html) to see here, please.
As we demonstrated earlier, the interface can also be rendered in Weex Playground App in a “Native View”. If you want your own App to have this capability, Please visit the document (http://alibaba.github.io/weex/doc/advanced/integrate-to-android.html) to learn how to integrate Weex into your App.
Baichuan.taobao.com is the wireless open platform of Alibaba Group. Through the opening of “technology, business and big data”, baichuan.taobao.com provides high cohesion, open, industry-leading technology product matrix, mature business components and perfect service system in mobile scenes. Help mobile developers quickly build apps, accelerate the process of APP commercialization, and empower mobile developers and mobile entrepreneurs in an all-round way.
About Alibaichuan 