Weex 知识梳理(1) - 环境搭建

2019年4月17日 308次阅读来源: 泽毛

一、环境搭建

1.1 搭建工程结构

在WeexApp目录下创建一个新的Android工程，命名为WeexApp，包名为com.demo.lizejun.weexapp，以下是创建的普通工程：

《Weex 知识梳理(1) - 环境搭建》普通工程

1.2 配置开发环境

安装Node.js和npm，到官网安装到最新的Node.js稳定版本，下载地址为 http://nodejs.cn/download/，安装后的Node.js版本为v8.9.3，npm在安装Node.js的时候也会自动安装，其版本号为5.6.0，下载完之后进行链接：

>> sudo ln -s /home/lizejun/Software/node-v8.9.3-linux-x64/bin/node /usr/local/bin/node
>> sudo ln -s /home/lizejun/Software/node-v8.9.3-linux-x64/bin/npm /usr/local/bin/npm

使用下面的命令验证是否安装正常：

《Weex 知识梳理(1) - 环境搭建》 Node.js 和 npm 版本信息

安装weex开发套件，weex-toolkit

>> sudo npm install -g weex-toolkit

执行完这一步之后，在/home/lizejun/Software/node-v8.9.3-linux-x64/bin目录下就会创建weex，之后对命令进行链接：

>> sudo ln -s /home/lizejun/Software/node-v8.9.3-linux-x64/bin/weex /usr/local/bin/weex

通过下面的命令 校验是否安装成功：

>> sudo weex

《Weex 知识梳理(1) - 环境搭建》 sudo weex 结果

1.3 初始化 Weex 工程

在WeexApp目录中执行下面的命令，进行 初始化工程，工程名称为WeexPageFolder

>> sudo weex init WeexPageFolder

之后在WeexPageFolder中会自动创建下面的这些文件：

《Weex 知识梳理(1) - 环境搭建》初始化工程

通过npm进行安装：

>> sudo npm install

之后会多创建出一个node_modules文件夹则表示安装成功：

《Weex 知识梳理(1) - 环境搭建》新增 node_modules 文件夹

1.4 编译 index.js 文件

在WeexPageFolder/src下创建index.vue文件，输入下面的内容：

<template>
  <div>
    <text class="text">{{text}}</text>
  </div>
</template>
<style>
  .text {
    font-size: 50;
  }
</style>
<script>
  export default {
    data () {
      return {
        text: 'Hello World.'
      }
    }
  }
</script>

通过下面的命令可以实时预览效果：

>> npm run dev & npm run serve

保存该文件后，进入到WeexPageFolder根目录下，使用下面的命令编译index.vue，并将编译后的index.js拷贝到app/main/assets下，之后打包到App当中。

>> sudo weex compile src/ ../app/src/main/assets/

也可以使用sudo npm run build命令，运行该命令后将会在WeexPageFolder/dist目录下生成index.js文件，然后将该文件拷贝过去。

最终，在app/src/main/res/assets目录下生成.js文件

《Weex 知识梳理(1) - 环境搭建》生成 index.js 文件

1.5 导入 Weex 的 Android SDK 并运行本地 .js 文件

准备好index.js文件之后，最后一步就是接入Weex的Android SDK，首先修改app/build.gradle文件，添加依赖项目：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support:recyclerview-v7:25.3.1'
    compile 'com.android.support:support-v4:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    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'
    testCompile 'junit:junit:4.12'
}

自定义Application和ImageAdapter：

public class WeexApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        InitConfig config = new InitConfig.Builder().setImgAdapter(new CommentSDKWeeXImageAdapter()).build();
        WXSDKEngine.initialize(this, config);
    }

}

public class CommentSDKWeeXImageAdapter implements IWXImgLoaderAdapter {

    public CommentSDKWeeXImageAdapter() {}

    @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;
                }
                if (url.startsWith("file://")) {
                    Glide.with(WXEnvironment.getApplication()).load(url).into(view);
                    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);
        }

        @Override
        public void onLoadFailed(Exception e, Drawable errorDrawable) {}
    }
}

在主Activity中加载预置的index.js文件：

public class HomeActivity extends AppCompatActivity {

    WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(mIWXRenderListener);
        mWXSDKInstance.render("WXSample",
                WXFileUtils.loadAsset("index.js", this),
                null, null, -1, -1,
                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) {

        }
    };
}

1.6 源码路径

整个工程的源码路径为 https://github.com/imZeJun/WeexApp。

    原文作者：泽毛
    原文地址: https://www.jianshu.com/p/4aaa833dd60e
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网