Weex Android Studio

一. 搭建Weex开发环境官网http://weex.apache.org/cn/

node
官网:https://nodejs.org/en/
安装weex环境

npm install -g weex-toolkit
weex -v //查看当前weex版本

能显示版本说明正常

二新建Weex项目

 weex create FirstApp  //FirstApp  项目名

安装项目依赖

npm install //一定要执行 否则后续编译失败

打开FristApp ，找到start.bat并运行，浏览器显示如下，成功

image.png
运行到Android设备(知道这种方式就好有坑, 跳过就行)

weex platform add android //添加Android平台
weex run android //运行到Android 设备

说明：垃圾Weex官方坑，自己的项目地址都不能用。因为下面的地址打不开(翻墙也不行),Build就死了。。

//这是官方的项目maven地址，既然打不开还用，尼玛。。。
maven { url "http://mvnrepo.alibaba-inc.com/mvn/repository" }
maven { url "http://mvnrepo.alibaba-inc.com/mvn/snapshots" }

三. 配置Android Studio 新建项目
官方文档：http://weex.apache.org/cn/guide/integrate-to-your-app.html

app build.gradle中，这三个是必须要有的

    compile 'com.android.support:recyclerview-v7:26.1.0'
    compile 'com.alibaba:fastjson:1.1.46.android'
    compile 'com.taobao.android:weex_sdk:0.10.0@aar' //核心依赖

一定要更新最新版本，否则可能加载JS失败，垃圾Weex官方坑

image.png

新建application onCreate中初始化

   //不想新建ImageAdapter 直接用null也可以
   InitConfig config=new InitConfig.Builder().setImgAdapter(null).build();
   //InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
    WXSDKEngine.initialize(this,config);

记得mainfest配置,记得mainfest配置,记得mainfest配置

MainActivity 参考官方全部复制即可

//因为核心依赖库是最新的，所以和官方有区别
 mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("index.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);//index.js 名字对用assets中的

注意：默认是不会重写setContentView()方法的

    @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        setContentView(view);//一定重写 否则js页面不会加载
    }

添加weex编写的文件
FirstApp 根目录执行命令

npm run build

附加：编译就是将.vue编译成js文件，下面两种方式也可以

weex index.vue -o .  //后面是个英文 .  意思是说存放到当前目录
weex compile index.vue js

成功后生成dist目录，进去复制index.js到Android Studio项目assets中

Android Studio 运行看效果

最后编辑于：2017.12.16 15:37:37