隨筆：

隨著weex筐钟，rn潘拱，flutter等跨平臺(tái)框架的出現(xiàn)疹鳄，感覺對(duì)移動(dòng)端的沖擊還是蠻大的，但回頭想想也是芦岂，人也不能總是吃老本執(zhí)著當(dāng)下瘪弓，總歸要往前走的。

遇到的問(wèn)題：

哈哈哈嗝.png

谷歌百度找了半天看了看weex的社區(qū)继找，唔。逃沿。婴渡。罷了。凯亮。边臼。感覺還是多看看weex，vue的官網(wǎng)來(lái)的靠譜假消。解決步驟如下：

• 既然是以h5的形式柠并，那么可以考慮下用js的方法。
• 設(shè)置input type= file富拗，并設(shè)置透明放于img上臼予，這樣看起來(lái)就像點(diǎn)擊img跳出文件選擇，當(dāng)然也可以反過(guò)來(lái)啃沪，img置于input上粘拾，這兩個(gè)方法會(huì)在下面的單張跟多張中說(shuō)到（js我好像只能想到這個(gè)方法，還有什么方法的話感謝大佬指導(dǎo)下我）

既然有了思路谅阿，那半哟。。签餐。開擼寓涨？

開始

首先先新建個(gè)項(xiàng)目（如何新建跟vue-router、以及命名規(guī)范這些會(huì)在后面的文章中再寫）

小插曲.png

查了下戒良，說(shuō)是端口被占用的問(wèn)題，那把占用的程序關(guān)了就ok了冠摄。

單張圖片

上面已經(jīng)提到過(guò)了糯崎，最下面放img標(biāo)簽（如果ui圖沒(méi)有邊框的話可以自己設(shè)置個(gè)邊框）几缭，img上放個(gè)input標(biāo)簽，設(shè)置透明度opacity為 0;

代碼如下：

<template>
    <div class="pic">
        <div class="photo">
            <img alt="" class="photos" :src="pic" >
            <input type="file" accept="image/*"
                   @change="initPic($event)" />
        </div>
    </div>
</template>

<script>
    export default {
        name: "weex",
        data:()=>({
            pic:"https://upload-images.jianshu.io/upload_images/16290169-0cb4fa6f7cdb1e71.jpg" +
                "?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
        }),
        methods:{
            initPic(e) {
                console.log(e);
                this.FileReader(e.target.files[0]);
            },
            FileReader(file) {
                let _this = this;
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (a) {
                    _this.pic = a.target.result;
                }
            },
        }
    }
</script>

樣式的話就不貼了吧沃呢；
代碼也是簡(jiǎn)單的就是這么幾行（ps：我寫的時(shí)候就沒(méi)那么容易了年栓，一開始不知道onchange事件里面如何傳遞事件，折騰了一會(huì)才發(fā)現(xiàn)可以用$event）薄霜，最后的成果如下：

1111.png

一張圖的成果.png

如果是只有一張圖的話某抓，那這次的任務(wù)就勉強(qiáng)完成了，下面說(shuō)說(shuō)多張圖片的情況惰瓜。

多張圖片（擴(kuò)展）

解決步驟如下：

• 多張圖片如果按單張的寫法來(lái)寫的話否副，會(huì)出現(xiàn)每次進(jìn)來(lái)的時(shí)候都判斷一遍是哪張圖片產(chǎn)生的點(diǎn)擊事件，最好是進(jìn)來(lái)以后我就知道是哪個(gè)圖片而不是需要去判斷一次崎坊，那自然是用數(shù)組了
• 上面的單張圖片是input置于img標(biāo)簽上备禀，那這次可以反過(guò)來(lái)，img置于input標(biāo)簽上奈揍，通過(guò)點(diǎn)擊img事件來(lái)調(diào)用input的onclick事件

有人會(huì)說(shuō)了為什么要這么花里胡哨的曲尸，能用不就好了嗎，還反過(guò)來(lái)打月。其實(shí)我感覺寫代碼還是得需要多考慮考慮多種方法實(shí)現(xiàn)的好队腐。（ps：本來(lái)想代碼一步一步寫然后貼出來(lái)的蚕捉，但是比較懶奏篙，哈哈哈就貼成果了）代碼如下：

<template>
    <div class="pic">
        <div class="photo">
            <input type="file" accept="image/*"
                   @change="initPic($event,0)" :ref="'pic1'"/>
            <img alt="" class="photos" :src="pic[0]" @click="clicks('pic1')">

        </div>
        <div class="photo">
            <input type="file" accept="image/*" v-if="(pic[0].split(splitValue).length)===1"
                   @change="initPic($event,1)" :ref="'pic2'"/>
            <img alt="" class="photos" :src="pic[1]"
                 v-if="(pic[0].split(splitValue).length)===1" @click="clicks('pic2')">

        </div>
        <div class="photo">
            <input type="file" accept="image/*" v-if="(pic[1].split(splitValue).length)===1"
                   @change="initPic($event,2)" :ref="'pic3'"/>
            <img alt="" class="photos" :src="pic[2]"
                 v-if="(pic[1].split(splitValue).length)===1" @click="clicks('pic3')">

        </div>
    </div>
</template>

<script>
    export default {
        name: "weex",
        data: () => ({
            pic: ["https://upload-images.jianshu.io/upload_images/16290169-0cb4fa6f7cdb1e71.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
                "https://upload-images.jianshu.io/upload_images/16290169-0cb4fa6f7cdb1e71.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
                "https://upload-images.jianshu.io/upload_images/16290169-0cb4fa6f7cdb1e71.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"],
            splitValue: "jianshu"
        }),
        methods: {
            clicks(e){
                if(e==="pic1"){
                    this.$refs.pic1.$el.click();
                }else if(e==="pic2"){
                    this.$refs.pic2.$el.click();
                }else if(e==="pic3"){
                    this.$refs.pic3.$el.click();
                }
            },
            initPic(e, index) {

                this.FileReader(e.target.files[0], index);
            },
            FileReader(file, index) {
                let _this = this;
                this.file = file;
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (a) {
                    _this.pic[index] = a.target.result;
                    _this.pic.push("");
                    _this.pic.splice(_this.pic.length-1,1);

                }
            }
        }
    }
</script>

三臉懵逼.png

總結(jié)

1. v-bind的數(shù)據(jù)為數(shù)組的時(shí)候，只有當(dāng)數(shù)組的長(zhǎng)度改變視圖才會(huì)刷新數(shù)據(jù)应民。
2. weex類似js中獲取指定控件的時(shí)候话原，可以通過(guò)ref來(lái)獲取，譬如設(shè)置 :ref="'pic1'"诲锹，在代碼中可以通過(guò) this.$refs.pic1 來(lái)獲取到該控件繁仁，這樣該控件的點(diǎn)擊事件啊，樣式之類的應(yīng)該都能獲取到了

weex小白归园，歡迎大佬指導(dǎo)