Skip to content

Commit

Permalink
* [doc] add weex-toolkit h5 renderer back
Browse files Browse the repository at this point in the history
  • Loading branch information
lvscar committed Jun 9, 2016
1 parent 67691dd commit e0ab376
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 28 deletions.
16 changes: 5 additions & 11 deletions doc/how-to/preview-in-browser.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,15 @@ npm install -g weex-toolkit
Check whether the toolkit is working by typeing `weex` in cmd line. Normally you should see the following help text:

```
Usage: weex foo/bar/your_next_best_weex_script_file.we [options]
Options:
-n do not open preview browser automatic [boolean]
--qr display QR code for native runtime [boolean]
-h specify weex server listen host [default: "127.0.0.1"]
-o transform weex JS bundle only, specify bundle file name using the
option [default: "no JSBundle output"]
-s start a http file server, weex .we file will be transformed on the
server , specify local root path using the option [default: false]
--help Show help [boolean]
--qr display QR code for native runtime,
-o,--output transform weex we file to JS Bundle, output path (single JS bundle file or dir)
-s,--server start a http file server, weex .we file will be transforme to JS bundle on the server , specify local root path using the option
......
--help Show help
```

If all works well, navigate to the path the xxx.we file you want to preview in, and type the command:

```
weex xxx.we
```
Expand Down
Binary file modified doc/images/tut-cli-qrcode.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion doc/tools/how-to-debug.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ project(":weex_debug").projectDir=new File("../weex_debug")
Tip: if your local weex tool version<0.0.31 you shoud update your weex tool

````shell
npm install -g weex-toolkit@0.0.31
npm install -g weex-toolkit
````
Next: you can start local server

Expand Down
38 changes: 22 additions & 16 deletions doc/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,11 @@ $ weex
Usage: weex foo/bar/your_next_best_weex_script_file.we [options]
Options:
--qr display QR code for native runtime [boolean]
-o transform weex JS bundle only, specify bundle file name using the
option [default: "no JSBundle output"]
-s start a http file server, weex .we file will be transformed on the
server, specify local root path using the option [default: false]
--help Show help [boolean]
--qr display QR code for native runtime,
-o,--output transform weex we file to JS Bundle, output path (single JS bundle file or dir)
-s,--server start a http file server, weex .we file will be transforme to JS bundle on the server , specify local root path using the option
......
--help Show help
```

If all works well, navigate to the directory where you save the newly created `tech_list.we`, then type:
Expand All @@ -56,15 +55,9 @@ If all works well, navigate to the directory where you save the newly created `t
weex tech_list.we
```

An QR code will be display in the terminal window like:

![Weex CLI](images/tut-cli-qrcode.png)

The QR code can work together with [Weex Playground App](http://alibaba.github.io/weex/download.html). Open it and tap the scan icon at the top-right corner, then scan the Qr code the terminal made. Then you will see the result.

![First Example](images/tut-first.png)
A browser window will open automatically to display something like below

Here, I must stress that the list is rendered by native view ( not Webkit ), so your app get faster loading and less memory overhead than common Webview renderer.
![weex html5 render](http://gtms02.alicdn.com/tps/i2/TB1y151LVXXXXXXaXXXoRYgWVXX-495-584.jpg)

## Intro Weex Syntax

Expand Down Expand Up @@ -107,12 +100,25 @@ We can't call one item an list, so we need add more item to our tech list. open
</style>
```

After changes saved the Weex playground App will immediately display these changes. we called it **Hot-Reload**. Hope it can help you use Weex better.
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

And a beautiful list will be displayed in your phone.
```
weex tech_list.we --qr
```

An QR code will be display in the terminal window like:

![Weex CLI](images/tut-cli-qrcode.png)

The QR code can work together with [Weex Playground App](http://alibaba.github.io/weex/download.html). Open it and tap the scan icon at the top-right corner, then scan the Qr code in your terminal.If all works well, a beautiful list will be displayed in your phone.

![Second Example](images/tut-second.png)

Here, I must stress that the list is rendered by native view ( not Webkit ), so your app get faster loading and less memory overhead than common Webview renderer.

After changes saved the Weex playground App will immediately display these changes. we called it **Hot-Reload**. Hope it can help you use Weex better.

## Add Build-in Component

Beyond writing basic tag by yourself, Weex provide a lot of build-in components. For example, Slider is common to many App/Mobile Web, So Weex include a build-in Slider and you can easily using the component in your script. Let's open tech_list.we and update it's content like below.
Expand Down

0 comments on commit e0ab376

Please sign in to comment.