随笔：
随着weex，rn，flutter等跨平台框架的出现，感觉对移动端的冲击还是蛮大的，但回头想想也是，人也不能总是吃老本执着当下，总归要往前走的。
遇到的问题：
刚写weex，在web上需要点击图片调用相册，同时调用到的照片需要覆盖到img上。很简单的一个问题，奈何是初学者，一开始毫无头绪。放在移动端的话可能还好解决一点，移动端封装个调相册的方法给weex，然后weex再调用下噼噼啪啪一顿操作就完事了（移动端调用相册应该还是挺方便的，毕竟也算是基操了）。但这次是weex打包h5置于微信浏览器上。。。。
哈哈哈嗝.png
谷歌百度找了半天看了看weex的社区，唔。。。罢了。。。感觉还是多看看weex，vue的官网来的靠谱。解决步骤如下：
- 既然是以h5的形式，那么可以考虑下用js的方法。
- 设置input type= file，并设置透明放于img上，这样看起来就像点击img跳出文件选择，当然也可以反过来，img置于input上，这两个方法会在下面的单张跟多张中说到（js我好像只能想到这个方法，还有什么方法的话感谢大佬指导下我）
既然有了思路，那。。。开撸？
开始
首先先新建个项目（如何新建跟vue-router、以及命名规范这些会在后面的文章中再写）
小插曲.png
查了下，说是端口被占用的问题，那把占用的程序关了就ok了。
单张图片
上面已经提到过了，最下面放img标签（如果ui图没有边框的话可以自己设置个边框），img上放个input标签，设置透明度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>
样式的话就不贴了吧；
代码也是简单的就是这么几行（ps：我写的时候就没那么容易了，一开始不知道onchange事件里面如何传递事件，折腾了一会才发现可以用$event），最后的成果如下：
1111.png
一张图的成果.png
如果是只有一张图的话，那这次的任务就勉强完成了，下面说说多张图片的情况。
多张图片（扩展）
解决步骤如下：
- 多张图片如果按单张的写法来写的话，会出现每次进来的时候都判断一遍是哪张图片产生的点击事件，最好是进来以后我就知道是哪个图片而不是需要去判断一次，那自然是用数组了
- 上面的单张图片是input置于img标签上，那这次可以反过来，img置于input标签上，通过点击img事件来调用input的onclick事件
有人会说了为什么要这么花里胡哨的，能用不就好了吗，还反过来。其实我感觉写代码还是得需要多考虑考虑多种方法实现的好。（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
总结
- v-bind的数据为数组的时候，只有当数组的长度改变视图才会刷新数据。
- weex类似js中获取指定控件的时候，可以通过ref来获取，譬如设置
:ref="'pic1'"，在代码中可以通过this.$refs.pic1来获取到该控件，这样该控件的点击事件啊，样式之类的应该都能获取到了
weex小白，欢迎大佬指导
