weex sdk集成到Android工程一. 阿里Weex框架快速体验与环境搭建

简介: 1. 前言Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。

1. 前言

Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS安卓、YunOS及Web等多端部署。 
对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题。开发者可通过Weex官网申请内测。 
开发者只需要在自己的APP中嵌入Weex的SDK,就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS,可以像发布网页一样轻松部署在服务端,然后在APP中请求执行。

2.环境搭建

1)因为Weex工具链使用Node.js构建,在进行后续步骤前,你需要先安装 Node.js。 
第一步:下载安装文件 
下载地址:官网http://www.nodejs.org/download/ 
这里用的版本是(node-v6.2.0-x64.msi) 
第二步:下载完成之后,双击 node-v6.2.0-x64.msi,开始安装nodejs,默认是安装在C:\Program Files\nodejs下面,一路next完成安装。 
第三步:安装npm相关环境。 
在命令行中切换到nodejs目录 
这里写图片描述 
键入命令:npm install express 回车等待安装express…….. 
键入命令:npm install jade 回车等待安装jade……. 
键入命令:npm install MySQL回车等待安装mysql…….. 
这里写图片描述

2)在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序

npm install -g weex-toolkit
  • 1
  • 1

如图所示: 
这里写图片描述 
在安装结束后,你能通过在命令行窗口执行 weex 命令来检查工具是否安装正确。仅仅输入weex并敲击回车后,你应该看到如下内容显示: 
这里写图片描述 
(请使用 weex –version 命令检查你的weex-toolkit版本是否大于 0.1.0) 
至此,环境已经全部安装完毕。

3.weex快速体验

1)我们先编写一个列表项,命名tech_list.we文件( .we 是Weex推荐的后缀名 ) 

<template>
  <div class="container" >
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
       <text class="title">JavaScript</text>
    </div>
  </div>
</template>

<style>
  .cell{
     margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb {
     width: 200; height: 200; }
  .title {
     text-align: center ; flex: 1; color: grey; font-size: 50; }  
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

2)在命令行中切换工作目录到刚才存储 tech_list.we 所用目录并输入如下命令:

weex tech_list.we
  • 1
  • 1

如图所示: 
这里写图片描述 
成功后,你系统默认浏览器的窗口将自动打开以显示如下内容。 
这里写图片描述

3)现在,让我们来尝试使用Weex Native渲染器来渲染这个文件。打开终端,切换到保存tech_list.we文件的目录,执行:

weex tech_list.we --qr -h {ip or hostname}
  • 1
  • 1

如图所示: 
这里写图片描述 
此二维码用来后面扫描。

4)安装官方demo:playground.apk 
下载apk文件, 
下载安装后点击App中的扫码图标,然后用你的手机摄像头扫描终端中的二维码。一个漂亮的列表将出现在你的手机中。 
这里写图片描述

这里我需要强调,这个列表是完全由native view(不是Webkit)来进行渲染的,相比Webkit渲染的界面,你的App能获得更快的页面加载速度和更少的内存开销。

现在你能尝试变更一些 tech_list.we中的内容,在保存变更内容之后, Weex Playground 将会立即在界面上反映出这些变化,这个特性常被称为 Hot-Reload ,希望能帮助你更方便的进行Weex开发。

5)变化布局 
我们更改tech_list.we的内容

<template>
  <div class="container" >
    <div class="cell">
       <image class="thumb" src="http://t.cn/RGE3AJt"></image>  
       <text class="title">helloWorld</text>
    </div>
  </div>
</template>

<style>
  .cell{
     margin-top:10 ; margin-left:10 ; flex-direction: row; }
  .thumb {
     width: 200; height: 200; }
  .title {
     text-align: center ; flex: 1; color: grey; font-size: 50; }  
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

在命令行中切换工作目录到刚才存储 tech_list.we 所用目录并输入如下命令:

weex tech_list.we
  • 1
  • 1

奇迹出现了,不需要重新部署,只要本地调整,app页面就改变了,更后台部署一样。 
这里写图片描述

4.其他

之前做了一年基于luajava实现的跨平台,性能跟安全问题都解决了,后面看了一样聚划算的luaview,跟他们应该差不多,我的感受是开发效率是个问题,没有可视化布局,不能debug,开发效率低。 
其实跟weex一样,如果有特殊性能要求的地方,就使用原生代码写,然后前端脚本语言调用,思想都是差不多的。

