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文件,Weex Playground 
下载安装后点击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月前
|
Java Android开发 C++
Android Studio JNI 使用模板:c/cpp源文件的集成编译,快速上手
本文提供了一个Android Studio中JNI使用的模板,包括创建C/C++源文件、编辑CMakeLists.txt、编写JNI接口代码、配置build.gradle以及编译生成.so库的详细步骤,以帮助开发者快速上手Android平台的JNI开发和编译过程。
201 1
|
5天前
|
Java 程序员 API
Android|集成 slf4j + logback 作为日志框架
做个简单改造,统一 Android APP 和 Java 后端项目打印日志的体验。
22 1
|
2月前
|
图形学 iOS开发 Android开发
从Unity开发到移动平台制胜攻略:全面解析iOS与Android应用发布流程,助你轻松掌握跨平台发布技巧,打造爆款手游不是梦——性能优化、广告集成与内购设置全包含
【8月更文挑战第31天】本书详细介绍了如何在Unity中设置项目以适应移动设备,涵盖性能优化、集成广告及内购功能等关键步骤。通过具体示例和代码片段,指导读者完成iOS和Android应用的打包与发布,确保应用顺利上线并获得成功。无论是性能调整还是平台特定的操作,本书均提供了全面的解决方案。
137 0
|
3月前
|
开发者 算法 虚拟化
惊爆!Uno Platform 调试与性能分析终极攻略,从工具运用到代码优化,带你攻克开发难题成就完美应用
【8月更文挑战第31天】在 Uno Platform 中,调试可通过 Visual Studio 设置断点和逐步执行代码实现,同时浏览器开发者工具有助于 Web 版本调试。性能分析则利用 Visual Studio 的性能分析器检查 CPU 和内存使用情况,还可通过记录时间戳进行简单分析。优化性能涉及代码逻辑优化、资源管理和用户界面简化,综合利用平台提供的工具和技术,确保应用高效稳定运行。
67 0
|
3月前
|
机器学习/深度学习 TensorFlow 算法框架/工具
全面解析TensorFlow Lite:从模型转换到Android应用集成,教你如何在移动设备上轻松部署轻量级机器学习模型,实现高效本地推理
【8月更文挑战第31天】本文通过技术综述介绍了如何使用TensorFlow Lite将机器学习模型部署至移动设备。从创建、训练模型开始,详细演示了模型向TensorFlow Lite格式的转换过程,并指导如何在Android应用中集成该模型以实现预测功能,突显了TensorFlow Lite在资源受限环境中的优势及灵活性。
157 0
|
4月前
|
Serverless 语音技术 开发工具
函数计算操作报错合集之怎么何集成nls tts python sdk
在使用函数计算服务(如阿里云函数计算)时,用户可能会遇到多种错误场景。以下是一些常见的操作报错及其可能的原因和解决方法,包括但不限于:1. 函数部署失败、2. 函数执行超时、3. 资源不足错误、4. 权限与访问错误、5. 依赖问题、6. 网络配置错误、7. 触发器配置错误、8. 日志与监控问题。
|
4月前
|
C++ Windows
FFmpeg开发笔记(三十九)给Visual Studio的C++工程集成FFmpeg
在Windows上使用Visual Studio 2022进行FFmpeg和SDL2集成开发,首先安装FFmpeg至E:\msys64\usr\local\ffmpeg,然后新建C++控制台项目。在项目属性中,添加FFmpeg和SDL2的头文件及库文件目录。接着配置链接器的附加依赖项,包括多个FFmpeg及SDL2的lib文件。在代码中引入FFmpeg的`av_log`函数输出"Hello World",编译并运行,若看到"Hello World",即表示集成成功。详细步骤可参考《FFmpeg开发实战:从零基础到短视频上线》。
126 0
FFmpeg开发笔记(三十九)给Visual Studio的C++工程集成FFmpeg
|
4月前
|
传感器 Python
门禁管理系统工程是一个涉及硬件和软件集成的复杂系统,旨在控制人员的出入,并记录和管理相关数据。
门禁管理系统工程是一个涉及硬件和软件集成的复杂系统,旨在控制人员的出入,并记录和管理相关数据。
|
6月前
|
Android开发 API
顺利通过阿里Android岗面试,已拿offer
顺利通过阿里Android岗面试,已拿offer
顺利通过阿里Android岗面试,已拿offer
|
6月前
|
Android开发
阿里P8大佬亲自讲解,大厂Android面试总结+详细解答
阿里P8大佬亲自讲解,大厂Android面试总结+详细解答
阿里P8大佬亲自讲解,大厂Android面试总结+详细解答