隨筆：
隨著weex，rn，flutter等跨平臺(tái)框架的出現(xiàn)，感覺對(duì)移動(dòng)端的沖擊還是蠻大的，但回頭想想也是，人也不能總是吃老本執(zhí)著當(dāng)下，總歸要往前走的。
遇到的問題：
剛寫weex，在web上需要點(diǎn)擊圖片調(diào)用相冊(cè)，同時(shí)調(diào)用到的照片需要覆蓋到img上。很簡(jiǎn)單的一個(gè)問題，奈何是初學(xué)者，一開始毫無(wú)頭緒。放在移動(dòng)端的話可能還好解決一點(diǎn)，移動(dòng)端封裝個(gè)調(diào)相冊(cè)的方法給weex，然后weex再調(diào)用下噼噼啪啪一頓操作就完事了（移動(dòng)端調(diào)用相冊(cè)應(yīng)該還是挺方便的，畢竟也算是基操了）。但這次是weex打包h5置于微信瀏覽器上。。。。
哈哈哈嗝.png
谷歌百度找了半天看了看weex的社區(qū)，唔。。。罷了。。。感覺還是多看看weex，vue的官網(wǎng)來的靠譜。解決步驟如下：
- 既然是以h5的形式，那么可以考慮下用js的方法。
- 設(shè)置input type= file，并設(shè)置透明放于img上，這樣看起來就像點(diǎn)擊img跳出文件選擇，當(dāng)然也可以反過來，img置于input上，這兩個(gè)方法會(huì)在下面的單張跟多張中說到（js我好像只能想到這個(gè)方法，還有什么方法的話感謝大佬指導(dǎo)下我）
既然有了思路，那。。。開擼？
開始
首先先新建個(gè)項(xiàng)目（如何新建跟vue-router、以及命名規(guī)范這些會(huì)在后面的文章中再寫）
小插曲.png
查了下，說是端口被占用的問題，那把占用的程序關(guān)了就ok了。
單張圖片
上面已經(jīng)提到過了，最下面放img標(biāo)簽（如果ui圖沒有邊框的話可以自己設(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í)候就沒那么容易了，一開始不知道onchange事件里面如何傳遞事件，折騰了一會(huì)才發(fā)現(xiàn)可以用$event），最后的成果如下：
1111.png
一張圖的成果.png
如果是只有一張圖的話，那這次的任務(wù)就勉強(qiáng)完成了，下面說說多張圖片的情況。
多張圖片（擴(kuò)展）
解決步驟如下：
- 多張圖片如果按單張的寫法來寫的話，會(huì)出現(xiàn)每次進(jìn)來的時(shí)候都判斷一遍是哪張圖片產(chǎn)生的點(diǎn)擊事件，最好是進(jìn)來以后我就知道是哪個(gè)圖片而不是需要去判斷一次，那自然是用數(shù)組了
- 上面的單張圖片是input置于img標(biāo)簽上，那這次可以反過來，img置于input標(biāo)簽上，通過點(diǎn)擊img事件來調(diào)用input的onclick事件
有人會(huì)說了為什么要這么花里胡哨的，能用不就好了嗎，還反過來。其實(shí)我感覺寫代碼還是得需要多考慮考慮多種方法實(shí)現(xiàn)的好。（ps：本來想代碼一步一步寫然后貼出來的，但是比較懶，哈哈哈就貼成果了）代碼如下：
<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é)
- v-bind的數(shù)據(jù)為數(shù)組的時(shí)候，只有當(dāng)數(shù)組的長(zhǎng)度改變視圖才會(huì)刷新數(shù)據(jù)。
- weex類似js中獲取指定控件的時(shí)候，可以通過ref來獲取，譬如設(shè)置
:ref="'pic1'"，在代碼中可以通過this.$refs.pic1來獲取到該控件，這樣該控件的點(diǎn)擊事件啊，樣式之類的應(yīng)該都能獲取到了
weex小白，歡迎大佬指導(dǎo)
