与Weex2.x的一次亲密接触(Web和IOS平台上共用一套代码)

2016年4月21日,阿里巴巴在Qcon大会上宣布开源跨平台移动开发工具Weex,Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。

对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点。

weex的特点就是:1套代码多端使用

突出特点:

  • 致力于移动端,充分调度 native 的能力

  • 充分解决或回避性能瓶颈

  • 灵活扩展,多端统一,优雅“降级”到 HTML5

  • 保持较低的开发成本和学习成本

  • 快速迭代,轻量实时发布

  • 融入现有的 native 技术体系

  • 工程化管理和监控等

  • 轻量:体积小巧,语法简单,方便接入和上手

  • 可扩展:业务方可去中心化横向定制组件和功能模块

  • 高性能:高速加载、高速渲染、体验流畅



今天大家就跟我来一次weex的全称体验:

weex 官方网站:https://weex.apache.org/cn/

一、搭建开发环境:

我的系统是MAC系统,以下都是MAC系统上的操作;

1、安装node ,npm,并查看版本号:

brew install node

brew install npm 


与Weex2.x的一次亲密接触(Web和IOS平台上共用一套代码)_第1张图片



2、安装weex-toolkit,并查看版本。

npm install -g weex-toolkit


与Weex2.x的一次亲密接触(Web和IOS平台上共用一套代码)_第2张图片


二、现在开始用weex工具生成一个默认的工程。

1、使用week create hello_week,这样就创建好了一个项目。友情提示一下,安装时候最好不要使用sudo,要不然后面有很多问题。




2、npm install && npm run dev 和 npm run serve 在WEB上会自动打开127.0.0.1:8080

与Weex2.x的一次亲密接触(Web和IOS平台上共用一套代码)_第3张图片

3、编译在IOS上使用,

     weex platform add ios  ----编译ios项目(如果想编译andriod)

     cd platforms ---

     cd ios  ---

     pod install ---进入ios项目,用pod安装程序

     cd ..

     cd ..  -----退回到项目目录


    不知道为什么在我机器上先pod install后,必须把ATSDK-weex删除了重新 pod update一下才可以使用。


与Weex2.x的一次亲密接触(Web和IOS平台上共用一套代码)_第4张图片

4、在ios模拟器中运行

     npm run ios

     然后任意选择一个模拟器

      

与Weex2.x的一次亲密接触(Web和IOS平台上共用一套代码)_第5张图片



最后会自动打开模拟器,运行了!~~

与Weex2.x的一次亲密接触(Web和IOS平台上共用一套代码)_第6张图片


大家可以看到,我使用一套代码,在WEB和IOS都跑成功了,weex还是很强大的。

我机器上没有安卓环境,所以没有版本测试安卓系统,剩下的就留给大家测试吧。

你可能感兴趣的:(Weex,全栈)