WEEX系列 环境搭建

WEEX系列文章之环境搭建

和一步一起从前端视角聊一聊WEEX

如果你只想试试 weex 的语法写个 hello world 啥的, 在dotWe线编辑器上玩玩就够了。如果你想更深入的学习, 显然是需要搭建本地开发环境的。
本小结内容:安装官方脚手架weex-toolkit、下载Weex Playground、解决浏览器跨域问题。

weex-toolkit

脚手架让我们更专注于业务代码,节约开发环境构建成本,提供一定的灵活。同时呢,在能力没达到一定的水平时候,不建议去乱搞这些东西。但,像webpack这种工具还是需要学习和掌握的。 weex-toolkit对于weex,就相当于create-react-app对react,vue-cli对于vue的地位。

安装 weex-toolkit 的前置条件是安装node > 6。

执行npm install -g weex-toolkit有好多网友不推荐大家使用 cnpm 安装说是有坑,大家视情况而定

顺利的话,使用weex -v检测安装是否成功。

WEEX系列 环境搭建

创建一个 weex 项目

weex create weex-demo

WEEX系列 环境搭建

npm install

  1. 一切顺利的话,再执行 npm start 看看效果。

WEEX系列 环境搭建

如果你已经看到了 hello world,那么恭喜你,你已经掌握了weex 50%的知识。

Weex Playground

既然学习的是原生开发,我们怎能甘心只在浏览器上看效果,但是身为一个 FE 又不太会搞 Android Studio 和 Xcode这些原生的东西,weex 工程师足够给力为我们提供了Playground下载应用然后扫一扫屏幕上的二维码,就是真的原生应用了。这个 playground的原理,可以回顾一下上篇文章中weex原理图。只不过是咱们个人开发机在充当 Server 的角色而已。
使用playground条件 手机和开发机处于同一网段?

前端跨域

一个完整的项目怎能少了网络请求。在浏览器上调试的时候,很可能会遇到跨域的问题,前端可以通过 webpack-dev-server转发一下请求,后端服务是不会出现跨域屏蔽的,跨域只是浏览器的一种保护机制,但是感觉还是有些麻烦,既然是浏览器限制,只要打破限制就可以了。在这里推荐大家使用chrome插件Allow-Control-Allow-Origin: *
准备好上述三个环境后,我们就可以正式进入 weex 的学习之旅了。

NEXT

我的第一个weex demo

欢迎大家指正批评、或留言。

相关推荐