Weex之路——引路篇

Weex的迭代目前来说已经经过了很多版本，官方的文档已经过时，而且文档本身写的也很简陋，按官方文档很难把APP跑起来。经过多次趟坑后，决定把自己的经历写下来，给当前准备着手Weex开发的人一点参考：

Android Studio版本 3.1
Node.js版本 v8.9.3
Npm版本 5.5.1
JDK版本 1.7
Android SDK Compile Sdk Version 23
Android SDK Build Tools Version 25.0.0
Gradle version 4.1
Android Plugin version 2.3.3

环境安装及配置

JDK、Android SDK的安装及环境变量配置不赘述
Node.js安装：
安装完成后检查
安装 weex-toolkit。

npm install weex-toolkit -g

创建Weex项目

找一个目录作为Weex项目的工作空间（workspace），在命令行执行如下代码，创建weex项目：

weex create awesome-app

项目名就是awesome-app
这里写图片描述

如果有小白不知道命令行执行是什么意思的，看下图：
这里写图片描述

运行Weex项目

在命令行执行：

cd awesome-app
npm install
npm start

上面三个命令的意思分别是：进入awesome-app目录，安装依赖，启动。
所以后续需要运行weex工程，只需要在awesome-app目录下的命令行模式，运行npm start就能启动项目。
如图，我对代码做了一点修改
这里写图片描述
启动完成后会自动在浏览器中打开index界面，效果如下

至此，weex项目在web环境的搭建及运行就完成了。

下面开始Android开发所需的配置。

创建Android项目

怎么将Weex最终做出APP能运行起来最主要的工作就是这里了
Step 1: 在Android Studio中新建一个空白的Android项目，配置包名。我的应用包名是：cn.com.acoe.weexapp.app
Step２: 配置build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    defaultConfig {
        applicationId "cn.com.acoe.weexapp.app"
        minSdkVersion 15
        targetSdkVersion 19
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    buildToolsVersion '25.0.0'
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_7
        targetCompatibility JavaVersion.VERSION_1_7
    }
    productFlavors {
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:recyclerview-v7:23.1.1'
    compile 'com.alibaba:fastjson:1.1.46.android'
    compile 'com.taobao.android:weex_sdk:0.18.0@aar'

    compile 'com.squareup.okhttp:okhttp:2.3.0'
    compile 'com.squareup.okhttp:okhttp-ws:2.3.0'
    compile 'com.squareup.okio:okio:1.0.1'
    compile 'com.github.bumptech.glide:glide:3.7.0'


}

因为示例中有图片的显示，所以除了官方文档给出的例子中依赖的几个包以外，我还引入了glide用于图片加载。okhttp是用来做网络请求的，所以我也引入了相关依赖。

Step 3: 创建图片加载的Adapter

package com.app.weexapp.util;

import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.taobao.weex.adapter.IWXImgLoaderAdapter;
import com.taobao.weex.common.WXImageStrategy;
import com.taobao.weex.dom.WXImageQuality;

public class ImageAdapter implements IWXImgLoaderAdapter {
    @Override
    public void setImage(String url, ImageView imageView, WXImageQuality wxImageQuality, WXImageStrategy wxImageStrategy) {
        Glide.with(imageView.getContext()).load(url).into(imageView);
    }
}

Step 4: 创建Application，每个Android项目都少不了的步骤。

package com.app.weexapp.app;

import android.app.Application;
import android.util.Log;

import com.app.weexapp.util.ImageAdapter;
import com.taobao.weex.InitConfig;
import com.taobao.weex.WXSDKEngine;

/**
 * Application
 * Created by Acoe on 2018/4/4.
 */

public class WeexApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        InitConfig.Builder builder = new InitConfig.Builder();
        builder.setImgAdapter(new ImageAdapter());
        InitConfig config = builder.build();
        WXSDKEngine.initialize(this, config);
        Log.i("Application", "WXSDKEngine.isInitialized: " + WXSDKEngine.isInitialized());
    }
}

Step 5: 创建Activity，来显示weex项目中编写的界面

package com.app.weexapp.ui;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.FrameLayout;

import com.taobao.weex.IWXRenderListener;
import com.taobao.weex.WXSDKEngine;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.common.WXRenderStrategy;
import com.taobao.weex.utils.WXFileUtils;

import cn.com.acoe.weexapp.app.R;


/**
 * Created by Acoe on 2018/4/4.
 */

