weex 实践：入门爬坑

最新推荐文章于 2025-06-08 09:21:32 发布

转载最新推荐文章于 2025-06-08 09:21:32 发布 · 8.9k 阅读

【Weex点滴知识】专栏收录该内容

11 篇文章

订阅专栏

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

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

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

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

一.前提

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

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

QQ20170216-162403.png

虽然大家已经熟悉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 --version
info 1.0.1-alpha

初始化并安装依赖：

$ cd demo/
$ weex init
prompt: 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.

$ ls
README.md        package.json        webpack.config.js
index.html        src

$ npm install
...

三.调试

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

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

build: 源码打包，生成 JS Bundle
dev: 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 项目。

QQ20170216-172555.png

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

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

67ECC89BB7200880E5FEE137261B2B98.jpg

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

QQ20170216-174859.png

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

vue坑点：

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

QQ20170216-175631.png

既然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.265ms
start debugger server at http://192.168.20.135:8088

You can visit we file(s) use http://192.168.20.135:8088/weex/weex-bootstrap.js
Also 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/native
Launching Dev Tools...

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

QQ20170216-182116.png

分别用Playground App扫码

QQ20170216-182342.png

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

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

4.除了移动设备里面的Playground App外，浏览器里面的Playground App也是可以用的，http://dotwe.org/vue/6911b7a8deb506b0e1fe37a08fd48e8b

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

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

四.体验

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

老版we