阿里云赞助

使用 weex-toolkit

weex-toolkit

weex-toolkit 是官方提供的一个脚手架命令行工具,你可以使用它进行 Weex 项目的创建,调试以及打包等功能。

安装

使用 npm 安装:

$ npm install -g weex-toolkit

安装成功后,你输入 weex 应该可以看到下面的提示效果;

weex-commands

如果你本地没有安装 node.js 你可以前往官网下载安装。

*请确保你的 node 版本是>=6,你可以使用 n 来进行 node 的版本管理。

中国用户如果npm遭遇网络问题,可以使用淘宝的 cnpm 镜像:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install -g weex-toolkit

如果你安装的过程中遇到了问题,比如 permission error 你可以去 weex-toolkit issues 找到解决方法。

初始化 weex 项目

$ weex init awesome-project

执行完命令后,在 awesome-project 目录中就创建了一个使用 WeexVue 的模板项目。

然后我们进入项目所在路径,weex-toolkit 已经为我们生成了标准项目结构。

package.json 中,已经配置好了几个常用的 npm script,分别是:

  • build: 源码打包,生成 JS Bundle
  • dev: webpack watch 模式,方便开发
  • serve: 开启静态服务器
  • debug: 调试模式

我们先通过 npm install 安装项目依赖。之后运行根目录下的 npm run dev & npm run serve 开启 watch 模式和静态服务器。

然后我们打开浏览器,进入 http://localhost:8080/index.html 即可看到 Weex h5 页面。

实时预览

weex-toolkit 支持预览你当前开发的weex页面(.we或者.vue),你只需要指定预览的文件路径即可:

$ weex src/foo.vue

浏览器会自动弹出页面,这个时候你可以看到你所编辑的 Weex页面的具体效果和页面布局。如果你使用 Playground 扫描右边的二维码,就能够看到 Weex 在 Android/IOS 设备上的效果了。

如果你需要预览整个项目目录,你可以输入这样的命令:

$ weex src --entry src/foo.vue

你需要在传入的参数指定预览的目录和入口文件。

打包weex项目

如果开发完成后,你可以使用 weex compile 通过命令行工具进行单个文件或者整个项目的打包。

weex compile src/foo.vue dist

命令行需要两个参数,你的源码文件或者目录, 以及你生成打包后的目录地址。

调试 Weex 页面

weex-toolkit支持调试工具。weex devtools ,它是专门为Weex定制的一款实现了 Chrome Debugging Protocol 的 inspect/debug 工具,能够帮助你快速查看 app 运行状态和调试 Weex 中的 JS 代码,当前支持 IOSAndroid 两个平台。

用法

weex debug [options] [we_file|bundles_dir]

选项:

-h, --help 显示帮助
-V, --verbose 显示 debug 服务器运行时的各种 log
-v, --version 显示版本
-p, --port [port] 设置 debug 服务器端口号 默认为8088
-e, --entry [entry] debug 一个目录时,这个参数指定整个目录的入口 bundle 文件,这个 bundle 文件的地址会显示在 debug 主页上(作为二维码)
-m, --mode [mode] 设置构建 we 文件的方式,transformer 最基础的风格适合单文件, loader:webpack 风格 适合模块化的多文件 . 默认为 transformer

开启调试

$ weex debug

单纯启动一个调试服务器,并同时唤起Chrome浏览器打开调试主页
这个调试主页上会有一个二维码,使用 Playground App 扫这个二维码可以开启 Playground 调试。
开启调试后,设备列表中会出现您的设备,根据提示进行后续的调试操作。

调试 .we | .vue 文件

$ weex debug your_weex.vue

这个命令会将 your_weex.vue 编译成 JS Bundle 文件 部署到 debug 服务器;
并启动debug服务器如上述命令那样打开的调试vue主页会多显示一个二维码,使用 Playground App扫这个二维码码可以加载 your_weex.we (注意要先扫描开启调试的那个二维码码)。
这个命令会自动检测 your_weex.we 文件变动,如果发现内容被修改则立即重新编译部署,并刷新 debugger 页面。
.

调试整个bundle/we文件夹

同样你也可以调试整个目录的文件,你只需要传入目录的路径和入口文件即可;

$weex debug your/we/path -e index.we

这个命令会编译你指定目录下的所有的 .we 文件,并把编译好的 JS Bundle 部署到 debug 服务器,他们的地址会映射到 http://lcoalhost:8088/weex/
比如 your/we/path/index.we 可以通过 http://lcoalhost:8088/weex/index.js 访问。
your/we/path/demo/test.we 可以通过 http://lcoalhost:8088/weex/demo/index.js

-e 参数可以指定一个入口的 .we 文件,这个文件的地址会显示在调试主页上(作为二维码)。

特性

连接设备

devtools-main

Inspector

Inspector 能够用来查看 Element \ NetWork \ Console log \ ScreenCast \ BoxModel \ Native View 等。

devtools-inspector

Element

inspector-element

NetWork
查看网络请求的总耗时和延时

inspector-network

查看网络请求的header和response

inspector-network

控制台

inspector-console

资源

inspector-resource

Debugger

调试器用来调试 Weex 中的 JS 代码,能够设置断点、查看调用栈。

devtools-debugger

Breakpoint and CallStack

debugger-breakpoint

集成devtools

weex-toolkit 对 weexpack 的水平扩展

weexpack 是基于 Weex 快速搭建应用原型的利器。它能够帮助开发者通过命令行创建 Weex 工程,添加相应平台的 Weex app 模版,并基于模版从本地,GitHub 或者 Weex 应用市场安装插件,快速打包 Weex 应用并安装到手机运行,对于具有分享精神的开发者而言还能够创建 Weex 插件模版并发布插件到 Weex 应用市场。

现在使用 weex-toolkit 同样支持对 weexpack 的命令调用,如果你当前的项目与 weexpack 生成的项目目录一致,那么你可以直接实现对于 platform 的操作,从而构建具体的 Android/IOS app 。

weex platform 以及 run 命令

如果我们希望在模拟器或者真机上查看 Weex 运行的效果,我们可以使用 platform 添加或者删除 Weex 应用模板。

$ weex platform add ios

在第一次使用 platform/plugin 命令的时候,可能会遇到下面的界面,你只需要输入 Y 或者直接 enter 键即可。
install weexpack

添加ios平台,然后这个时候只要输入:

$ weex run ios

就能看到启动的模拟器运行的效果了。

weex plugin 命令

如果你想使用插件市场的插件,你可以使用:

$ weex plugin add plugin_name

你只需要输入插件的名称就可以从远程添加插件到你本地的项目,比如添加 weex-chart,我们可以输入命令:

$ weex plugin add weex-chart

我们可以使用plugin remove移除插件,比如移除安装好的 weex-cahrt:

$ weex plugin remove weex-chart

关于 weexpack 更加详细的介绍,你可以阅读 官方文档

Apache Incubator
Disclaimer: Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.


ApacheCopyright(c) 2017 The Apache Software Foundation. Licensed under the Apache License, Version 2.0