weex-toolkit 是官方提供的一个脚手架命令行工具,你可以使用它进行 Weex 项目的创建,调试以及打包等功能。
使用 npm
安装:
$ npm install -g weex-toolkit
安装成功后,你输入 weex
应该可以看到下面的提示效果;
如果你本地没有安装 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 init awesome-project
执行完命令后,在 awesome-project
目录中就创建了一个使用 Weex
和 Vue
的模板项目。
然后我们进入项目所在路径,weex-toolkit
已经为我们生成了标准项目结构。
在 package.json
中,已经配置好了几个常用的 npm script,分别是:
build
: 源码打包,生成 JS Bundledev
: 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 compile
通过命令行工具进行单个文件或者整个项目的打包。
weex compile src/foo.vue dist
命令行需要两个参数,你的源码文件或者目录, 以及你生成打包后的目录地址。
weex-toolkit支持调试工具。weex devtools ,它是专门为Weex定制的一款实现了 Chrome Debugging Protocol 的 inspect/debug 工具,能够帮助你快速查看 app 运行状态和调试 Weex 中的 JS 代码,当前支持 IOS 和 Android 两个平台。
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
页面。 .
同样你也可以调试整个目录的文件,你只需要传入目录的路径和入口文件即可;
$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
文件,这个文件的地址会显示在调试主页
上(作为二维码)。
Inspector 能够用来查看 Element
\ NetWork
\ Console log
\ ScreenCast
\ BoxModel
\ Native View
等。
调试器用来调试 Weex 中的 JS 代码,能够设置断点、查看调用栈。
weexpack 是基于 Weex 快速搭建应用原型的利器。它能够帮助开发者通过命令行创建 Weex 工程,添加相应平台的 Weex app 模版,并基于模版从本地,GitHub 或者 Weex 应用市场安装插件,快速打包 Weex 应用并安装到手机运行,对于具有分享精神的开发者而言还能够创建 Weex 插件模版并发布插件到 Weex 应用市场。
现在使用 weex-toolkit
同样支持对 weexpack
的命令调用,如果你当前的项目与 weexpack
生成的项目目录一致,那么你可以直接实现对于 platform
的操作,从而构建具体的 Android/IOS app 。
如果我们希望在模拟器或者真机上查看 Weex 运行的效果,我们可以使用 platform
添加或者删除 Weex 应用模板。
$ weex platform add ios
在第一次使用 platform/plugin 命令的时候,可能会遇到下面的界面,你只需要输入 Y 或者直接 enter 键即可。
添加ios平台,然后这个时候只要输入:
$ weex run ios
就能看到启动的模拟器运行的效果了。
如果你想使用插件市场的插件,你可以使用:
$ weex plugin add plugin_name
你只需要输入插件的名称就可以从远程添加插件到你本地的项目,比如添加 weex-chart,我们可以输入命令:
$ weex plugin add weex-chart
我们可以使用plugin remove
移除插件,比如移除安装好的 weex-cahrt:
$ weex plugin remove weex-chart
关于 weexpack
更加详细的介绍,你可以阅读 官方文档。