weex入门

1.简介

• weex平台通过编译.we或者.vue文件，生成js脚本文件，使得各个平台可以引入weex包渲染js脚本，达到和React-Native混合开发的目的。

2.环境搭建

• 安装nodejs 具体如何安装nodejs请移步官网 https://nodejs.org/en/
  安装完成后检测是否安装成功
  命令终端：node -v
• 安装 weex 工具
  npm install -g weex-toolkit --registry=https://registry.npm.taobao.org
  命令终端：weex -v

3.将weex集成到Android项目

• 导入weex依赖
  implementation ‘com.android.support:recyclerview-v7:23.1.1’
  implementation ‘com.android.support:support-v4:23.1.1’
  implementation ‘com.android.support:appcompat-v7:23.1.1’
  implementation ‘com.alibaba:fastjson:1.1.46.android’
  implementation ‘com.taobao.android:weex_sdk:0.11.0@aar’
  注：
  已经安装了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)
• 代码实现

public class WXApplication extends Application
{

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

public class ImageAdapter implements IWXImgLoaderAdapter
{
  @Override
  public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
    //实现你自己的图片下载，否则图片无法显示。
  }
}

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.loadAsset("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();
    }
  }
}

• 建立自己的界面hello.vue

<template>
  <div style="justify-content:center;">
    <text class="freestyle">Yo</text>
  </div>
</template>

<style scoped>
  .freestyle {
    color: #41B883;
    text-align: center;
    font-size: 233px;
  }
</style>

此时，需要将hello.vue用weex工具编译成hello.js文件：

• 在MainActivity中通过weex工具类加载生产的hello.js文件
  WXFileUtils.loadAsset(“hello.js”, this)

• 结果