Weex入门,看这篇就够了

1,253 阅读2分钟

Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用。

Weex 渲染引擎与 DSL 语法层是分开的,Weex 并不强依赖任何特定的前端框架。目前 Vue.jsRax,这两个前端框架被广泛应用于 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 的文档

这花费的时间有点长

image.png

区别于平时的web开发

image.png