本文共 4664 字，大约阅读时间需要 15 分钟。

weex，一套类似React Native的跨平台原生开发应用方案，自阿里去年6月份开源以来，呼声很高，号称一次编写，多端运行。作为一个移动开发实践多年的ios来说，被迫放弃原生，开始走向混合，走向前端！

http://www.jianshu.com/u/369aa004f0d8

就目前，刚接触到weex的同学都说巨坑无比，然而weex生态还未成熟，就连你百度weex都找不到其官网，很多同学都找到的，还不是官方的，数据库动不动就被黑，里面的内容经常被清干。真是欲哭无泪，欲报无门呀。

其实，大家还是没有找到方向。这里就给大家分享我是怎么一步一步入坑，爬坑的！

一.前提

weex使用vue作为上层前端框架，语法同完全一样。所以很多人都会选择Vue做为入门，我也是如此。而且weex 提供的最新的beta测试版已经开始支持Vue了。

在里，一般都会选择weex提供的脚手架 weex-toolkit，文件名是 .vue，最新官网提供的版本是1.0.1beta版，既然是测试版，必然是还在开发测试，所以遇到很多坑那是正常的。同大家一样，我开始也是按照官网提供的思路一步一步走，入坑.
，不容易发现，它是在新文档的最下面，还有在新文档的FAQ栏目下面，也可以查阅老文档的教程和手册，还有原理。是如下图。老文档里面weex提供的脚手架是基于weex的语法的，即文件是.we。

虽然大家已经熟悉vue语法，相对入门比较容易，但是新的文档里面有些内容还是缺失不详细的，所以推荐大家还是以老文档入门，即先学习Vue，然后以weex语法入门，学习原理。
当然weex官方还是比较推崇vue的，陈诺后面各方面会慢慢的完善。毕竟现在天猫淘宝这方面已经成熟稳定了，所以等weex的新版出来了，大家已经玩熟了weex，这时候就再就可以用vue开心的玩耍了。

强调一下，看官网文档，看官网文档，看官网文档，重要的事情说三遍。官网文档写的非常清楚，原理，语法，甚至是demo 代码，还有运行效果。所以后面我不会把文档里面的内容贴过来了，自己去找！哈哈。

二.安装开发环境

很多人安装脚手架都不成功，然后就放弃了...

安装脚手架之前遇到的几个坑点：

• 更新node到最新版本。

• 安装脚手架时，用npm安装非常慢，所以很多同学会选择用cnpm，这时候安装会缺失一些依赖包，甚至安装报错。所以还是要切换到npm，这里提供一下淘宝的npm镜像：

  临时使用

npm --registry https://registry.npm.taobao.org install express

持久使用

npm config set registry https://registry.npm.taobao.org// 配置后可通过下面方式来验证是否成功npm config get registry    // 或npm info express

这时候你的安装飞起，开心的玩耍吧！！

这里我没有使用beta版，选择的是老版脚手架。

$ npm install -g weex-toolkit

版本号：

$ weex --versioninfo 1.0.1-alpha

初始化并安装依赖：

$ cd demo/$ weex initprompt: Project Name:  (demo) file: .gitignore created.file: README.md created.file: index.html created.file: package.json created.file: src/weex-bootstrap.we created.file: webpack.config.js created.$ lsREADME.md        package.json        webpack.config.jsindex.html        src$ npm install...

三.调试

代码写完了，你会想看到效果吧？所以，坑又来了，这时候又会拦下一批人...

weex-toolkit 为了我们开发提供了4大经常用到的命令：

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

进项目目录后运行 npm run dev 和 npm run serve,开启watch模式和静态服务器。

1.在浏览器中看代码效果。

记住用谷歌浏览器打开http://localhost:8080/index.html查看 weex h5 页面。

Weex Devtools 基于 Chrome devtools 实现了 Chrome Debugging Protocol，能够使用 Chrome devtools 调试 Weex 项目。

可以查看日志，界面元素，还可以断点，监视网络，接口请求等等，太强大了，很方便。没有让一个用惯了xcode 的拥有优秀的调试debug 的ios开发失望。更多调试细节，方法，文档里面很详细，即 。

