Skip to content
This repository has been archived by the owner on Jun 7, 2021. It is now read-only.

Commit

Permalink
Fix absolute URL to local relative path
Browse files Browse the repository at this point in the history
  • Loading branch information
@imyzf
imyzf committed Mar 22, 2018
1 parent 0bee04f commit 15a0788
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 19 deletions.
6 changes: 3 additions & 3 deletions source/cn/guide/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Weex 的另一个主要目标是跟进当代先进的 Web 开发和原生开发

![Weex Example](../../guide/images/weex-example-yo.png)

这个例子在屏幕正中间渲染了一个单词 “Yo”。 如果你想在移动设备上预览渲染结果，你只需要安装[Weex playground app](https://weex-project.io/playground.html) 或将 Weex SDK 集成到您自己的应用程序中，然后使用扫描网页右侧的二维码。
这个例子在屏幕正中间渲染了一个单词 “Yo”。 如果你想在移动设备上预览渲染结果，你只需要安装[Weex playground app](/cn/tools/playground.html) 或将 Weex SDK 集成到您自己的应用程序中，然后使用扫描网页右侧的二维码。

在源代码的 `<template>` 中，`<div>` 你应该很熟悉了，它在 Weex 平台上也是一个通用容器。但是 `<text>` 组件是由 Weex 特有的，它是一个块级的文本容器，可以用来渲染文字。

Expand Down Expand Up @@ -89,7 +89,7 @@ Weex 可以只编写一份代码，开发出三端都可用的页面。

> 以下步骤假设您已经了解了 Node.js 和 npm 的基本知识。如果对它们不熟悉，可以访问 [https://docs.npmjs.com/](https://docs.npmjs.com/) 来了解更多关于 npm 的用法。
Weex 提供了一个命令行工具 [weex-toolkit](http://weex-project.io/tools/toolkit.html) 来帮助开发者使用 Weex。它可以用来快速创建一个空项目、初始化 iOS 和 Android 开发环境、调试、安装插件等操作。
Weex 提供了一个命令行工具 [weex-toolkit](/cn/tools/toolkit.html) 来帮助开发者使用 Weex。它可以用来快速创建一个空项目、初始化 iOS 和 Android 开发环境、调试、安装插件等操作。

目前 `weex-toolkit` 只支持创建 Vue.js 的项目。创建 Rax 的项目可以使用 `rax-cli`，参考 [Rax 的官方网站](https://alibaba.github.io/rax/) 了解其用法。

Expand Down Expand Up @@ -123,7 +123,7 @@ npm start

![Preview](../../guide/images/toolkit-preview.png)

除此之外，你还可以打开 `http://localhost:8081/preview.html` 开启一个预览页面，它会把 web 端的页面放在一个 iframe 中渲染，而且在右侧生成一个二维码。用 [Weex playground app](http://weex-project.io/playground.html) 扫描这个二维码可以看到页面在手机上渲染的真实效果。
除此之外，你还可以打开 `http://localhost:8081/preview.html` 开启一个预览页面，它会把 web 端的页面放在一个 iframe 中渲染，而且在右侧生成一个二维码。用 [Weex playground app](/cn/tools/playground.html) 扫描这个二维码可以看到页面在手机上渲染的真实效果。

### 编译和运行

Expand Down
16 changes: 8 additions & 8 deletions source/cn/tools/toolkit.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ weex-toolkit工具支持对你的Weex文件（`.we`或`.vue`)在监听模式下
$ weex preview src/foo.vue
```

浏览器会自动得打开预览页面并且你可以看到你的weex页面的布局和效果。如果你在你的设备上安装了[Playground](https://weex.apache.org/cn/playground.html)，你还可以通过扫描页面上的二维码来查看页面。
浏览器会自动得打开预览页面并且你可以看到你的weex页面的布局和效果。如果你在你的设备上安装了[Playground](/cn/tools/playground.html)，你还可以通过扫描页面上的二维码来查看页面。

使用下面的命令，你将可以预览整个文件夹中的`.vue`文件

Expand All @@ -70,7 +70,7 @@ $ weex compile [source] [dist] [options]

#### 参数

| Option | Description |
| Option | Description |
| -------- | :----- |
|`-w, --watch` | 开启watch模式，同步文件改动并进行编译|
|`-d,--devtool [devtool]`|设置devtool选项|
Expand Down Expand Up @@ -106,7 +106,7 @@ $ weex run web

### debug

** [Weex devtools](https://github.com/weexteam/weex-devtool) ** 是实现[Chrome调试协议](https://developer.chrome.com/devtools/docs/debugger-protocol)的Weex自定义开发工具,
** [Weex devtools](https://github.com/weexteam/weex-devtool) ** 是实现[Chrome调试协议](https://developer.chrome.com/devtools/docs/debugger-protocol)的Weex自定义开发工具,
主要用于帮助你快速检查您的应用程序，并在Chrome网页中调试您的JS bundle源代码，支持Android和iOS平台。所以你可以通过`weex-toolkit`使用的`weex-devtool`功能。

#### 用法
Expand All @@ -117,7 +117,7 @@ weex debug [we_file|bundles_dir] [options]

#### 参数

| Option | Description |
| Option | Description |
| -------- | :----- |
|`-v, --version`| 显示weex-debugger版本信息|
|`-h, --help`| 展示帮助信息 |
Expand Down Expand Up @@ -147,7 +147,7 @@ $ weex debugx

##### 链接设备

请使用[weex playground app](http://weex.apache.org/tools/playground.html)扫码或使用集成了weex-devtool的app进行扫码，集成方法见[集成devtool工具](#集成devtool工具)。有ios模拟器环境的用户也可以通过点击二维码的方式进行模拟器调试（仅限mac用户使用）。
请使用[weex playground app](/tools/playground.html)扫码或使用集成了weex-devtool的app进行扫码，集成方法见[集成devtool工具](#集成devtool工具)。有ios模拟器环境的用户也可以通过点击二维码的方式进行模拟器调试（仅限mac用户使用）。

![debugger-main](https://img.alicdn.com/tfs/TB1v.PqbmBYBeNjy0FeXXbnmFXa-1886-993.png)

Expand Down Expand Up @@ -184,15 +184,15 @@ $ weex debug your_weex.vue
##### LogLevel和ElementMode功能
> LogLevel和ElementMode功能用于调整调试工具的输出配置。
LogLevel分别有 debug/info/warn/log/error五个log等级，切换可输出不同等级的log信息
ElementMode可以切换Element标签中Domtree显示模式，下图为vdom显示界面，可从标签中看到详细的数据结构：
LogLevel分别有 debug/info/warn/log/error五个log等级，切换可输出不同等级的log信息
ElementMode可以切换Element标签中Domtree显示模式，下图为vdom显示界面，可从标签中看到详细的数据结构：
![loglevel-elementMode](https://img.alicdn.com/tfs/TB1qzrObntYBeNjy1XdXXXXyVXa-2872-1636.png)


##### Prophet功能（加载时序图）
> Prophet功能用于查看weex的加载时序图和页面性能指标。
点击右上角Prophet即可查看时序图(iOS暂不支持，性能数据可在log的performance中查看)，如下：
点击右上角Prophet即可查看时序图(iOS暂不支持，性能数据可在log的performance中查看)，如下：
![prophet](https://img.alicdn.com/tfs/TB1E4rObntYBeNjy1XdXXXXyVXa-2852-1626.png)


Expand Down
4 changes: 2 additions & 2 deletions source/guide/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Here is an [example](http://dotwe.org/vue/8da01827631b21150a12dd54d7114380) writ

![Weex Example](./images/weex-example-yo.png)

This example renders a word "Yo" in the center of the screen. If you want to preview the rendered result on mobile devices, you need to install the [Weex playground app](https://weex-project.io/playground.html) or integrate Weex SDK into your own app. Then scan your page's QR code with your playground app or your own app (with the QR scan feature to load scanned URL with Weex SDK), and you will see the rendered result on your device.
This example renders a word "Yo" in the center of the screen. If you want to preview the rendered result on mobile devices, you need to install the [Weex playground app](/tools/playground.html) or integrate Weex SDK into your own app. Then scan your page's QR code with your playground app or your own app (with the QR scan feature to load scanned URL with Weex SDK), and you will see the rendered result on your device.

Within the `<template>` of the source code, You must be familiar with the `<div>` which is widely used on the web, and it's also the generic container on Weex. But the `<text>` component is provided by Weex, it's a block-level text container.

Expand Down Expand Up @@ -93,7 +93,7 @@ You can read *[Front-End Frameworks](./front-end-frameworks.html)* to learn more

> The following steps assume you have already known the foundational knowledge of Node.js and npm. If you are not familiar with them, you can visit [https://docs.npmjs.com/](https://docs.npmjs.com/) to learn more about npm.
Weex provide a command line tool, the [weex-toolkit](http://weex-project.io/tools/toolkit.html), to help developers to get start easily. It can help you to create a starter project, setup iOS and Android development environments, debug, install plugins and so on.
Weex provide a command line tool, the [weex-toolkit](/tools/toolkit.html), to help developers to get start easily. It can help you to create a starter project, setup iOS and Android development environments, debug, install plugins and so on.

Currently, the `weex-toolkit` only supports the creation of Vue.js project. The `rax-cli` maybe helpful if you want to use Rax. Please visit [Rax's official website](https://alibaba.github.io/rax/) for more details.

Expand Down
12 changes: 6 additions & 6 deletions source/tools/toolkit.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ $ npm install -g weex-toolkit
You can use the `weex -v` command to confirm that the installation is successful.


> If you have never installed node.js, you should go [node.js.org]( https://nodejs.org/en/) to download and install it. The node version needs to be upper 6.0. You can try [n](https://github.com/tj/n) to manage your node versions.
> If you have never installed node.js, you should go [node.js.org]( https://nodejs.org/en/) to download and install it. The node version needs to be upper 6.0. You can try [n](https://github.com/tj/n) to manage your node versions.
If you meet some errors when installing, please go [weex-toolkit issues](https://github.com/weexteam/weex-toolkit/issues) or [weex-toolkit faq](https://github.com/weexteam/weex-toolkit#faq) to find some solution or have a discuss with us.

Expand All @@ -42,7 +42,7 @@ weex-toolkit supports previewing your Weex file(`.vue`) in a watch mode. You onl
$ weex preview src/foo.vue
```

The browser automatically opens the preview page and you can see the layout and effects of your weex page. If you have a [Playground App](https://weex.apache.org/cn/playground.html) in your mobile devices, you can scan the QR code at the opened page.
The browser automatically opens the preview page and you can see the layout and effects of your weex page. If you have a [Playground App](/tools/playground.html) in your mobile devices, you can scan the QR code at the opened page.

Try the command below, you’ll preview the whole directory files.

Expand All @@ -62,7 +62,7 @@ $ weex compile [source] [dist] [options]

#### options

| Option | Description |
| Option | Description |
| -------- | :----- |
|`-w, --watch` | watch we file changes auto build them and refresh debugger page! [default `true`]|
|`-d,--devtool [devtool]` |set webpack devtool mode|
Expand Down Expand Up @@ -119,7 +119,7 @@ $ weex run web
weex debug [we_file|bundles_dir] [options]
```

| Option | Description |
| Option | Description |
| -------- | :----- |
|`-V, --verbose` | display logs of debugger server|
|`-v, --version` | display version|
Expand All @@ -141,7 +141,7 @@ $ weex debug
```

This command will start debug server and launch a chrome opening `DeviceList` page.
this page will display a QR code, you can use [Playground](https://weex.apache.org/cn/playground.html) scan it for starting debug or integrate [Weex devtools](#Integrate devtool) into your application.
this page will display a QR code, you can use [Playground](/tools/playground.html) scan it for starting debug or integrate [Weex devtools](#Integrate devtool) into your application.

![devtools-main](https://img.alicdn.com/tfs/TB1v.PqbmBYBeNjy0FeXXbnmFXa-1886-993.png)

Expand All @@ -150,7 +150,7 @@ this page will display a QR code, you can use [Playground](https://weex.apache.o
```
$ weex debug your_weex.vue
```
Click the button you can use your app or [weex playground app](http://weex.apache.org/tools/playground.html) to preview your pages.
Click the button you can use your app or [weex playground app](/tools/playground.html) to preview your pages.

![devtools-entry](https://img.alicdn.com/tfs/TB1j3DIbntYBeNjy1XdXXXXyVXa-1915-1001.png)

Expand Down

0 comments on commit 15a0788

Please sign in to comment.