一. 搭建Weex开发环境 官网http://weex.apache.org/cn/
- node
官网:https://nodejs.org/en/ - 安装weex环境能显示版本说明正常
1
2npm install -g weex-toolkit
weex -v //查看当前weex版本
二 新建Weex项目
- 新建一个本地目录,目录下执行
1
weex create FirstApp //FirstApp 项目名
- 安装项目依赖
1
npm install //一定要执行 否则后续编译失败
- 打开FristApp ,找到start.bat并运行,浏览器显示如下,成功
- 运行到Android设备(知道这种方式就好 有坑, 跳过就行)说明:垃圾Weex官方坑,自己的项目地址都不能用。因为下面的地址打不开(翻墙也不行),Build就死了。。
1
2weex platform add android //添加Android平台
weex run android //运行到Android 设备1
2
3//这是官方的项目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中,这三个是必须要有的一定要更新最新版本,否则可能加载JS失败,垃圾Weex官方坑
1
2
3compile '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' //核心依赖 - 新建application onCreate中初始化记得mainfest配置,记得mainfest配置,记得mainfest配置
1
2
3
4//不想新建ImageAdapter 直接用null也可以
InitConfig config=new InitConfig.Builder().setImgAdapter(null).build();
//InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
WXSDKEngine.initialize(this,config); - MainActivity 参考官方 全部复制即可注意:默认是不会重写setContentView()方法的
1
2//因为核心依赖库是最新的,所以和官方有区别
mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("index.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);//index.js 名字对用assets中的1
2
3
4@Override
public void onViewCreated(WXSDKInstance instance, View view) {
setContentView(view);//一定重写 否则js页面不会加载
} - 添加weex编写的文件
FirstApp 根目录执行命令附加:编译就是将.vue编译成js文件,下面两种方式也可以1
npm run build
成功后生成dist目录,进去复制index.js到Android Studio项目assets中1
2weex index.vue -o . //后面是个英文 . 意思是说存放到当前目录
weex compile index.vue js - Android Studio 运行看效果