weex toolkit插件下载
- 类型:电脑软件
- 评分:
- 语言:简体中文
- 大小: 125
- 更新:2017-12-04
内容介绍
weex-toolkit 插件是由weex官方提供的一个脚手架命令行工具,你可以使用它进行 Weex 项目的创建,调试以及打包等功能。相信有开发者们用的到,100down站于是整理了推送给用户们下载。
weex toolkit安装说明
使用 npm 安装:
$ npm install -g weex-toolkit
|
这里安装成功后,你输入 weex 应该可以看到下面的提示效果;
如果你本地没有安装 node.js 你可以前往官网下载安装。
也可以直接 在100down站下载:https://www.100down.com/xz/soft_20284.html
*请确保你的 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 目录中就创建了一个使用 Weex 和 Vue 的模板项目。
然后我们进入项目所在路径,weex-toolkit 已经为我们生成了标准项目结构。
在 package.json 中,已经配置好了几个常用的 npm script,分别是:
build: 源码打包,生成 JS Bundle
dev: webpack watch 模式,方便开发
serve: 开启静态服务器
debug: 调试模式
我们先通过 npm install 安装项目依赖。之后运行根目录下的 npm run dev & npm run serve 开启 watch 模式和静态服务器。
然后我们打开浏览器,进入 https://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 代码,当前支持 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 页面。
.
调试整个bundle/we文件夹
同样你也可以调试整个目录的文件,你只需要传入目录的路径和入口文件即可;
$weex debug your/we/path -e index.we
|
这个命令会编译你指定目录下的所有的 .we 文件,并把编译好的 JS Bundle 部署到 debug 服务器,他们的地址会映射到https://lcoalhost:8088/weex/ 下
比如 your/we/path/index.we 可以通过 https://lcoalhost:8088/weex/index.js 访问。
your/we/path/demo/test.we 可以通过 https://lcoalhost:8088/weex/demo/index.js 。
-e 参数可以指定一个入口的 .we 文件,这个文件的地址会显示在调试主页上(作为二维码)。
weex toolkit插件特性
连接设备
Inspector
Inspector 能够用来查看 Element \ NetWork \ Console log \ ScreenCast \ BoxModel \ Native View 等。
Element
NetWork
查看网络请求的总耗时和延时
查看网络请求的header和response
控制台
资源
Debugger
调试器用来调试 Weex 中的 JS 代码,能够设置断点、查看调用栈。
Breakpoint and CallStack
集成devtools
Android
请参考文档 Weex devtools (Android),其中有详细说明。
IOS
请参考文档 Weex devtools (iOS), 其中有详细说明。
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 键即可。
添加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
|
最新应用
最新文章
- 使命召唤怎么获得赛季迷彩-使命召唤赛季迷彩获取攻略最新 2023-09-06
- 使命召唤如何获得突击匕首-使命召唤获得突击匕首的方法 2023-09-06
- 使命召唤怎么获得改名卡-使命召唤获得改名卡的方法 2023-09-06
- 晶核如何获得转移石-晶核转移石获得途径 2023-09-05
- 晶核怎么获得技能点-晶核技能点获取攻略 2023-09-05
- 晶核怎么获得晶珀-晶核晶珀获得的方法 2023-09-05
- 战双帕弥什如何获得武器-战双帕弥什武器获取攻略 2023-09-04
- 战双帕弥什如何提升战力-战双帕弥什战力提升途径 2023-09-04
- 战双帕弥什怎么快速升级-战双帕弥什快速升级攻略 2023-09-04
- 航海王热血航线如何获得体力-航海王热血航线获得体力的方式 2023-09-03