目录
相关文章
|
3月前
|
IDE Java 开发工具
深入探索安卓应用开发:从环境搭建到第一个"Hello, World!"应用
本文将引导读者完成安卓应用开发的初步入门,包括安装必要的开发工具、配置开发环境、创建第一个简单的安卓项目,以及解释其背后的一些基本概念。通过一步步的指导和解释,本文旨在为安卓开发新手提供一个清晰、易懂的起点,帮助读者顺利地迈出安卓开发的第一步。
226 65
|
3月前
|
存储 Oracle Java
深入探索安卓应用开发:从环境搭建到第一个"Hello, World!"
本文旨在为安卓开发初学者提供一个清晰、简洁的入门指南。我们将一步步引导您完成安卓开发环境的搭建,并详细介绍如何创建您的第一个安卓应用程序。通过这篇文章,您不仅能够理解安卓应用开发的基本流程,还能掌握一些实用的技巧和方法,为进一步深入学习打下坚实的基础。
|
4月前
|
JavaScript 前端开发 Java
[Android][Framework]系统jar包,sdk的制作及引用
[Android][Framework]系统jar包,sdk的制作及引用
102 0
|
2月前
|
消息中间件 Java 数据库
新版 Seata 集成 RocketMQ事务消息,越来越 牛X 了!阿里的 Seata , yyds !
这里 借助 Seata 集成 RocketMQ 事务消息的 新功能,介绍一下一个新遇到的面试题:如果如何实现 **强弱一致性 结合**的分布式事务?
新版 Seata 集成 RocketMQ事务消息,越来越 牛X 了!阿里的 Seata , yyds !
|
1月前
|
Java Linux API
Android SDK
【10月更文挑战第21天】
71 1
|
2月前
|
程序员 开发工具 Android开发
Android|使用阿里云推流 SDK 实现双路推流不同画面
本文记录了一种使用没有原生支持多路推流的阿里云推流 Android SDK,实现同时推送两路不同画面的流的方法。
63 7
|
2月前
|
Java 程序员 API
Android|集成 slf4j + logback 作为日志框架
做个简单改造,统一 Android APP 和 Java 后端项目打印日志的体验。
111 1
|
3月前
|
算法 API Apache
Flink CDC:新一代实时数据集成框架
本文源自阿里云实时计算团队 Apache Flink Committer 任庆盛在 Apache Asia CommunityOverCode 2024 的分享,涵盖 Flink CDC 的概念、版本历程、内部实现及社区未来规划。Flink CDC 是一种基于数据库日志的 CDC 技术实现的数据集成框架,能高效完成全量和增量数据的实时同步。自 2020 年以来,Flink CDC 经过多次迭代,已成为功能强大的实时数据集成工具,支持多种数据库和数据湖仓系统。未来将进一步扩展生态并提升稳定性。
646 2
Flink CDC:新一代实时数据集成框架
|
2月前
|
开发框架 监控 搜索推荐
GoFly快速开发框架集成ZincSearch全文搜索引擎 - Elasticsearch轻量级替代为ZincSearch全文搜索引擎
本文介绍了在项目开发中使用ZincSearch作为全文搜索引擎的优势,包括其轻量级、易于安装和使用、资源占用低等特点,以及如何在GoFly快速开发框架中集成和使用ZincSearch,提供了详细的开发文档和实例代码,帮助开发者高效地实现搜索功能。
164 0
|
4月前
|
存储 消息中间件 前端开发
Web2py框架下的神秘力量:如何轻松集成第三方API,让你的应用不再孤单!
【8月更文挑战第31天】在开发现代Web应用时,常需集成第三方服务如支付网关、数据存储等。本文将指导你使用Web2py框架无缝接入第三方API。通过实例演示从注册获取API密钥、创建控制器、发送HTTP请求到处理响应的全过程。利用`requests`库与Web2py的内置功能,轻松实现API交互。文章详细介绍了如何编写RESTful控制器,处理API请求及响应,确保数据安全传输。通过本教程,你将学会如何高效整合第三方服务,拓展应用功能。欢迎留言交流心得与建议。
52 1