weex项目 图片验证码 点击切换

话不多说，先上图：

图片二维码验证思路：后台给了我们一个固定的url地址，通过这个地址，去请求图片。这个图片在网页端，刷新一下，图片就会不一样，而在weex中 ：我们使用<image>标签的src属性去加载的时候，会出现点击之后并没有任何效果，图片还是原来的图片。初步分析，由于<image>标签中的src最终的加载是在原生中的ImageAdapter中的setImage中 我们自己实现的，那么说明，我们的图片加载库，可能存在缓存问题，经过查看Glide图片库的源码之后，发现在创建的时候，确实有默认的缓存策略，这个时候，需要在原生代码中修改Glide的缓存策略（我这里使用的是Glide图片加载框架）使用：

Glide.with(WXEnvironment.getApplication())        //这个是weexSDK提供给我们的上下文对象

   .load(codeUrl)                                        //图片URL

   .diskCacheStrategy(DiskCacheStrategy.NONE)            //设置缓存策略为磁盘不缓存（禁用磁盘缓存）

   .skipMemoryCache(true)                                                //跳过内存缓存（如果只是设置禁用磁盘缓存，图片依然不能点击切换）

    .into(view);                                                                       //imageview

注意 以上是原生代码，具体的实现位置为ImageAdapter的setImage方法内部。

下面是weex代码：

    <div style="justify-content: center; align-items: center">

        <div style="justify-content: center; align-items: center; width: 400px; height: 300px; background-color: cornflowerblue" @click="loadUlr()">

            <image :src="codeUrl" style="width: 150px; height: 60px">

<script>

    export default {

        data() {

            return {

                // codeUrl:'',

                codeUrl:"http://xxxx.xxxx.com/xxx/xxx/xxxxxx.jpg"

                }

        },

        methods: {

            loadUlr(){

                this.codeUrl ="";

                setTimeout(() => {

                    this.codeUrl ="http://xxxx.xxxx.com/xxx/xxx/xxxxxx.jpg"

                },0); //这个延时必须加，不加就不会触发image刷新。

            }

}

}

</script>

如果以上代码有什么问题，欢迎大家给予指出。