成都创新互联网站制作重庆分公司

android中weex如何使用

android中weex如何使用,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

站在用户的角度思考问题,与客户深入沟通,找到偃师网站设计与偃师网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站建设、成都网站建设、企业官网、英文网站、手机端网站、网站推广、空间域名、网站空间、企业邮箱。业务覆盖偃师地区。

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启动及界面渲染流程图
初始化过程

android中weex如何使用

初始化过程png


启动调用过程

android中weex如何使用

启动调用过程.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 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. WXSDKInstancerender 方法进行view的创建初始化
5. WXSDKManagercreateInstance
1、将json数据与instanceId添加到renderManager中;
2、使用bridge桥接管理器进行UI绘制;
6. WXBridge 作用:  execJS 调用 so库方法执行JS脚本,进行UI渲染;

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

  1. DSL 语法差异很大,可能 weex 更轻量一些,上手快一些;

  2. Native 性能 weex 还是有一些优势的,包也更小。

看完上述内容,你们掌握android中weex如何使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


新闻名称:android中weex如何使用
URL网址:http://cxhlcq.com/article/jipige.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部