安卓 接入Weex Base64位图片无法显示完美解决办法

最近需求中需要接入Weex 老规矩 先撸一遍文档 很顺利接完 结果官网偏偏没给加载图片的具体方案

添加依赖

     compile 'com.taobao.android:weex_sdk:0.17.0'
     这个有多个版本 建议用新的
     compile 'com.alibaba:fastjson:1.1.46.android'
     compile 'com.android.support:recyclerview-v7:24.1.0'
     compile 'com.android.support:appcompat-v7:24.1.0'
     Weex的底层依赖这三个包 如果没有就添加上  

到这里基本完事 开始初始化 在Applocation中调用

        WXEnvironment.addCustomOptions("appName","TBSample");
        WXSDKEngine.initialize(this,
                new InitConfig.Builder()
                        .setImgAdapter(new ImageAdapter())
                        .build());

这里的ImageAdapter需要自己自定义，并且继承IWXImgLoaderAdapter 并实现其中的方法

加载图片的关键就在这里，网上一大堆重复的代码，比如采用Picasso加载图片，很大一部分没什么用处，因为我们拿到的很可能是Base64位的图片 当然也可以手动Base64转Bitmap ,但是不保证每次都能成功，起码我自己就没成功，看代码

public class ImageAdapter implements IWXImgLoaderAdapter {

  @Override
  public void setImage(final String url, final ImageView view,
                       WXImageQuality quality, 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;
        }
        String temp = url;
        if (url.startsWith("//")) {
          temp = "http:" + url;
        }
        if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
          return;
        }
        Uri uri = Uri.parse(temp);

        ImageDecodeOptions decodeOptions = ImageDecodeOptions.newBuilder()
                .setBackgroundColor(Color.GREEN)
                .build();

        ImageRequest request = ImageRequestBuilder
                .newBuilderWithSource(uri)
                .setImageDecodeOptions(decodeOptions)
                .setAutoRotateEnabled(true)
                .setLocalThumbnailPreviewsEnabled(true)
                .setLowestPermittedRequestLevel(ImageRequest.RequestLevel.FULL_FETCH)
                .setProgressiveRenderingEnabled(false)
                .build();

        if (view instanceof DraweeView) {
          Log.d("FrescoImageAdapter", "load: " + url);
          ControllerListener controllerListener = new BaseControllerListener<ImageInfo>() {
            @Override
            public void onFinalImageSet(
                    String id,
                    @Nullable ImageInfo imageInfo,
                    @Nullable Animatable anim) {
              if (imageInfo == null) {
                return;
              }
              QualityInfo qualityInfo = imageInfo.getQualityInfo();
              FLog.d("Final image received! " +
                              "Size %d x %d",
                      "Quality level %d, good enough: %s, full quality: %s",
                      imageInfo.getWidth(),
                      imageInfo.getHeight(),
                      qualityInfo.getQuality(),
                      qualityInfo.isOfGoodEnoughQuality(),
                      qualityInfo.isOfFullQuality());
            }

            @Override
            public void onIntermediateImageSet(String id, @Nullable ImageInfo imageInfo) {
              FLog.d("", "Intermediate image received");
            }

            @Override
            public void onFailure(String id, Throwable throwable) {
              FLog.e(getClass(), throwable, "Error loading %s", id);
            }
          };
          DraweeController controller = Fresco.newDraweeControllerBuilder()
                  .setAutoPlayAnimations(true)
                  .setControllerListener(controllerListener)
                  .setUri(uri)
                  .setImageRequest(request)
                  .build();
          ((DraweeView) view).setController(controller);

        } else {
          ImagePipeline imagePipeline = Fresco.getImagePipeline();
          DataSource<CloseableReference<CloseableImage>>
                  dataSource = imagePipeline.fetchDecodedImage(request, new Object());
          DataSubscriber dataSubscriber =
                  new BaseDataSubscriber<CloseableReference<CloseableImage>>() {
                    @Override
                    public void onNewResultImpl(DataSource<CloseableReference<CloseableImage>> dataSource) {

                      CloseableReference<CloseableImage> imageReference = dataSource.getResult();
                      if (imageReference != null) {
                        try {
                          // do something with the image
                          Preconditions.checkState(CloseableReference.isValid(imageReference));
                          CloseableImage closeableImage = imageReference.get();
                          if (closeableImage instanceof CloseableStaticBitmap) {
                            CloseableStaticBitmap closeableStaticBitmap = (CloseableStaticBitmap) closeableImage;
                            view.setImageBitmap(closeableStaticBitmap.getUnderlyingBitmap());
                            // boolean hasResult =  null != closeableStaticBitmap.getUnderlyingBitmap();
                          } else {
                            throw new UnsupportedOperationException("Unrecognized image class: " + closeableImage);
                          }
                        } finally {
                          imageReference.close();
                        }
                      }
                    }

                    @Override
                    public void onFailureImpl(DataSource dataSource) {
                    }
                  };

          dataSource.subscribe(dataSubscriber, UiThreadImmediateExecutorService.getInstance());
        }
      }
    }, 0);
  }
}



这里用的 Fresco来加载图片 Picasso默认是不支持加载Base64位的图片的 至于其他的能不能加载可以尝试一下，不过用此方法基本可行。需要添加上这两个依赖

    compile 'com.facebook.fresco:fresco:0.12.0+'
    compile 'com.facebook.fresco:animated-gif:0.12.0'

新建一个类来渲染界面

public class WeexActivity extends AppCompatActivity implements IWXRenderListener{

    @BindView(R.id.WeexGroup)
    RelativeLayout WeexGroup;
    private WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_weex);
        ButterKnife.bind(this);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        mWXSDKInstance.renderByUrl("WXSample","http://dotwe.org/raw/dist/1721a811dc70c3cc3dc25263bb36f2aa.bundle.wx",null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
    }


    @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        WeexGroup.addView(view);
        System.out.println("----------onViewCreated"  + view+"  " + instance);
    }

    @Override
    public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
        System.out.println("----------onRenderSuccess" + width+"   " + height+"  " + instance);
    }

    @Override
    public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
        System.out.println("----------onRefreshSuccess" + width+"   " + height+"  " + instance);
    }

    @Override
    public v`这里写代码片`oid onException(WXSDKInstance instance, String errCode, String msg) {
        System.out.println("----------onException" + msg+"   " + errCode+"  " + instance);
    }
}
我这里用的是加载网络的js  当然也可以加载本地的  具体的细节官网给的很清楚，以及参数等等

xml文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/WeexGroup"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</RelativeLayout>

大概就这么多内容 基本的加载调用就可以了 关于其他错误

这里需要添加
    defaultConfig {
        ndk {
            abiFilters "x86"
            abiFilters "armeabi"
        }
        如果编译不通过 那么
gradle.properties中添加  android.useDeprecatedNdk=true   重新编译即可  到此，坑就填平了。