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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏申龙斌的程序人生

零基础学编程019:生成群文章目录

在2016年10月底,我建立了“分享与成长群”,每人在每月都要输出一篇原创文章,一开始人数不多,汇总成PDF的工作量并不大,但现在人数已经超过70人了,该写个程...

2966
来自专栏FreeBuf

更适合作为主系统使用的Parrot Security简介

Parrot 是一个基于Debian的专注于渗透测试和隐私保护的Linux发行版,但是更加方便日常使用,有贴心的使用体验,丰富的工具,更注重隐私保护。 The...

8845
来自专栏WeTest质量开放平台团队的专栏

QQ空间掉帧率优化实战

作者:邓荣欣, 腾讯移动客户端开发工程师

3380
来自专栏企鹅号快讯

黑客游戏 Owasp juice shop(三)

0x01 前言 继续上一篇的内容,往下闯关。想了解如何搭建的同学可参考第一篇文章。 看第一篇:黑客游戏 Owasp juice shop (一) 0x02 玩耍...

42714
来自专栏娱乐心理测试

几款特好用图片工具

做项目测试时,需要小程序码的图片,在官网中只能下载图片,保存本地,可我需要的是网络图片,百度喽!

2612
来自专栏轮子工厂

这些超实用的电脑快捷键,你都get到了吗?

不知道小伙伴们经常是不是看到一些电脑操作大神,在键盘上“啪啪啪”敲两下就能解决很多事情,既高效又帅气。

692
来自专栏肖洒的博客

【python】【Djang】GPS/北斗串口数据实时定位百度地图

本项目为从串口读取GPS/北斗设备接收数据,进行处理后使用百度地图api实时显示定位。

1.1K2
来自专栏假装我会写代码

laravel5.5 中读写分离需要注意的一个小问题

1303
来自专栏FreeBuf

跨平台版中国菜刀Cknife发布

Burp已经成了绿帽子门必不可少的工具,相信大家都装有Java环境,本软件支持1.7+以及所有安装了环境的系统。1.6后续会考虑兼容。 一直都有想写一款真正...

7087
来自专栏知晓程序

腾讯出品!这个免费网盘小程序,让你快速「找私货」| 亲儿子 #17

在 2017 年 1 月 16 日前,腾讯微云为每个帐号分配了非常大的网盘容量,很多人都用它来当照片、文件等的「仓库」。

1960

扫码关注云+社区

领取腾讯云代金券