beta版里面一样操作，只不过beta版页面右侧会多了一个二维码。但不影响调试。（找了一个vue运行的图）

2.Weex 提供了一个 Playground App工具，可以查看类似移动端的效果，， weex-toolkit 里面有一个--qr命令，可以将.we生成一个二维码。

然后用 Playground App扫码就可以看到效果。注意，Playground App扫码必须手机和电脑在同一个网段，局域网，不然扫码不会看到效果！！！也是一坑点，很多人不知道！

vue坑点：

• 目前vue文件是不支持使用--qr生成二维码的。但是 npm run serve后在浏览器里面是有二维码的。

• 既然vue文件不能用--qr生成二维码，那只能去扫浏览器里面的二维码了。那么，问题又来了...
  安装在安卓手机里面的Playground App是可以扫码成功的，但苹果手机是扫码不成功的。对于用Mac开发，用Iphone测试的同学来说确实不友好，据说weex在新版发布时候会修复。

3.weex-toolkit 集成了 Debugger，用debug命令可以调试we文件。

$ weex debug weex-bootstrap.we

我这里第一次运行报错

$ weex debug weex-bootstrap.we building...{ Error: EACCES: permission denied, open '/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-devtool/frontend/weex/weex-bootstrap.js'    at Error (native)  errno: -13,  code: 'EACCES',  syscall: 'open',  path: '/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-devtool/frontend/weex/weex-bootstrap.js' } 'Error: EACCES: permission denied, open \'/usr/local/lib/node_modules/weex-toolkit/node_modules/weex-devtool/frontend/weex/weex-bootstrap.js\'\n    at Error (native)'

权限问题，加上sudo即可：

$ sudo weex debug weex-bootstrap.we Password:building...Build completed!: 335.265msstart debugger server at http://192.168.20.135:8088You can visit we file(s) use http://192.168.20.135:8088/weex/weex-bootstrap.jsAlso you can use Playground App to scan the qrcode on device list page.The websocket address for native is ws://192.168.20.135:8088/debugProxy/nativeLaunching Dev Tools...

成功后会打开新的浏览器，下面会有两个二维码：

分别用Playground App扫码

详细调试方法，可查阅官方文档，还有视屏，可详细了！！

注意，这里就只有vu文件，苹果手机里面的Playground App不能扫码，因此就不能体验debug了，哭！！1

4.除了移动设备里面的Playground App外，浏览器里面的Playground App也是可以用的，

不过很多效果浏览器是看不到的，后面还会涉及到。

综上，我会优先用浏览器打开h5网页来进行初步调试，保证页面正常运行，如果有些效果出不来或者需要查看移动设备的时候，就要用Playground App来扫码查看效果并用debug命令来调试了，甚至还可以集成 Devtools 到 iOS或者安卓。

四.体验

到这里，浏览器里面运行正常了，很多同学想知道怎么分发呢，或者打包出来的jsbundle怎么部署到项目里面呢？
这里我手动集成了Weex到了（原谅我是ios开发..有Mac电脑的同学可以尝试一下，后面介绍到项目实战的时候然后告诉大家怎么打包安卓和ios工程，就可以两端体验了），已运行成功，大家拿来可以直接用，具体如下：

• weex项目打包后，在dist目录下：

老版we

新版vue

把这标记的js文件名称改成index.js，然后替换ios项目bundlejs目录下面的index.js：

打开weexDemo_ios.xcworkspace文件，即可以运行ios项目了，have fun！

五.小结

其实，官方文档还是很详细的，在用到weex过程中还会碰到各种各样的问题，多参考，大家可以去giithub里面提issues，一般都会有回复，还有的文章，都可以参考。

由于时间和篇幅，下一篇我会给大家分享一下怎么搭建一个完整的项目，里面会包含比如常见的tabbar，导航等页面切换，页面跳转传递数据，接口数据请求等，还有大家关心的打包jsbundle，尤其是纯前端和后端不熟悉移动开发的人来说，打包集成安卓和ios还有h5工程。

转载地址：http://omhni.baihongyu.com/