专栏首页Android开发实战weex for android 系列之引导篇

weex for android 系列之引导篇

Weex 是什么

Weex is a extendable cross-platform solution for dynamic programming and publishing projects. Weex是针对动态编程和发布项目的一个可扩展、跨平台的解决方案。

这是来自Weex Document的介绍。这句话个人感觉还是非常有诱惑力的。为什么?击中移动端开发两个痛点。

  1. 动态编程+发布。Weex能做到随时编程发布到服务端,应用端即时更新。想想以前,应用开发-测试-发布,多么繁琐和耗时的一个流程,万一线上出了bug,那真是痛不欲生,尤其时用户量上百万千万的应用,老板连杀你的心都有。但是有了Weex就不一样了。修复bug,用户都是无感知的(老板也是无感知的,哈哈哈)。
  2. 跨平台。这是移动端无数人向往的和为之努力的事。一处编写,到处运行。Weex支持Android,iOS,Web三大平台,一份代码,三个平台通用。等到有一天,Weex真的发展强大起来,公司成本估计可以节省不少。会不会一个Weex开发人员拿三份工资呢?(估计是我想太多?) github地址:[https://github.com/alibaba/weex(https://github.com/alibaba/weex)

Meet weex

  • Install Weex Playground App to see examples we already written.
  • If you want to write a demo, install weex-toolkit in Node.js 4.0+ and
  • Run weex init to generate & start a simple project in an empty folder.
  • Follow the instructions in the project README.
  • Enjoy it. 安装Playground.apk到手机端,如果你想写一个demo,安装weex-toolkit在Node.js 4.0+环境的基础上,用weex生成并启动一个简单的工程在一个文件夹中。详情请查看README

For android

Prerequisites

  • Install Node.js 4.0+
  • Under project root -- npm install, install project -- ./start
  • Install Android Environment Run playground, In Android Studio
  • Open android/playground
  • In app/java/com.alibaba.weex/IndexActivity, modify CURRENT_IP to your local IP Click (Run button) Add an example

综上所述,首先需要安装node.js4.0+环境。然后安装weex-toolkit工具生成.we文件,使用Playground.apk进行扫一扫安装到手机端进行调试。 也可以使用weex-devtools(android)使用chrome浏览器进行调试 官方中文版本环境搭建及demo运行Weex快速上手教程(Weex Tutorial) weex启动及界面渲染流程图 初始化过程

初始化过程png

启动调用过程

启动调用过程.png

效果果然达到了write once,run everywhere!而且运行效果可以与原声媲美,并且virtual dom的加入更加优化了性能问题,切对native扩展等提供了很好的预留,目前可以采用组件形式与全页形式进行集成。

初始化操作

1. BaseApplication 初始化SDK 引擎 WXSDKEngine.init(this, null, null, new ImageAdapter(), null); WXSDKEngine初始化了三件事:

1、初始化so库文件,渲染逻辑、脚本业务框架等都封装在了这里;

2、初始化initScriptsFramework : 初始化脚本框架;

3、register 操作,初始化weex组件与module; private void renderWX() { Rect outRect = new Rect(); getWindow().getDecorView().getWindowVisibleDisplayFrame(outRect); if (instance != null) { instance.destroy(); instance = null; } instance = new WXSDKInstance(this); instance.registerRenderListener(this); Map<String, Object> options = new HashMap<>(); options.put("bundleUrl", WEEX_INDEX_URL); instance.renderByUrl(TAG, WEEX_INDEX_URL, options, null, ScreenUtil.getDisplayWidth(this), ScreenUtil.getDisplayHeight(this), WXRenderStrategy.APPEND_ASYNC); } 首先看这个方法,可以在activity oncreate中被调用,可以清楚的看到,注册了渲染监听器,以及传入了当前屏幕的宽高及url,可以猜测weex的适配方案采用的是百分比方案。 2. WXSDKInstance renderByUrl 方法内调用了httpadapter进行加载url,并且拼装了user-agent header参数; 3. DefaultWXHttpAdapter 网络处理 其实就是一个封装的简单的网络请求工具类,把请求下来的json数据回调给WXSDKInstance 4. WXSDKInstance render 方法进行view的创建初始化 5. WXSDKManager createInstance 1、将json数据与instanceId添加到renderManager中; 2、使用bridge桥接管理器进行UI绘制; 6. WXBridge 作用: execJS 调用 so库方法执行JS脚本,进行UI渲染;

最后提供与React Native的比较: 挺好的问题:

  1. DSL 语法差异很大,可能 weex 更轻量一些,上手快一些;
  2. Native 性能 weex 还是有一些优势的,包也更小。

weex平台一致化看起来比较牛掰,,,,,

本文分享自微信公众号 - Android历练记(gh_db8538619cdd),作者:SYfarming

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-10-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android So动态加载 优雅实现与原理分析

    开源地址: https://github.com/AnyMarvel/ManPinAPP

    Anymarvel
  • Android So动态加载 优雅实现与原理分析

    开源地址: https://github.com/AnyMarvel/ManPinAPP

    Anymarvel
  • 什么是核心竞争力?!?~*&amp;

    核心竞争力是一个企业(人才,国家或者参与竞争的个体)能够长期获得竞争优势的能力。那么到底什么是核心竞争力??

    Anymarvel
  • Centos 7下 FTP 服务器

    MicrosoftInternetExplorer4 0 2 DocumentNotSpecified 7.8 磅 Normal 0 @font-fac...

    98k
  • uname -a输出内容分析

    ----------------------------------------------------------------------------

    小麦苗DBA宝典
  • Linux内核源码分析 - 系统调用 . 续

    上一篇文章 Linux内核源码分析 - 系统调用 中分析了linux下的系统调用在kernel space层是如何实现的,现在我们来分析下user space层...

    wangyuntao
  • 腾讯 [编程题] 翻转数列

    版权声明:本文为博主-姜兴琪原创文章,未经博主允许不得转载。 https://blog.csdn.net/jxq0816/article/details...

    week
  • 我以为是个正经程序猿,结果是个中二段子精

    年后回来,凭借着在 GitHub 收获 14000 star ,因此收到好多面试内推邀请,抱着检验一下自己水平的想法,于是打算好好准备去面一下大厂。在这个过程中...

    五分钟学算法
  • python pyqt5 QDialog

    QDialog/QMessageBox,QFileDialog,QFontDialog,QInputDialog

    用户5760343
  • 为 hexo 博客添加本地搜索功能

    使用 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:

    好好学java

扫码关注云+社区

领取腾讯云代金券