原创

移动跨平台Weex入门

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://xiangzhihong.blog.csdn.net/article/details/80368111

Weex 是一个动态化的高扩展跨平台解决方案,也就是说开发人员只需要写一份代码就可以同时在移动端(Android端、iOS端)、Web端运行,这有别于React Native,从技术实现上也略有区别。

下面是一张Weex的整体架构图。
这里写图片描述

从这张图我们可以发现,Weex 表面上是一个客户端技术,但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。

具体来说,开发者首先可以在本地像撰写web页面一样撰写一个 app 的页面(Weex File),然后编译成一段 JavaScript 代码(transformer),形成 Weex 的一个 JS bundle;在云端,开发者可以把生成的 JS bundle 部署上去(deploy),然后通过网络请求或预下发的方式传递到用户的移动应用客户端(Serve->JS FrameWork);在移动应用客户端里,WeexSDK 会准备好一个 JavaScript 引擎(JSCore、V8),并且在用户打开一个 Weex 页面时执行相应的 JS bundle,并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践(callJs、callNative);

说了这么多,其实Weex的运作流程可以使用下面的原理来描述:
这里写图片描述

快速入门

环境搭建

因为Weex工具链使用Node.js构建,在进行项目开发前,需要先安装 Node.js,Weex需要Node 4.0以上的环境,然后使用命令安装Node。安装的命令如下:

brew install node

也可以到Node官网下载,下载的的时候注意选择Recommend版本。安装完成之后,可以使用命令“node -v”来查看版本。
Node安装完成之后,安装weex-toolkit开发套件,安装的命令如下:

npm install weex-toolkit -g

安装完成之后,可以使用命令“weex”来验证weex是否安装正确。
这里写图片描述

到此,就可以开发weex的编程之旅了,接下来使用“weex create”命令创建一个空的模板项目。例如:

weex create awesome-app

然后,进入刚刚创建的文件夹并且执行如下安装依赖。

cd awesome-app
npm install
npm start

然后,你就可以打开 http://localhost:8081 查看页面在 Web 下的渲染效果,也可以使用手机扫描来体验。
这里写图片描述

当然,我们也可以使用IDE工具(如WebStrom)的方式来管理项目。

编译与运行

默认情况下使用“weex create”命令来创建weex项目,并不初始化 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

新建后的项目的目录结构如下:
这里写图片描述

调试

weex-toolkit 还提供了强大的调试功能,只需要执行如下命令即可开启调试功能。

weex debug

注意:目前调试命令只支持在基于 V8 引擎的桌面浏览器中打开调试页面(如Chrome)。

关于更加详细的引导介绍可以参考Weex官网

需要注意的是,运行Weex需要使用Weex Playground App工具扫描。

WebStrom简介

WebStrom是前端开发的利器,使用WebStrom开发weex的,首先新建一个空的项目。例如:
这里写图片描述
然后,再新建一个.we文件。
这里写图片描述

为了方便可以参考阿里playground中的例子源码,我们把playground源码中的examples文件夹也拷贝到项目中。playground的源码下载链接为:incubator-weex

文章最后发布于: 2018-05-18 18:23:19
展开阅读全文
0 个人打赏

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览