weex android 示例
通过官方的示例,可以很简单地建立一个工程,然后添加android项目.接着就可以开始了.配置好gradle.这里的主要问题是在于js已经写好了,vue也写好了.但无法将js运行起来,后面看了别人的东西,才知道,要把编译的dist里的js复制到assets里.app_config.xml里是指定了js的路径,如果你不是脚手架建立的项目,就要自己指定了.
以前一直没理解,加载js有两种方法.一种是编译后复制到assets中,一种是直接下载.
普遍的示例,都是官方的那一些没有讲到重点.
npm run start 启动web查看效果.
weex run android会编译apk,但不同版本可能会有问题,最后的路径改了,运行失败.weex命令作为主要的命令,而非npm.
主要过程:
先来版本号:
-npm 5.8.0
- weexv1.2.8
- weexpack : v1.1.8
- weex-builder : v0.3.12
- weex-previewer : v1.4.4
把npm/cnpm安装好,当然先要安装node.
$npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install -g weex-toolkit
然后安装工具
$ sudo cnpm install -g weex-toolkit
初始化项目
$ weex create awesome-project
进入目录awesome-project安装依赖,否则无法运行
$npm install
$npm run dev & npm run serve 开启 watch 模式和静态服务器,这个不会启动浏览器.
所以用
$npm run start来查看页面.
添加android/ios平台
$weex platform add android
产生的代码,有可能无法运行,所以要修改gradle里面的配置信息.还有生成的application这些东西.比如有些版本会产生HotReloadManager,这里的东西要修改一下
public void onMessage(ResponseBody responseBody) throws IOException {
WXLogUtils.w(TAG, "on message");
if (null != responseBody) {
String message = responseBody.string();
try {
JSONObject rpcMessage = new JSONObject(message);
String method = rpcMessage.optString("method", null);
if (!TextUtils.isEmpty(method)) {
if ("WXReload".equals(method)) {
listener.reload();
} else if ("WXReloadBundle".equals(method)) {
String bundleUrl = rpcMessage.optString("params", null);
if (!TextUtils.isEmpty(bundleUrl)) {
listener.render(bundleUrl);
}
}
}
} catch (JSONException e) {
e.printStackTrace();
}
}
如果你修改了外面的js路径,名称什么的,就要在AppConfig.java里面修改相应的名字.在项目目录下有一个src目录,存放着js代码与vue代码.
整个项目算好了,编译:
$npm run build
运行apk
$weex run android
这个命令,不指编译了vue到js,还把东西复制到了android的assets目录中.
别人的代码,提到最多的一项就是图片下载,所以如果你有这方面的需求,要自定义imageadapter.
下载了项目,结果一直不成功,原来是用了使用 Vuex 和 vue-router,导致编译生成的还是dist路径.
4.2
今天重建了一个工程,就简单多了,用weex初始化项目,升级了一下.然后src的目录就和旧的不一样了.但android还是旧的.官方应该跟上进度.
主要差别是在配置文件上,新版本的工具,配置文件是新的.
npm module也会有大问题,如果出错了,编译失败,只能新建一个正常的目录,然后编译正常,再把内容复制过来.不同平台有差异.配置文件一样,module不同,还是不一样的.
npm有可能是有较大的差异,所以这些版本是要对上的.
官方的示例都有点旧了,生成的gradle还是2.14.1的.现在都5了.
另外,以前是weex_sdk的方式引用,这样也方便修改源码,现在改成maven的方式,引入aar包了.就不同了.有很多示例还是旧的方式,比如还有weex.init(Vue)这样的代码,在入口文件中,现在也修改了.
很多网上传的,都是旧的,对于vue1与vue2还是有区别的.在github上的vuejs-hackernews,就对这两个版本有区分,算是比较正规的示例了.如果网上查了,然后按这步骤也无法运行起示例,就要多看看是不是软件的版本不合适了.
总体来说,这段时间浏览发现,weex的使用偏少,多数是阿里系的app在用.示例多数有点旧.
另外npm管理包针对依赖同一个版本的包,冲突没法处理,yarn就好多了.因为实在不想在另一个地方下载了源码,然后npm install后运行不起来,太蛋疼了.
目前,还未清楚,如何在一个页面到另一个页面,回来不刷新数据,看到还是会执行created方法,整个感觉weex,vue还有vuex,vue-rooter这些学习成本不高,但一开始因为量在这里,你需要了解多方面的知识,会有些不知所措.现在的dsl声明式的编程风格,已经很容易学习了,未来可能就是人人都可以编程了.
flexbox的布局,从以前的html静态页,然后套数据的方式,也和移动开发有些类似了.而且google也出了相应的android版本.
旧的示例中,weex-sdk是要下载的,新的已经放入maven中,你只要配置一下就可以了.
从weex-sdk,可以看到java与native,是如何处理的.工程整体的难度不算大,里面的布局主要是flex,这部分的源码可以看出,是fb来的,只作了一些编译修正.另外的模块,模板,ui实现是阿里作的,底层的通信部分,估计也差不多,都是webkit中的v8引擎.据说rn的list是scrollview实现的,而从这个源码来看,用ListView与RecyclerView实现了各种列表.
上手容易多了,至少不需要各种安装apk才可以看到效果,因为有了web端的实现,而rn,只能用手机或模拟器了,而且入门真的要做更多的事.从社区与文档,示例上看,weex是落后不少了.