上一篇文章从 What,How,Why 等角度对 Weex 进行分析。这篇文章继续 Learn Weex The Hard Way 。

首先要说明的是,最好的学习方法或许就是 get your hand dirty ,光看文档到最后也只能留下个不太深刻的印象,对于目前 Weex 的文档来说,许多地方其实是有问题的,只有动手,才能真正算是真正的学习,如果能记录并整理一下学习的过程就更好了~

这篇文档主要内容:创建一个项目 from scratch。

目前 Weex 提供了两个工具辅助开发调试:weex-toolkit 和 weexpack。前者主要针对的是 Weex 页面的开发,与 playground 结合调试效果更佳。 而后者主要是 Weex 提供的命令行工具,支持插件安装,打包成 Native,因此更倾向于利用 Weex 从头做一个完整的 APP,weex-toolkit 更适合将 Weex 嵌入到已有 APP 中的开发模式。

本文着重介绍 weex-toolkit 以及 如何结合 playground 进行调试。

搭建开发&调试环境

假定系统是 macOS Sierra,其他操作系统操作基本一致,可参考官方文档
1.1 安装依赖
Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。weex-toolkit 是一个 npm 包,因此同样依赖于 Node, 对于 Mac 系统可以用 Homebrew 安装:

brew install node

其他系统可以到 Node.js 官网下载安装。

这里安利一下 Node 版本管理工具, nvm或者 n, 这样可以方便切换 Node 版本。

接下来要安装 weex-toolkit。

npm install -g weex-toolkit

这里需要注意的是,如果提到权限问题,加 sudo 。
安装结束后,命令行输入 weex ,

:官方文档中提到的版本是 weex-toolkit@beta, 经试验

如图,已经到 1.0.3 版本了。Weex 一开始文件后缀为 “*.we”, 目前已经全面支持 Vue2.0, 因此更推荐 “.vue” 的写法。

1.2 初始化项目

weex init learn-weex-the-hard-way

然后可以进入到刚创建完毕的 learn-weex-the-hard-way 文件夹。

npm i

安装项目依赖。

安装完毕后,weex-toolkit 生成的项目结构如下图所示:

: 关于package.json 可以参考阮一峰老师的教程

执行npm run build,当前路径下会生成 dist 目录,并生成的 js bundle 文件,这里生成了 app.web.js 和 app.weex.js两个 bundle 文件, 分别适配 H5 和 移动设备。具体生成可以看webpack.conf.js 文件。

1.3 开发

开发过程中常用的命令有:

  • npm run dev : webpack watch 模式,方便开发

  • npm run serve:开启静态服务器

    然后在浏览器输入:http://localhost:8080/
    Duang!

:目前对于 H5 的适配,Weex 做的还不够好,后面我们主要精力放在 Android 和 iOS 这两端。

1.4 调试

  • weex debug dist/app.weex.js: 调试移动设备的 js bundle。

此命令在与 weex-playground 结合开发调试中经常会用到。

命令执行完,会自动在 Chrome 打开一个新的 Tab 页面:

目前我们先用官网提供的下载地址下载 playground(后续会整理一下如何手动定制 playground), 然后扫描左侧的二维码(把持手机和电脑在同一个局域网内):

App List 显示了设备连接列表以及相应的 playground 版本,这里是 0.9.4。

然后再扫一扫右侧的二维码,用 playground 调试当前的 Weex 页面。

如何利用 Debugger 以及 Inspector 呢?

App List 列表下面给出了提示:

比如我们点击 Debugger, 在新打开的 Tab 页开启开发者控制台 :

我们就可以查看 Console 的日志输出,让然也可以在这添加断点。

回到之前的页面,我们选择 Inspector 是怎样一种情形呢?

可以显示 View Tree 以及样式属性等,跟前端开发几乎一摸一样。

如何打断点,调试等跟前端开发并无二致,这里不展开。

小结

本文利用 weex-toolkit 新建了一个项目(项目地址,有问题欢迎在这里提问),并熟悉了一下常用开发、调试命令以及流程。另有饿了么大前端的知乎专栏文章一篇值得推荐。

Learn Weex The Hard Way, 如果仅仅是翻译官方文档就没意思了,但是,万事开头难,学习如何 Debug 对后面开发帮助非常大。

后面尽可能不讲官方文档写的很好的东西(没讲的,讲的不清楚的还是要整理下)。剧透下接下来的安排:接下来会整理一下 Weex 如何优雅的与 ESLint 结合,对代码做静态检查,来保证代码质量。

再后面应该还会写一篇关于 Weex 图标的解决方案。

再再后面的安排暂定。

参考

  1. 官网

最后的最后

本来想总结一篇又长又臭的入坑文,不幸的是我 TM 竟然感冒了,脑子有点混乱,睡了。。。