初入weex--微信端实现点击img调用本地相册

随笔：

随着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、以及命名规范这些会在后面的文章中再写）

这里有个小插曲，我在npm run serve的时候报了个错

小插曲.png

查了下，说是端口被占用的问题，那把占用的程序关了就ok了。

单张图片

上面已经提到过了，最下面放img标签（如果ui图没有边框的话可以自己设置个边框），img上放个input标签，设置透明度opacity为 0;

代码如下：

样式的话就不贴了吧；
代码也是简单的就是这么几行（ps：我写的时候就没那么容易了，一开始不知道onchange事件里面如何传递事件，折腾了一会才发现可以用$event），最后的成果如下：

1111.png

一张图的成果.png

如果是只有一张图的话，那这次的任务就勉强完成了，下面说说多张图片的情况。

多张图片（扩展）

解决步骤如下：

• 多张图片如果按单张的写法来写的话，会出现每次进来的时候都判断一遍是哪张图片产生的点击事件，最好是进来以后我就知道是哪个图片而不是需要去判断一次，那自然是用数组了
• 上面的单张图片是input置于img标签上，那这次可以反过来，img置于input标签上，通过点击img事件来调用input的onclick事件

有人会说了为什么要这么花里胡哨的，能用不就好了吗，还反过来。其实我感觉写代码还是得需要多考虑考虑多种方法实现的好。（ps：本来想代码一步一步写然后贴出来的，但是比较懒，哈哈哈就贴成果了）代码如下：

大佬们不要打我，命名这些怎么简单怎么来嘛，嘛简单点。本来是不会出现判断是哪个img进来的，但是由于需要展示通过点击img来触发input的click事件，所以就这样写了。成果如下：

三脸懵逼.png

总结

1. v-bind的数据为数组的时候，只有当数组的长度改变视图才会刷新数据。
2. weex类似js中获取指定控件的时候，可以通过ref来获取，譬如设置 :ref="'pic1'"，在代码中可以通过 this.$refs.pic1 来获取到该控件，这样该控件的点击事件啊，样式之类的应该都能获取到了

weex小白，欢迎大佬指导