zshshr closed pull request #278: update doc for create-a-new-app && integrate-to-android-app URL: https://github.com/apache/incubator-weex-site/pull/278
This is a PR merged from a forked repository. As GitHub hides the original diff on merge, it is displayed below for the sake of provenance: As this is a foreign pull request (from a fork), the diff is supplied below (as it won't show otherwise due to GitHub magic): diff --git a/docs/guide/develop/create-a-new-app.md b/docs/guide/develop/create-a-new-app.md index e69de29bb..acc013b40 100644 --- a/docs/guide/develop/create-a-new-app.md +++ b/docs/guide/develop/create-a-new-app.md @@ -0,0 +1,69 @@ +# Create Your Own App + +> The following steps assume basic 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, and [https://nodejs.org/en/docs/](https://nodejs.org/en/docs/) to learn more about Node.js. + +Weex provides a command line tool, the [weex-toolkit](../../tools/toolkit.html), to help developers get start easily. The CLI can help you 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` may be helpful if you want to use Rax. Please visit [Rax's official website](https://alibaba.github.io/rax/) for more details. + +## Set up + +With [Node.js](https://nodejs.org/) installed, install `weex-toolkit` CLI globally. + +```bash +npm install weex-toolkit -g +``` + +This will add the `weex` command to your global path, and will allow you to generate new projects with the `weex create <project-name>` command. +Use `weex create` to create a starter project: + +```bash +weex create awesome-app +``` + +After doing that, a standard **Weex + Vue.js** project will be generated inside the `awesome-app` folder in the current path. + +## Develop + +The next step is to navigate into the generated directory, install dependencies, and start: + +```bash +cd awesome-app +npm install +npm start +``` + +`npm start` will start a web server on port `8081`. Open `http://localhost:8081` in your browser of choice to see the rendered result of your Weex app. The source code is located in `src/` folder. You can develop it as a normal Vue.js project. + + + +Additionally, you can open `http://localhost:8081/web/preview.html` to preview the rendered result on the web in an iframe. You can also scan the QR code generated on the right using the [Weex playground app](/tools/playground.html) to see the rendered result on the mobile device. + +## Build and Run + +By default, the `weex create` command doesn't create the iOS and Android project, but you can use `weex platform add` to add them. + +```bash +weex platform add ios +weex platform add android +``` + +Depending on your network environment, it may take a while to add them. Please be patient. + +In order to develop the app on your local machine, you need to set up a mobile development environment. For iOS, you should install [Xcode](https://developer.apple.com/xcode/). For Android, you should install [Android Studio](https://developer.android.com/studio/index.html). When the development environment is ready, run the commands below to launch your app on the simulator or the device. + +```bash +weex run ios +weex run android +weex run web +``` + +## Debug + +The `weex-toolkit` can also be used to debug your mobile apps. Just run: + +```bash +weex debug +``` + +`weex debug` will start a debug server and open a web page in Chrome (only support V8 engine). For more technical details of `weex-toolkit`, please refer to the [toolkit document](../../tools/toolkit.html). \ No newline at end of file diff --git a/docs/guide/develop/integrate-to-android-app.md b/docs/guide/develop/integrate-to-android-app.md index b3ed87b9c..5647af8d3 100644 --- a/docs/guide/develop/integrate-to-android-app.md +++ b/docs/guide/develop/integrate-to-android-app.md @@ -13,6 +13,10 @@ version: 2.1 The following documents assume that you already have a certain Android development experience. +- [JAVA Environment, jdk7+](https://www.oracle.com/technetwork/java/javase/downloads/index.html) +- [Android Studio](https://developer.android.com/training/basics/firstapp/) +- [NDK r16](https://developer.android.com/ndk/)、[Cmake 3.9.0+](https://cmake.org/download/) (option: if you need compile the source ,ndk and cmake are required) + ## 1. Configure dependency diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md index 37ac473a7..a87ad0db4 100644 --- a/docs/guide/introduction.md +++ b/docs/guide/introduction.md @@ -81,75 +81,6 @@ However, Vue and Rax are not the only options. It is entirely possible to integr You can read _[Front-End Frameworks](./front-end-frameworks.html)_ for more details. -## Create Your Own App - -> The following steps assume basic 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, and [https://nodejs.org/en/docs/](https://nodejs.org/en/docs/) to learn more about Node.js. - -Weex provides a command line tool, the [weex-toolkit](/tools/toolkit.html), to help developers get start easily. The CLI can help you 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` may be helpful if you want to use Rax. Please visit [Rax's official website](https://alibaba.github.io/rax/) for more details. - -### Set up - -With [Node.js](https://nodejs.org/) installed, install `weex-toolkit` CLI globally. - -```bash -npm install weex-toolkit -g -``` - -This will add the `weex` command to your global path, and will allow you to generate new projects with the `weex create <project-name>` command. -Use `weex create` to create a starter project: - -```bash -weex create awesome-app -``` - -After doing that, a standard **Weex + Vue.js** project will be generated inside the `awesome-app` folder in the current path. - -### Develop - -The next step is to navigate into the generated directory, install dependencies, and start: - -```bash -cd awesome-app -npm install -npm start -``` - -`npm start` will start a web server on port `8081`. Open `http://localhost:8081` in your browser of choice to see the rendered result of your Weex app. The source code is located in `src/` folder. You can develop it as a normal Vue.js project. - - - -Additionally, you can open `http://localhost:8081/web/preview.html` to preview the rendered result on the web in an iframe. You can also scan the QR code generated on the right using the [Weex playground app](/tools/playground.html) to see the rendered result on the mobile device. - -### Build and Run - -By default, the `weex create` command doesn't create the iOS and Android project, but you can use `weex platform add` to add them. - -```bash -weex platform add ios -weex platform add android -``` - -Depending on your network environment, it may take a while to add them. Please be patient. - -In order to develop the app on your local machine, you need to set up a mobile development environment. For iOS, you should install [Xcode](https://developer.apple.com/xcode/). For Android, you should install [Android Studio](https://developer.android.com/studio/index.html). When the development environment is ready, run the commands below to launch your app on the simulator or the device. - -```bash -weex run ios -weex run android -weex run web -``` - -### Debug - -The `weex-toolkit` can also be used to debug your mobile apps. Just run: - -```bash -weex debug -``` - -`weex debug` will start a debug server and open a web page in Chrome (only support V8 engine). For more technical details of `weex-toolkit`, please refer to the [toolkit document](../tools/toolkit.html). ## Next Steps @@ -157,6 +88,7 @@ At this point, you should have a general understanding of Weex. The next step is If you want to use weex right now: +- [Create new app](./develop/create-a-new-app.html) - [Integrate Weex to Your Existing App](./integrate-to-your-app.html) - [Set up Development Environment](./set-up-env.html) - [References](../references/) diff --git a/docs/zh/guide/develop/create-a-new-app.md b/docs/zh/guide/develop/create-a-new-app.md index e69de29bb..0f2b95f6c 100644 --- a/docs/zh/guide/develop/create-a-new-app.md +++ b/docs/zh/guide/develop/create-a-new-app.md @@ -0,0 +1,68 @@ +# 创建一个 App + +> 以下步骤假设您已经了解了 Node.js 和 npm 的基本知识。如果对它们不熟悉，可以访问 [https://docs.npmjs.com/](https://docs.npmjs.com/) 来了解更多关于 npm 的用法。 + +Weex 提供了一个命令行工具 [weex-toolkit](../../tools/toolkit.html) 来帮助开发者使用 Weex。它可以用来快速创建一个空项目、初始化 iOS 和 Android 开发环境、调试、安装插件等操作。 + +目前 `weex-toolkit` 只支持创建 Vue.js 的项目。创建 Rax 的项目可以使用 `rax-cli`，参考 [Rax 的官方网站](https://alibaba.github.io/rax/) 了解其用法。 + +## 初始化 + +请确保你已经安装了 [Node.js](https://nodejs.org/)，然后全局安装 `weex-toolkit`。 + +```bash +npm install weex-toolkit -g +``` + +这条命令会向你命令行环境中注册一个 `weex` 命令。你可以用 `weex create` 命令来创建一个空的模板项目： + +```bash +weex create awesome-app +``` + +命令执行完以后，在当前目录的 `awesome-app` 文件夹里就有了一个空的 **Weex + Vue.js** 项目。 + +## 开发 + +下一步就是进入刚刚创建的文件夹，并且安装依赖，然后执行 `npm start`： + +```bash +cd awesome-app +npm install +npm start +``` + +然后工具会启动一个本地的 web 服务，监听 `8081` 端口。你可以打开 `http://localhost:8081` 查看页面在 Web 下的渲染效果。 源代码在 `src/` 目录中，你可以像一个普通的 Vue.js 项目一样来开发. + + + +除此之外，你还可以打开 `http://localhost:8081/preview.html` 开启一个预览页面，它会把 web 端的页面放在一个 iframe 中渲染，而且在右侧生成一个二维码。用 [Weex playground app](/zh/tools/playground.html) 扫描这个二维码可以看到页面在手机上渲染的真实效果。 + +## 编译和运行 + +默认情况下 `weex create` 命令并不初始化 iOS 和 Android 项目，你可以通过执行 `weex platform add` 来添加特定平台的项目。 + +```bash +weex platform add ios +weex platform add android +``` + +由于网络环境的不同，安装过程可能需要一些时间，请耐心等待。如果安装失败，请确保自己的网络环境畅通。 + +为了能在本地机器上打开 Android 和 iOS 项目，你应该配置好客户端的开发环境。对于 iOS，你应该安装并且配置好 [Xcode](https://developer.apple.com/xcode/)。对于 Android，你应该安装并且配置好 [Android Studio](https://developer.android.com/studio/index.html)。当开发环境准备就绪后，运行下面的命令，可以在模拟器或真实设备上启动应用： + +```bash +weex run ios +weex run android +weex run web +``` + +## 调试 + +`weex-toolkit` 还提供了强大的调试功能，只需要执行： + +```bash +weex debug +``` + +这条命令会启动一个调试服务，并且在 Chrome （目前只支持基于 V8 引擎的桌面浏览器） 中打开调试页面。详细用法请参考 [weex-toolkit 的文档](../../tools/toolkit.htm)。 \ No newline at end of file diff --git a/docs/zh/guide/develop/integrate-to-android-app.md b/docs/zh/guide/develop/integrate-to-android-app.md index c4b6129c8..81c9272f8 100644 --- a/docs/zh/guide/develop/integrate-to-android-app.md +++ b/docs/zh/guide/develop/integrate-to-android-app.md @@ -12,6 +12,11 @@ version: 2.1 在执行以下步骤之前，请先确认您的Android开发环境是ok的。 +- [JAVA环境, jdk7+](https://www.oracle.com/technetwork/java/javase/downloads/index.html) +- [Android Studio](https://developer.android.com/training/basics/firstapp/) +- [NDK r16](https://developer.android.com/ndk/)、[Cmake 3.9.0+](https://cmake.org/download/) (可选项：如果需要编译WEEX源码，需要NDK环境支持) + + ## 1. 设置gradle依赖 @@ -151,7 +156,7 @@ public class MainActivity extends AppCompatActivity implements IWXRenderListener ## 7. 扩展Android能力 -Weex 提供了[能力扩展机制]((/guide/extend/extend-android.html))，可以根据自己的业务进行定制自己的功能。 主要分为： +Weex 提供了[能力扩展机制](/guide/extend/extend-android.html)，可以根据自己的业务进行定制自己的功能。 主要分为： - Module 扩展， 非 UI 的特定功能。例如 sendHttp、openURL 等。 - Component 扩展， 实现特别功能的 Native 控件。例如：RichTextview，RefreshListview 等。 diff --git a/docs/zh/guide/introduction.md b/docs/zh/guide/introduction.md index 93ac4c7cf..3cd521fcc 100644 --- a/docs/zh/guide/introduction.md +++ b/docs/zh/guide/introduction.md @@ -77,74 +77,7 @@ Weex 可以只编写一份代码，开发出三端都可用的页面。 然而 Weex 也不是只支持 Vue 和 Rax，你也可以把自己喜欢的前端框架集成到 Weex 中。有一个文档*[扩展前端框架](/cn/guide/extend-js-framework.html)*描述了如何实现，但是这个过程仍然非常复杂和棘手，你需要了解关于 js-native 之间通信和原生渲染引擎的许多底层细节。 -## 创建一个 App -> 以下步骤假设您已经了解了 Node.js 和 npm 的基本知识。如果对它们不熟悉，可以访问 [https://docs.npmjs.com/](https://docs.npmjs.com/) 来了解更多关于 npm 的用法。 - -Weex 提供了一个命令行工具 [weex-toolkit](/cn/tools/toolkit.html) 来帮助开发者使用 Weex。它可以用来快速创建一个空项目、初始化 iOS 和 Android 开发环境、调试、安装插件等操作。 - -目前 `weex-toolkit` 只支持创建 Vue.js 的项目。创建 Rax 的项目可以使用 `rax-cli`，参考 [Rax 的官方网站](https://alibaba.github.io/rax/) 了解其用法。 - -### 初始化 - -请确保你已经安装了 [Node.js](https://nodejs.org/)，然后全局安装 `weex-toolkit`。 - -```bash -npm install weex-toolkit -g -``` - -这条命令会向你命令行环境中注册一个 `weex` 命令。你可以用 `weex create` 命令来创建一个空的模板项目： - -```bash -weex create awesome-app -``` - -命令执行完以后，在当前目录的 `awesome-app` 文件夹里就有了一个空的 **Weex + Vue.js** 项目。 - -### 开发 - -下一步就是进入刚刚创建的文件夹，并且安装依赖，然后执行 `npm start`： - -```bash -cd awesome-app -npm install -npm start -``` - -然后工具会启动一个本地的 web 服务，监听 `8081` 端口。你可以打开 `http://localhost:8081` 查看页面在 Web 下的渲染效果。 源代码在 `src/` 目录中，你可以像一个普通的 Vue.js 项目一样来开发. - - - -除此之外，你还可以打开 `http://localhost:8081/preview.html` 开启一个预览页面，它会把 web 端的页面放在一个 iframe 中渲染，而且在右侧生成一个二维码。用 [Weex playground app](/cn/tools/playground.html) 扫描这个二维码可以看到页面在手机上渲染的真实效果。 - -### 编译和运行 - -默认情况下 `weex create` 命令并不初始化 iOS 和 Android 项目，你可以通过执行 `weex platform add` 来添加特定平台的项目。 - -```bash -weex platform add ios -weex platform add android -``` - -由于网络环境的不同，安装过程可能需要一些时间，请耐心等待。如果安装失败，请确保自己的网络环境畅通。 - -为了能在本地机器上打开 Android 和 iOS 项目，你应该配置好客户端的开发环境。对于 iOS，你应该安装并且配置好 [Xcode](https://developer.apple.com/xcode/)。对于 Android，你应该安装并且配置好 [Android Studio](https://developer.android.com/studio/index.html)。当开发环境准备就绪后，运行下面的命令，可以在模拟器或真实设备上启动应用： - -```bash -weex run ios -weex run android -weex run web -``` - -### 调试 - -`weex-toolkit` 还提供了强大的调试功能，只需要执行： - -```bash -weex debug -``` - -这条命令会启动一个调试服务，并且在 Chrome （目前只支持基于 V8 引擎的桌面浏览器） 中打开调试页面。详细用法请参考 [weex-toolkit 的文档](../tools/toolkit.html)。 ## 下一步 @@ -152,6 +85,7 @@ weex debug 如果你想现在就用 Weex： ++ [创建一个 App](./develop/create-a-new-app.html) + [将 Weex 集成到已有应用](./integrate-to-your-app.html) + [配置开发环境](./set-up-env.html) + [手册](../references/) ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services
