Cross-platform development of Ali Weex Framework Environment Construction (i.)

Disclaimer: Original articles, reproduced please indicate the source, thank you!

https://i.cnblogs.com/EditPosts.aspx?postid=5995122

First, Introduction

Weex is Ali's cross-platform solution launched in June this year, officially open source at the end of June. Official website https://alibaba.github.io/weex/

1, the official support iOS, Android, HTML5.

2, Write Once, Run Everywhere. Write one at a time to generate three platform code.

3, the DSL template Learning super simple, directly write HTML, CSS, JS. This means that you can directly complete, prompt, check, and so on with the existing editor and IDE's code.

4, lightweight, scalable, high-performance.

5, integration pattern, can be embedded in the HTML5 page, can also embed in the native UI.

Second, the environment construction

1. Installing the node. JS Environment

Download https://nodejs.org/en/download/

After the installation is complete, open the CMD input node--version command to view the node version

2. Install Command line tool Weex-toolkit

输入命令 npm install -g weex-toolkit

NPM is a very popular management tool for Nodejs, can install any module package based on Nodejs development,-G means to install Weex-toolkit into the global module, after success we can

Nodejs\node_modules below find Weex-toolkit this bag;

Note: Node_modules this will exist for both the Nodejs itself and the Nodejs-based development project, so there is a global local point, without the-g parameter means that the module package is added in the Node_modules directory of the current project

查看是否安装成功，输入命令weex，出现如表示安装成功

查看weex版本  ，输入weex -version

3. Compile test

Copy the following code into the new file and use the Test_list.we file command

<Template><Divclass= "Container"><Divclass= "Cell"><Imageclass= "thumb"src= "Http://t.cn/RGE3AJt"></Image><textclass= "title">Javascript</text></Div></Div></Template><style>. Cell{Margin-top:Ten;Margin-left:Ten;flex-direction:Row; }. Thumb{width: $;Height: $; }. Title{text-align:Center;Flex:1;Color:Grey;font-size: -; }</style>

然后运行终端，进入test_list.we文件所在目录，输入weex tech_list.we
如果成功，会在浏览器中打开一个新的页面如下，表示运行成功

我们试着修改代码，保存会发现我们页面内容同时也更新了，这就是hot reloaded  

终端也能看到

4, mobile phone running app

Terminal input The following command will generate a QR code Weex tech_list.we--qr-h {IP or hostname} here specify the local IP address or hostname, here I fill in my local IP as follows:

weex tech_list.we --qr -h 192.168.0.102

Finally, our mobile phone installation playground.apk (: https://alibaba.github.io/weex/download.html), open QR Code sweep sweep run can

Cross-platform development of Ali Weex Framework Environment Construction (i.)