我发现好多人竟然在不停地问weex的官方网址 https://weex.apache.org/cn/
什么是weex
引用官方的话
Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。
什么意思
叫他框架有失不妥,如他官方所说这是一个解决方案,他统一了不同终端写一段代码然后在不同终端上运行,有一点点Java的味道,write once run anywhere ,我们知道Java能够在各个平台上运行的原因是java有一个非常牛逼java虚拟机运行,他保证了java程序能够迅速,,鲁棒、安全的运行再各个平台,而,weex,也是如此,我们可以向编写web界面一样先编写we文件, 然后通过转换命令将这个we文件转换成js文件,而每个weex事先在Android,iOS,yunos 的 app中嵌入了js引擎,app启动时,js引擎动态根据js文件生成native控件,来和用户互交
废话少说,下面就进行环境搭建
- 安装nodejs 具体如何安装nodejs请移步官网 https://nodejs.org/en/
安装完成后检测是否安装成功
> $ node -v
v6.3.1
$ npm -v
3.10.3
注意 : npm 是一个 JavaScript 包管理工具，在安装完nodejs, npm 也会被同时安装上 它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区，同样，Weex 也将很多工具发布到社区方便开发者使用。
2 安装 weex 命令
$ npm install -g weex-toolkit
$ weex -v
v1.0.3
weex-builder : v0.2.4
weex-previewer : v1.3.4
检测weex 是否安装成功
$ weex -v
v1.0.4
- weex-builder : v0.2.6
- weex-previewer : v1.3.7
至此weex环境搭建完成
将weex集成到现有的项目中
集成有两种方式
- 源码依赖：能够快速使用WEEX最新功能，可以根据自己项目的特性进行相关改进。
- SDK依赖：WEEX 会在jcenter 定期发布稳定版本。jcenter注:国内可能需要翻墙
tips :我这里配置第一种,为啥,因为对于新手简单啊.
前期准备
已经安装了JDK version>=1.7 并配置了环境变量
已经安装Android SDK 并配置环境变量。
Android SDK version 23 (compileSdkVersion in build.gradle
)
SDK build tools version 23.0.1 (buildToolsVersion in build.gradle
)
Android Support Repository >= 17 (for Android Support Library)
不啰嗦,as新建Android项目 将下面依赖放入app.build中
compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.alibaba:fastjson:1.1.46.android'
compile 'com.taobao.android:weex_sdk:0.11.0@aar'
注意不要乱改版本,目前weex还处于不稳定中,各个版本可能还不兼容,避免出现没必要的bug
代码实现
照葫芦画瓢不要问我为撒,
图片接口实现
<pre>
package com.weex.sample;
import android.widget.ImageView;
import com.taobao.weex.adapter.IWXImgLoaderAdapter;
import com.taobao.weex.common.WXImageStrategy;
import com.taobao.weex.dom.WXImageQuality;
/**
- Created by lixinke on 16/6/1.
*/
public class ImageAdapter implements IWXImgLoaderAdapter {
@Override
public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
//实现你自己的图片下载，否则图片无法显示。
}
}
</pre>
初始化Application
<pre> package com.weex.sample;
import android.app.Application;
import com.taobao.weex.InitConfig;
import com.taobao.weex.WXSDKEngine;
/**
- 注意要在Manifest中设置android:name=".WXApplication"
- 要实现ImageAdapter 否则图片不能下载
- gradle 中一定要添加一些依赖，否则初始化会失败。
- compile 'com.android.support:recyclerview-v7:23.1.1'
- compile 'com.android.support:support-v4:23.1.1'
- compile 'com.android.support:appcompat-v7:23.1.1'
- compile 'com.alibaba:fastjson:1.1.45'
*/
public class WXApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
WXSDKEngine.initialize(this,config);
}
}
</pre>
注意不要忘了配置manifast文件Application节点的name属性
开干第一个weex界面
<pre> package com.weex.sample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.taobao.weex.IWXRenderListener;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.common.WXRenderStrategy;
import com.taobao.weex.utils.WXFileUtils;
public class MainActivity extends AppCompatActivity implements IWXRenderListener {
WXSDKInstance mWXSDKInstance;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWXSDKInstance = new WXSDKInstance(this);
mWXSDKInstance.registerRenderListener(this);
/**
* WXSample 可以替换成自定义的字符串，针对埋点有效。
* template 是.we transform 后的 js文件。
* option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
* jsonInitData 可以为空。
* width 为-1 默认全屏，可以自己定制。
* height =-1 默认全屏，可以自己定制。
*/
mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("hello.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
}
@Override
public void onViewCreated(WXSDKInstance instance, View view) {
setContentView(view);
}
@Override
public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
}
@Override
public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
}
@Override
public void onException(WXSDKInstance instance, String errCode, String msg) {
}
@Override
protected void onResume() {
super.onResume();
if(mWXSDKInstance!=null){
mWXSDKInstance.onActivityResume();
}
}
@Override
protected void onPause() {
super.onPause();
if(mWXSDKInstance!=null){
mWXSDKInstance.onActivityPause();
}
}
@Override
protected void onStop() {
super.onStop();
if(mWXSDKInstance!=null){
mWXSDKInstance.onActivityStop();
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if(mWXSDKInstance!=null){
mWXSDKInstance.onActivityDestroy();
}
}
}
</pre>
附上我集成好的一个app demo
https://github.com/meijingkang/WeexTest.git
为了更加快速的入门(其实你已经入门了) 算了,为了你更快速的开干,我继续吐槽点东西
安装plugin
进入Androidstudio->setting->plugin 搜索weex 安装重启as
建立自己的界面
点项目的asset目录(如果没有就先新建asset目录)new新建we文件,文件名字随便起我这里起名hello.we
拷贝控件,
<pre>
<template>
<div>
<div>
<text>cover</text>
<image resize="cover" class="cover" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></image>
</div>
<div>
<text>contain</text>
<image resize="contain" class="contain" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></image>
</div>
</div>
</template>
<style>
.cover {
width:750px;
height:500px;
border-width: 2px;
border-style: solid;
border-color: #ff0000;
}
.contain {
width:750px;
height:500px;
border-width: 2px;
border-style: solid;
border-color: #ff0000;
}
</style>
<script>
</script>
</pre>
进入as的terminal面板
cd app/src/main/assets 目录
weex compile hello.we hello.js
ls
解释下compile命令,这个命令的意思是将hello.we文件转为hello.js文件(app内置的js引擎只能解析js文件)
你会看到路径下多了个js文件,这个文件就是weex生成的供js引擎解析的文件,我们将这个文件配置到这,将c.js替换为你刚才生成的那个js文件
QQ截图20170410110249.png
ok此时全部工作昨晚,你可以预览你自己搭建的界面
关于文件的内容解释我们下一篇博客介绍
网友评论