weex android 基础与扩展本地图片加载 gif播放自定义module

最新推荐文章于 2021-05-30 21:27:58 发布

五柳--先生

最新推荐文章于 2021-05-30 21:27:58 发布

阅读量2.7k

点赞数 2

分类专栏： weex android 文章标签： weex android

本文链接：https://blog.csdn.net/codingandroid/article/details/77719557

版权

android 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

weex

13 篇文章 0 订阅

订阅专栏

本来计划每天写一个，将 weex html部分写完，因为现在很多使用weex的在android 上面有很多基础问题，所以就还是先把 weex android 基础略做一下介绍
分为几个部分

1 android基础
2 weex 项目结构
3 扩展Imageadapter 实现本地图片加载
4 自定义 android 的 gif 播放组件
5 自定义module 获取android 版本号
6 扩展module
效果图先发上来
效果图中对应的分别是
1：text 中读取了android 的当前版本
2：使用image展示本地gif，没有动画效果
3：使用image展示本地图片
4：使用自定义gifview 展示动画

下面这个看gif效果

首先，很多人是因为没有任何android 知识的，希望基于 weex toolist或者 weexpack 去创建weex 项目，很多人会有基于这个的各种各样的问题，其实都是android 很基础的问题，这里就将weex android 上的基础问题都做一个介绍，本人是非常不建议不懂得任何android 的基础去基于weex的工具链去做android 或者ios 的项目，很多人做一半说weex坑实在太多了，weex创建的项目包名怎么改啊，然后都不说那些热更新怎么配置啊等等的略高级的问题了，可能一个稍微复杂的需求就进行不下去了，这些都是android基础实在薄弱。工具链如果很完善的情况下，我们会建议使用工具链，就想vue的脚手架，很成熟完善了，完全没问题，但是weex 得如果用过的会发现问题还是很多，很多地方还是要手动改的，所以花个一周时间把android ios该了解的都了解一下还是很有必要，毕竟你要写的是一个app，而不是一个网页，避免有些原生功能需要你去写，就束手无策了，例如让写个支付啊，或者写个语音什么就完全蒙逼了

第一：搭建一个 android studio 的开发环境

自行下载安装，不多做介绍
项目基础配置
jdk android 使用的是java语言
android sdk 编译android项目
gradle 打包使用
站桩过程中这几个可以留意一下

第二：创建一个weex 的android项目

https://github.com/weexteam/article/issues/25
weex项目相当于一个android项目引入了weex依赖，但是也可以不完全使用weex，只是把weex作为里面的某一个功能模块

android 引入jar 包有两种方式
源码依赖：能够快速使用WEEX最新功能，可以根据自己项目的特性进行相关改进。
SDK依赖：WEEX 会在jcenter 定期发布稳定版本。
个人建议不熟悉android的可以采用sdk依赖，这个版本相对稳定，但是新特性会少。源码依赖的话可以去改它的源码，如果水平够了可以尝试

不过如果自己实在集成困难，可以参考官方已经集成好的例子

官方参考栗子
https://github.com/xkli/WXSample

下载项目，使用android studio导入，后编译

第三：认识 weex 的android项目

weex 的android 项目其实就是一个普通的android项目引入了 weex 的sdk aar，就可以在这个项目里面使用weex的功能
刚刚导入的项目

android项目的基础项目结构
清单文件简介

android 的清单文件介绍

gradle配置

第四：weex android项目介绍

依赖weex的android源码介绍

weex gradle脚本简单注释版本

