<template> <group> <cell v-for="list in lists" title="测试" value="点击" is-link v-link="{'name':'detailPage',params: { 'inspection_id': list.inspection_id,'image_type' : list.image_type }}"> </cell> </group> </template> <template> <album v-ref:album :img-srcs="initImgSrcs" ></album> <button 点击我触发getAllImgInfo方法 </button> </template> <div> <!-- 路由外链 --> <router-view></router-view> </div>
现在点击主页上的一条记录，就可以跳转到详情页，在详情页后退，就会回到主页了。这样总体结构就完成了。
二.开发微信上传图片组件
具体的代码就不罗列出来了，我们就按照上面的组件功能清单，说说每个功能怎样完成
1.接收父组件传过来的参数进行上传图片组件的初始化
首先，子组件中设置好props
props : { //初始化有无照片 imgSrcs : { type : Array, default : [] }, //是否可编辑 默认true canEdit : { type : Boolean, default : true }, //最大上传数 默认9 maxNum : { type : Number, default : 9 }, //上传后的回调 afterUpload : { type : Function } }
然后在父组件中使用子组件时把参数传进去即可
<album v-ref:album :img-srcs="initImgSrcs" :canEdit="true" :afterUpload="afterUploadFunction" > </album>
2.点击最后那个小相机图案调用微信”从手机相册中选图接口”，用户可以在自己手机上选图
在小相机图案的html中绑定chooseImage方法@click=”chooseImage”
<span> <img src="https://www.jb51.net/Public/Home/source/image/camera.png" @click="chooseImage"> </span>
然后在methods中添加该方法，通过wx.chooseImage请求微信选择图片接口。使用微信js-sdk前需要配置，所以我们在组件的ready时就进行配置即可。
ready : function() { //配置微信JS-SDK this.getSignPackage(); }, methods : { chooseImage : function () { var _this = this; wx.chooseImage({ count: _this.maxNum - _this.albums.length, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { var _localIds = res.localIds; //记录新增照片信息 for (var i = 0,len = _localIds.length;i < len;i ++) { _this.newImagesCache.push(_localIds[i]); } //按比例生成缩略图 _this.renderImage(_localIds); } }); } }
3.选完图片后，图片按比例调整尺寸变成如图所示那样的缩略图
这里要使用到图片预处理，即var img = new Image ()；通过实例化一个Image实例去获取原图的尺寸，我们才可以根据这个原图尺寸去计算出相应的等比例缩略图。具体是这样：
var img = new Image(); var $albumSingle = ""; //这里的顺序是先new Image(),然后执行img.src,完了之后图片才算装载完成 //这样最后才会调用onload方法 img.onload = function() { albumsData = { localId : imgSrcs[i], albumSingleStyle : {height : imgWrapWidth + "px"}, //compressImage是压缩图片的方法，将这个图片实例以及图片父元素的宽度传进去来计算。 imgElementStyle : _this.compressImage(img,imgWrapWidth) }; _this.albums.push(albumsData); }; img.src = imgSrcs[i];
特别注意的一个地方：由于每张图片的都有自己的尺寸样式，所以我们要在组件的data选项中添加一个albums的数据作为照片的数据集，里面包含每张照片自己的路径与样式，这样循环渲染每张图片时，才会每张图片对应自己的属性。还有就是，因为相同的图片可以重复上传，所以循环时要加上track-by=”$index”
//每张图片自己的属性 albumsData = { localId : imgSrcs[i], albumSingleStyle : {height : imgWrapWidth + "px"}, //compressImage是压缩图片的方法，将这个图片实例以及图片父元素的宽度传进去来计算。 imgElementStyle : _this.compressImage(img,imgWrapWidth) }; //将每张图片的属性都放到albums数据集里 _this.albums.push(albumsData);
4.点击相应的图片调用微信“预览图片接口”进行图片预览<img @click="previewImage($index)">
在图片中绑定点击事件，传入该图片的索引，去触发一个方法：