weex官网:http://weex.apache.org/cn/guide/
1.开发环境搭建(ubuntu)
1.1 安装 nodejs 和 npm
在 nodejs官网 下载 nodejs 文件
我下载的是 node-v8.9.4-linux-x64.tar.xz 版本
(1)解压文件
tar -xvf node-v8.9.4-linux-x64.tar.xz
(2)软链接文件,将 node 和 npm 设置为全局
sudo ln /home/linpu/tools/node-v8.9.4-linux-x64/bin/node /usr/local/bin/node
sudo ln -s /home/linpu/tools/node-v8.9.4-linux-x64/bin/npm /usr/local/bin/npm
链接完成,nodejs 和 npm 都安装完成了,可以查看对应的版本
(3)使用 npm 来安装 weex-toolkit
可以直接使用 npm 下载:
npm install -g weex-toolkit
也可以考虑使用淘宝的 npm 镜像 cnpm 安装 weex-toolkit (我使用的就是这个)
npm install -g cnpm --registry=https://registry.npm.taobao.org
sudo ln -s /home/linpu/tools/node-v8.9.4-linux-x64/bin/cnpm /usr/local/bin/cnpm
cnpm install -g weex-toolkit
提示:如果提示权限错误(permission error),使用 sudo 关键字进行安装
把 weex 也软链接一下
sudo ln -s /home/linpu/tools/node-v8.9.4-linux-x64/bin/weex /usr/local/bin/weex
weex 到此安装好了,查看版本
2.创建 weex 工程
(1)初始化 TestWeex 工程
在工程目录下,调用 weex create TestWeex
会在当前目录下创建一个 TestWeex 的工程,用 android studio 打开后的大体结构如下:
如果没有 node_modules 目录,需要执行 npm install
(2)编译生成 index.js 文件
先编译 index.vue 文件,会在 dist 目录下生成 index.js文件
npm run dev
npm run serve (如果报错可以加sudo)
3.把生成的 index.js 文件集成到 android 工程中
(1)把 index.js 拷贝到 assets 目录下
(2)导入weex sdk的相关依赖
compile 'com.android.support:recyclerview-v7:26.0.0-alpha1'
compile 'com.android.support:support-v4:26.0.0-alpha1'
compile 'com.taobao.android:weex_sdk:0.17.0@aar'
compile 'com.alibaba:fastjson:1.2.9'
compile 'com.github.bumptech.glide:glide:3.7.0'
(3)初始化工程
/**
* 注意要在Manifest中设置android:name=".WXApplication"
* 要实现ImageAdapter 否则图片不能下载
* gradle 中一定要添加一些依赖,否则初始化会失败。
* compile 'com.android.support:recyclerview-v7:xxx'
* compile 'com.android.support:support-v4:xxx'
* compile 'com.android.support:appcompat-v7:xxx'
* compile 'com.alibaba:fastjson:xxx'
*/
public class WXApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
InitConfig config = new InitConfig.Builder().setImgAdapter(new WeeXImageAdapter()).build();
WXSDKEngine.initialize(this,config);
}
}
public class WeeXImageAdapter implements IWXImgLoaderAdapter {
public WeeXImageAdapter() {
}
@Override
public void setImage(final String url, final ImageView view, WXImageQuality quality, final WXImageStrategy strategy) {
WXSDKManager.getInstance().postOnUiThread(new Runnable() {
@Override
public void run() {
if (view == null || view.getLayoutParams() == null) {
return;
}
if (TextUtils.isEmpty(url)) {
view.setImageBitmap(null);
return;
}
Glide.with(WXEnvironment.getApplication()).load(url).into(view);
if (url.startsWith("file://")) {
return;
}
String temp = url;
if (url.startsWith("//")) {
temp = "http:" + url;
}
Glide.with(WXEnvironment.getApplication()).load(temp).asBitmap().into(new WeeXImageTarget(strategy, url, view));
}
}, 0);
}
private class WeeXImageTarget extends SimpleTarget<Bitmap> {
private WXImageStrategy mWXImageStrategy;
private String mUrl;
private ImageView mImageView;
WeeXImageTarget(WXImageStrategy strategy, String url, ImageView imageView) {
mWXImageStrategy = strategy;
mUrl = url;
mImageView = imageView;
}
@Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
mImageView.setImageBitmap(resource);
if (mWXImageStrategy != null && mWXImageStrategy.getImageListener() != null) {
mWXImageStrategy.getImageListener().onImageFinish(mUrl, mImageView, true, null);
}
}
@Override
public void onLoadFailed(Exception e, Drawable errorDrawable) {
if (mWXImageStrategy != null && mWXImageStrategy.getImageListener() != null) {
mWXImageStrategy.getImageListener().onImageFinish(mUrl, mImageView, false, null);
}
}
}
}
public class MainActivity extends AppCompatActivity {
WXSDKInstance mWXSDKInstance;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWXSDKInstance = new WXSDKInstance(this);
mWXSDKInstance.registerRenderListener(mIWXRenderListener);
mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("index.js", MainActivity.this), null, null, WXRenderStrategy.APPEND_ASYNC);
}
@Override
protected void onStart() {
super.onStart();
if (mWXSDKInstance != null) {
mWXSDKInstance.onActivityStart();
}
}
@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();
}
}
private IWXRenderListener mIWXRenderListener = new IWXRenderListener() {
@Override
public void onViewCreated(WXSDKInstance instance, View view) {
ViewGroup rootView = (ViewGroup) getWindow().getDecorView().findViewById(android.R.id.content);
rootView.addView(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) {
}
};
}
最后运行就能加载出来weex的页面