189 8069 5689

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如何使用
文章路径：http://cdxtjz.cn/article/jipige.html

其他资讯