apply plugin: 'com.android.application'
android {
    compileSdkVersion 23 // 编译sdk版本
    buildToolsVersion '25.0.0' // 编译工具版本

    defaultConfig {
        applicationId "com.weex.sample" // 应用id 和包名有区别，同样的包名可以有很多不同的applicationid
        minSdkVersion 14  //最小兼容sdk版本号
        targetSdkVersion 23 // 目标sdk版本号 23是一个分水岭，决定是否需要动态请求权限
        versionCode 1  // 应用版本号，每发布一个新版本需要提升一个版本号
        versionName "1.0"// 应用版本号对应的版本名字

        /**
         * 这个是weex 的东西 必须加，否则64位手机无法加载so文件
         */
        ndk {
            abiFilters "x86"
            abiFilters "armeabi"
        }
    }
    buildTypes {
        release {
            //代码编译混淆引入
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

// 依赖包 ，和 node 里面的dependeceies 很像，就是依赖的第三方库，一个是js的，一个是java的
dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:recyclerview-v7:23.4.0'
    compile 'com.android.support:support-v4:23.4.0'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.alibaba:fastjson:1.1.45'

    compile 'com.taobao.android:weex_sdk:0.10.0@aar'// 这里添加了 weex 相关依赖
    compile 'com.android.support:design:23.4.0'
    testCompile 'junit:junit:4.12'

    compile 'com.squareup.picasso:picasso:2.5.2'
}

第五：weex 实现适配器adapter

这个专门拿出来说一下，是因为这块的扩展可以实现我们直接去获取本地的资源图片，这样的话，就可以让我们的代码少请求很多资源，就能快很多
例如，我在我的vue里面访问图片是这么写的

    <image src="../../assets/account.png" style="width:268px;height:200px;"></image>

那么我们在adapter里面就能拿到这个路径，然后我们把这个路径转化成我们本地图片的assets文件的路径并读取出来就ok了（weex里面一个注意点，图片必须标注宽高，否则不能显示）

public class ImageAdapter implements IWXImgLoaderAdapter {
/***
*参数介绍  url 就是我们上面 image 传过来的src  ImageView就是我们图片显示的控件，这个是weex做的事情，我们就暂时只要知道是这么回事就好了，WXImageQuality是显示图片的质量，是否需要压缩。 WXImageStrategy是我们加载图片的一系列动作过程
*/
    @Override
    public void setImage(final String url, final ImageView view, WXImageQuality quality, final WXImageStrategy strategy) {

//android 除去少数个把控件 修改UI一定要在UI线程，否则会出现异常
      WXSDKManager.getInstance().postOnUiThread(new Runnable() {
        @Override
        public void run() {
          if(view==null||view.getLayoutParams()==null){
            return;
          }
          if (TextUtils.isEmpty(url)) {
            view.setImageBitmap(null);
            return;
          }
          //上面这两个异常判断就略过了，简单来说就是你定义了image却没有给宽高，或者没有给src，那么我们就直接return了

          String temp = url;
          //如果我的本地图片是 src="../../assets/account.png" 这个形式的，所以url只要是 /../../assets 这样打头的说明是去读取本地文件的
          if (url.startsWith("/../../assets")) {
          //我们把路径替换为我们android项目中的assets文件路径，android访问assets里面的文件只需要 直接WXEnvironment.getApplication().getAssets().open("文件名");就可以了

            temp = temp.replace("/../../assets/","");
            Log.d("setimage", "temp = " + temp);
            try {
              InputStream is = WXEnvironment.getApplication().getAssets().open(temp);
              view.setImageBitmap(BitmapFactory.decodeStream(is));
            }catch (Exception e){
              e.printStackTrace();
            }
          }else{
          //如果不是以上面格式访问的图片，我们就认为是网络图片了，那下面是我们依赖Picasso 简单实现了网络图片加载，这样写会很灵活，譬如我们通常需要下载中显示一个图片，图片下载失败了显示一个err图片等等
            if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
              return;
            }
            Picasso.with(WXEnvironment.getApplication()).load(url)
                    .placeholder(R.mipmap.icon_stub)//这里是放一个下载中的图片
                    .error(R.mipmap.em_empty_photo)//这里放一个下载失败的图片
                    .into(view);

          }
        }
      },0);
    }

}

一个简单的图片适配器就写好了

第六：weex 扩展自定义组件（android显示gif）

这边举个简单栗子扩展一个 android 的gif组件
是weex的 android扩展中的Component扩展
https://weex.apache.org/cn/references/advanced/extend-to-android.html
首先需要一个自定义的android控件，为了不重复的造轮子而占去大量篇幅，毕竟android自定义控件不是我们本篇的重点，我github上拿了一个现成的

https://github.com/koral–/android-gif-drawable
使用这个gif播放控件

这个控件有了，那么我们要写一个能够给weex的vue使用的控件了，下面是重点

package com.weex.sample.extend.compontent;

import android.content.Context;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.dom.WXDomObject;
import com.taobao.weex.ui.component.WXComponent;
import com.taobao.weex.ui.component.WXComponentProp;
import com.taobao.weex.ui.component.WXVContainer;

import pl.droidsonroids.gif.GifDrawable;
import pl.droidsonroids.gif.GifImageView;

/**
 * Created by neo
 */
public class GifImage extends WXComponent<GifImageView> {

    GifImageView gifview;
    Context context;
    public GifImage(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, boolean isLazy) {
        super(instance, dom, parent, isLazy);
    }

    @Override
    protected GifImageView initComponentHostView(Context context) {
        gifview = new GifImageView(context);
        this.context = context;
        return gifview;
    }

    @WXComponentProp(name = "src")//该注解，则为weex中调用的方法名
    public void setSrc(String src){
        try{
            GifDrawable gifFromAssets = new GifDrawable( context.getAssets(), src);
            gifview.setImageDrawable(gifFromAssets);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}

这样就扩展好一个组件了，不过这样扩展完之后并不能使用，我们需要去注册这个组件，注册可以在activity，也可以在application

package com.weex.sample;

import android.app.Application;
import com.taobao.weex.InitConfig;
import com.taobao.weex.WXSDKEngine;
import com.taobao.weex.common.WXException;
import com.weex.sample.extend.compontent.GifImage;
import com.weex.sample.extend.compontent.RichText;
import com.weex.sample.extend.module.PhoneInfoModule;

/**
 * 注意要在Manifest中启用
 * 参考manifest，否则会抛出ExceptionInInitializerError
 * 要实现ImageAdapter 否则图片不能下载
 * gradle 中一定要添加一些依赖，否则初始化会失败。
 * compile 'com.android.support:recyclerview-v7:23.1.1'
 * compile 'com.android.support:support-v4:23.1.1'
 * compile 'com.android.support:appcompat-v7:23.1.1'
 * compile 'com.alibaba:fastjson:1.1.45'
 */
public class WXApplication extends Application {

  @Override
  public void onCreate() {
    super.onCreate();
    InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
    WXSDKEngine.initialize(this, config);
    try {
      WXSDKEngine.registerModule("poneInfo", PhoneInfoModule.class);
      WXSDKEngine.registerComponent("rich", RichText.class, false);
      WXSDKEngine.registerComponent("gifimage", GifImage.class, false);//注册我们写的gif动图组件
    } catch (WXException e) {
      e.printStackTrace();
    }
  }
}

这样我们就可以在vue里面使用了

    <!-- android 的话用自定义标签 -->
    <gifimage src="loading.gif" style="width:250px;height:500px;margin-left:250px;" ></gifimage>

这样的代码，我们就能看到我们的gif动图了

第七：扩展module

扩展module是什么呢，weex 是一个基于MVVM的框架，组件是view层，那么简单理解一下module是一些提供数据或者方法给vue去调用的一个东西，譬如我要获取一个地理位置信息等等，那么这里我们就去简单写一个获取应用版本号的方法，也正好知道一下我们android的版本号是怎么一回事

写一个module

package com.weex.sample.extend.module;

import android.content.pm.PackageInfo;
import android.content.pm.PackageManager;
import android.os.Build;
import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.bridge.JSCallback;
import com.taobao.weex.common.WXModule;
import java.util.HashMap;
import java.util.Map;

/**
 * Created by neo
 */

public class PhoneInfoModule extends WXModule {

  /***
   * 获取版本号
   * @return
   */
  @JSMethod(uiThread = false)
  public void getVersionName(String value,JSCallback callback)
  {
    String version="";
    try{
      // 获取packagemanager的实例
      PackageManager packageManager =mWXSDKInstance.getContext().getPackageManager();
      // getPackageName()是你当前类的包名，0代表是获取版本信息
      PackageInfo packInfo = packageManager.getPackageInfo(mWXSDKInstance.getContext().getPackageName(),0);
       version = packInfo.versionName;
    }catch (Exception e){
      e.printStackTrace();
    }
    callback.invoke(version);
  }
}

注册module 参考commpontent 在application中的注册了，那里面已经写了这个类的注册了

      WXSDKEngine.registerModule("poneInfo", PhoneInfoModule.class);

然后我们再vue中去使用这个方法

<template>
  <div style="margin:20px;">
    <text>版本号为{{version}}</text>
 </div>
</template>
<style scoped>

</style>
<script>
  export default {
    data(){
      return {
        version:'0.0.0'
      }
    },
    created(){
      const _self = this
      //本来是不需要传递一个 参数给 getVersionName 方法的，由于ios有个蛋疼的问题，如果不传参数就拿不到数据，所以习惯性的给一个空过去
      weex.requireModule('poneInfo').getVersionName('',function(info){
        //info 为版本号信息
        _self.version = info
      });
    }
  }
</script>

这就完成了

下载地址

vue代码很简单，就不上传了，这里贴一下主要代码

<template>
  <div style="margin:20px;">
    <text>版本号为{{version}}</text>
    <!-- 否则用 image-->
    <image src="../../assets/loading.gif" style="width:268px;height:200px;margin-top:50px;"></image>
    <image src="../../assets/account.png" style="width:268px;height:200px;margin-top:50px;"></image>
    <gifimage src="loading.gif" style="width:268px;height:200px;margin-top:50px;" ></gifimage>
 </div>
</template>
<style scoped>

</style>
<script>
  export default {
    data(){
      return {
        version:'0.0.0'
      }
    },
    created(){
      const _self = this
      //本来是不需要传递一个 参数给 getVersionName 方法的，由于ios有个蛋疼的问题，如果不传参数就拿不到数据，所以习惯性的给一个空过去
      weex.requireModule('poneInfo').getVersionName('',function(info){
        //info 为版本号信息
        _self.version = info
      });
    }
  }
</script>