public class MainActivity extends AppCompatActivity {
    private WXSDKInstance mWXSDKInstance;
    private FrameLayout mContainer;
    private Handler mHandler;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mContainer = (FrameLayout) findViewById(R.id.container);

        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.onActivityCreate();
        mWXSDKInstance.registerRenderListener(new IWXRenderListener() {
            @Override
            public void onViewCreated(WXSDKInstance wxsdkInstance, View view) {
                if (mContainer != null) {
                    mContainer.addView(view);
                }
            }

            @Override
            public void onRenderSuccess(WXSDKInstance wxsdkInstance, int i, int i1) {
            }

            @Override
            public void onRefreshSuccess(WXSDKInstance wxsdkInstance, int i, int i1) {
            }

            @Override
            public void onException(WXSDKInstance wxsdkInstance, String s, String s1) {
            }
        });


        // 在渲染前先要保证WXSDKEngine已经完成了初始化
        if (WXSDKEngine.isInitialized()) {
          startRender();
        } else {
            mHandler = new Handler() {
                @Override
                public void handleMessage(Message msg) {
                    if (msg.what == 0) {
                        Log.i("Main", "WXSDKEngine.isInitialized: " + WXSDKEngine.isInitialized());
                        if (WXSDKEngine.isInitialized()) {
                            startRender();
                        } else {
                            msg = mHandler.obtainMessage(0);
                            mHandler.sendMessageDelayed(msg, 100);
                        }
                    }
                }
            };
            Message msg = mHandler.obtainMessage(0);
            mHandler.sendMessageDelayed(msg, 100);
        }
        Log.i("Main", "onCreate over");

    }

    /**
     * 开始执行渲染
     */
    private void startRender() {
        mWXSDKInstance.render("Main", WXFileUtils.loadAsset("app.js", this),
                null, null, WXRenderStrategy.APPEND_ASYNC);
    }

    @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();
        }
    }
}

布局文件的代码，activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></FrameLayout>

</LinearLayout>

如果有看过其他的weex介绍的文章，或者看过官网的文章，可以发现我的Activity代码有一点不一样的地方，就是在WXSDKInstance.render()执行weex界面渲染之前判断了WXSDKEngine是否有初始化完成。因为我在没有加这个判断及相应的处理之前，weex在浏览器里显示的那个界面一直渲染不出来，但是在debug一步一步找原因的过程中，发现在渲染之前断点多停留一会儿，界面最终就渲染出来了。而且日志中也出现多条JsFramework没有初始化的提示，于是就怀疑是在MainActivity进行界面渲染的时候WXSDKEngine应该还没有初始化成功，导致渲染失败。最终加上了确保WXSDKEngine初始化成功后再进行渲染，解决了问题。这个坑网上真是找不到一丁点资料，weex的相关文章还是太少，有深入了解的人也应该还是不多。

Step 5: AndroidMainfest.xml中配置好Application和Activity

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.com.acoe.weexapp.app">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:name="com.app.weexapp.app.WeexApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">
        <activity
            android:name="com.app.weexapp.ui.MainActivity"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

Step 6: 将weex项目编译成js文件，拷贝到Android工程的assets目录下
在之前创建的awesome-project目录，进入命令行模式，执行weex build android可以在当前目录的dist文件夹中编译出js文件。其实在启动weex项目的时候js文件也会生成好。
拷贝好后（我这里是重命名成了app.js），我的Android主要目录结构如下

这里写图片描述

然后执行运行即可，下面是运行结果。
这里写图片描述

至此从搭建环境到运行，整个流程就结束了。有什么不祥尽的地方敬请留言我会进行补充的。

最终感受

虽然Weex官方提出的“一次编写，处处运行”可以说是做到了，但是原生的工作量确实还是不少。其实如果阿里把Weex专门运营成一个API产品，前景应该还是非常好的，类似于国内DCloud、ACloud做的那样，底层封装好，开发者只关注于前端怎么实现，与底层的交互全是API厂商封装好的那样。但是阿里似乎不太可能有这样子的做法，但是给混合开发开创了一种高体验的途径，这点相信会给很多人带来启示。反正就目前而言，个人觉得不是一个很好的混合开发解决方案，仍然还有很多路要走。

github地址：https://github.com/Acoee/WeexApp.git

参考文档
[1]: 官方手册 http://weex.apache.org/cn/guide/

Weex基于Android Studio从开发环境搭建到运行