Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用。
Weex 渲染引擎与 DSL 语法层是分开的,Weex 并不强依赖任何特定的前端框架。目前 Vue.js和 Rax,这两个前端框架被广泛应用于 Weex 页面开发,同时 Weex 也对这两个前端框架提供了最完善的支持。
Weex 的另一个主要目标是跟进流行的 Web 开发技术并将其和原生开发的技术结合,实现开发效率和运行性能的高度统一。在开发阶段,一个 Weex 页面就像开发普通网页一样;在运行时,Weex 页面又充分利用了各种操作系统的原生组件和能力
OSX环境
$ sudo chmod -R 777 /usr/local/lib/node_modules/
$ npm i -g weex-toolkit // 安装不要使用sudo执行
$ weex -v // 查看当前weex工具版本
Windows环境
$ npm i -g weex-toolkit
$ weex -v // 查看当前weex工具版本
第一次weex -v 会提示npm源选择,建议选择淘宝镜像,原因大家都知道,weex阿里出品,大厂背书,都是一家产品。
Weex Playground扫码安装
Weex Native 运行时实例 & Weex 文件预览工具
初始化项目
然后初始化 Weex 项目:
$ weex create awesome-project
选择相关选项
// 加入相关目录下cd project
npm start
启动本地 web 服务,在本地电脑中Chrom中打开,浏览器预览渲染效果如下:
编译和运行
默认情况下 weex create 命令并不初始化 iOS 和 Android 项目,你可以通过执行 weex platform add 来添加特定平台的项目。
weex platform add ios
weex platform add android
由于网络环境的不同,安装过程可能需要一些时间,请耐心等待。如果安装失败,请确保自己的网络环境畅通。
为了能在本地机器上打开 Android 和 iOS 项目,你应该配置好客户端的开发环境。对于 iOS,你应该安装并且配置好 Xcode
。对于 Android,你应该安装并且配置好 Android Studio
。当开发环境准备就绪后,运行下面的命令,可以在模拟器或真实设备上启动应用:
weex run ios
weex run android
weex run web
Android端预览
我们先打开我们的Android Studio,启动AVD。把我们在工程项目里的dist/index.js文件内容,复制到Android Studio下的app/assets/dist/index.js中。
保存后,点击工具栏上的⚡(闪电)符号进行更新。就可以预览到原生的真实效果了。没有像浏览器那样自动热更新。
调试
weex-toolkit 还提供了强大的调试功能,只需要执行:
weex debug
这条命令会启动一个调试服务,并且在 Chrome (目前只支持基于 V8 引擎的桌面浏览器) 中打开调试页面。详细用法请参考 weex-toolkit 的文档。
这花费的时间有点长
区别于平时的web开发