查看: 225|回复: 0

[Android教程] Weex基于Android Studio从开发环境搭建到运行

发表于 2018-5-7 08:00:02
Weex之路——引路篇

Weex的迭代目前来说已经经过了很多版本,官方的文档已经过时,而且文档本身写的也很简陋,按官方文档很难把APP跑起来。经过多次趟坑后,决定把自己的经历写下来,给当前准备着手Weex开发的人一点参考:

Android Studio版本 3.1

Node.js版本 v8.9.3

Npm版本 5.5.1

JDK版本 1.7

Android SDK Compile Sdk Version 23

Android SDK Build Tools Version 25.0.0

Gradle version 4.1

Android Plugin version 2.3.3


环境安装及配置

JDK、Android SDK的安装及环境变量配置不赘述

Node.js安装:
安装完成后检查
这里写图片描述

安装 weex-toolkit。

[code]如果有看过其他的weex介绍的文章,或者看过官网的文章,可以发现我的Activity代码有一点不一样的地方,就是在WXSDKInstance.render()执行weex界面渲染之前判断了WXSDKEngine是否有初始化完成。
因为我在没有加这个判断及相应的处理之前,weex在浏览器里显示的那个界面一直渲染不出来,但是在debug一步一步找原因的过程中,发现在渲染之前断点多停留一会儿,界面最终就渲染出来了。
而且日志中也出现多条JsFramework没有初始化的提示,于是就怀疑是在MainActivity进行界面渲染的时候WXSDKEngine应该还没有初始化成功,导致渲染失败。
最终加上了确保WXSDKEngine初始化成功后再进行渲染,解决了问题。
这个坑网上真是找不到一丁点资料,weex的相关文章还是太少,有深入了解的人也应该还是不多。

Step 5

AndroidMainfest.xml中配置好Application和Activity



    

    
        
            
                
                
            
        
    

Step 6

将weex项目编译成js文件,拷贝到Android工程的assets目录下
在之前创建的awesome-project目录,进入命令行模式,执行weex build android可以在当前目录的dist文件夹中编译出js文件。其实在启动weex项目的时候js文件也会生成好。
拷贝好后(我这里是重命名成了app.js),我的Android主要目录结构如下

这里写图片描述

然后执行运行即可,下面是运行结果。
这里写图片描述

至此从搭建环境到运行,整个流程就结束了。有什么不祥尽的地方敬请留言我会进行补充的。

最终感受

虽然Weex官方提出的“一次编写,处处运行”可以说是做到了,但是原生的工作量确实还是不少。其实如果阿里把Weex专门运营成一个API产品,前景应该还是非常好的,类似于国内DCloud、ACloud做的那样,底层封装好,开发者只关注于前端怎么实现,与底层的交互全是API厂商封装好的那样。但是阿里似乎不太可能有这样子的做法,但是给混合开发开创了一种高体验的途径,这点相信会给很多人带来启示。反正就目前而言,个人觉得不是一个很好的混合开发解决方案,仍然还有很多路要走。

github地址:https://github.com/Acoee/WeexApp.git

参考文档
[1]: 官方手册 http://weex.apache.org/cn/guide/

原文出处



回复

使用道具 举报