Weex系列笔记（一）环境搭建，Hello Weex World

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 工程中

    

     weex官方教程

　 (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的页面

示例demo地址：https://github.com/swustmuzi/TestWeexSdk