require.javascript+vue开发微信上传图片组件

秋天,稻田里的稻谷已经成熟了,一眼看去,好像铺了一地的金子,而农民伯伯们一个接一个到自己的田里捡金子。微风吹过,金色的海洋掀起一层层麦浪。

由于项目是thinkPHP做后端框架,一直以来都是多页面的后端路由,想使用火热的webpack有点无从下手(原谅我太菜,而且推广vue只有我一个人……),没办法,想把vue用起来,唯有在原来的基础上改进。使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件,这样每一个组件就是一个 .vue 文件,哪里用上这个组件就引入进来,维护起来确实很爽。然而一直以来项目用的都是require.js,那又想以这样的形式来组织vue组件,还要加上vue-router和vue-resource,怎么破?这篇文章以开发微信上传图片组件为例子小结一下require.js+vue+vue-router+vue-resource的开发流程。

用require.js组织你的组件 我们会有一个components目录去放我们的各个组件,每个组件有用自己名字命名的文件夹,比如这次的例子album组件,里面就放着这个组件的html、js、css,具体怎样用require.js去加载html和css,大家百度一下把相关插件下载下来即可。于是该组件的js中就可以在define里把相关的依赖都加载进去,最后把组件return出去,别的组件也可以通过define加载这个组件,这也达到了模块化管理组件的目的了。

这里的话,我总结了一个使用require.js写vue组件的模板,使用WebStorm把这个模板加上去,每次写组件的时候打几个字就把模板生成出来,不要太爽啊!(componentName是模板的变量,模板生成出来你填上你的组件名字就可以)

define(["vue","text!../js/lib/components/$componentName$/index.html","css!../js/lib/components/$componentName$/index.css"],function (Vue,Template) {
 // 这里是模块的代码
 var $componentName$ = Vue.extend({
  template : Template,
  props : [],
  data : function() {
   return {

   }
  },
  // 在编译结束和 $el 第一次插入文档之后调用
  ready : function() {

  },
  // 在开始销毁实例时调用。此时实例仍然有功能。
  beforeDestroy : function() {

  },
  methods : {

  },
  events : {

  }
 });
 return $componentName$;
});

总体预览这个例子为了演示完整的流程,我把这个例子做成一个小单页叫show-album,就两个页面: 1.主页叫main-page

2.详情页叫detail-page

详情页里的功能有:

接收父组件传过来的参数进行上传图片组件的初始化 点击每张图片右上角的叉叉可以删除图片 点击最后那个小相机图案调用微信”从手机相册中选图接口”,用户可以在自己手机上选图 选完图片后,图片按比例调整尺寸变成如图所示那样的缩略图 点击相应的图片调用微信“预览图片接口”进行图片预览 当图片等于最大图片数时,最后那个小相机图案消失 暴露出两个方法供别的组件调用①上传图片方法(上传到微信服务器并执行上传成功后的回调)uploadImage ②获取所有图片信息方法,包括初始化相册、删除过的、新增的图片信息getAllImgInfo

OK,介绍完毕,现在正式开始!

一.使用vue-router做路由,搭建show-album.js整个功能叫show-album,所以这个功能的js我们就改名为show-album.js,这个js的结构是这样:

define(["vue","vueResource","vueRouter","vAlbum"],function (Vue,VueResource,VueRouter,Album) {
  // 安装资源模块
  Vue.use(VueResource);
  // 安装路由模块
  Vue.use(VueRouter);
  // jquery在执行post请求时,会设置Content-Type为application/x-www-form-urlencoded,
  // 所以服务器能够正确解析,而使用原生ajax请求时,如果不显示的设置Content-Type,那么默认是text/plain,
  // 这时服务器就不知道怎么解析数据了,所以才只能通过获取原始数据流的方式来进行解析请求数据。
  // 由于vue是使用原生POST,所以要设置一下服务器才能正确解释POST过去的数据
  Vue.http.options.emulateJSON = true;
  //定义mainPage页面
  var mainPage = Vue.extend({
   template : "#main-page-temp"
  })
  //定义detailPage页面
  var detailPage = Vue.extend({
   template : "#detail-page-temp",
   components : {
    'album' : Album
   }
  })
  // 根组件
  var showAlbum = Vue.extend({
   components : {
    'main-page' : mainPage,
    'detail-page' : detailPage
   }
  })
  // 实例化路由
  var router = new VueRouter();
  // 配置路由
  router.map({
   '/main-page' : {
    name : 'mainPage',
    component: mainPage
   },
   //这里使用路由的动态片段
   '/detail-page/:inspection_id/:image_type' : {
    name : 'detailPage',
    component : detailPage
   }
  });
  router.redirect({
   // 重定向任意未匹配路径到 /home
   '*': '/main-page'
  });
  // 启动应用
  // 路由器会创建一个实例,并且挂载到选择符匹配的元素上。
  router.start(showAlbum, '#show-album'); 
});

HTML那边就很简单了:

<template id="main-page-temp">
 <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 id="detail-page-temp">
  <album v-ref:album :img-srcs="initImgSrcs" ></album>
  <button style="width: 100%;margin-top: 20px"
  点击我触发getAllImgInfo方法
  </button>
</template>

<div id="show-ablum">
 <!-- 路由外链 -->
 <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 class="add-img-icon">
  <img src="../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)">

在图片中绑定点击事件,传入该图片的索引,去触发一个方法:

previewImage : function (index) {
 var _albums = this.albums;
 var urls = this.getLocalIds(_albums);
 wx.previewImage({
  current: urls[index], // 当前显示图片的http链接
  urls: urls   // 需要预览的图片http链接列表
});

5.点击每张图片右上角的叉叉可以删除图片 这个在叉上绑定点击事件,这个事件去处理删除图片。

<i class="close-icon" @click="deleteImage($index,album)" v-if="canEdit"></i>

deleteImage方法,由于要记录下用户删除了哪些初始化的图片,所以要在删除时判断一下这张图片是不是初始化时就有的:

deleteImage : function (index,album) {
 // 比较要删除的照片是否在初始化照片里
 for (var i = 0,len = this.oldImagesCache.length;i < len;i ++) {
  if (album.localId === _oldImagesCache[i]) {
   this.deleteImagesList.push(_oldImagesCache[index]);
  }
 }
 this.canEdit && this.albums.$remove(album);
}

6.当图片等于最大图片数时,最后那个小相机图案消失 v-if=”albums.length < 9”

7.暴露出两个方法供别的组件调用①上传图片方法(上传到微信服务器并执行上传成功后的回调)uploadImage ②获取所有图片信息方法,包括初始化相册、删除过的、新增的图片信息getAllImgInfo 怎样暴露方法供别的组件调用,这是个大问题。我也不知道怎样做才是最佳实践,因为做法有多种,比如子组件$dispatch,然后父组件在events里接收一下,但这样好像很麻烦,于是我选择了这样做: 在子组件中使用v-rel:xxx添加该组件索引

<album v-ref:album :img-srcs="initImgSrcs" ></album>

然后在父组件里通过this.$refs.xxx.uploadImage()即可调用子组件暴露出来的方法

本文已被整理到了《JavaScript微信开发技巧汇总》,欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序好代码教程一篇:《微信小程序开发好代码教程》小编为大家精心整理的,希望喜欢。

本文require.javascript+vue开发微信上传图片组件到此结束。站起来,擦干汗水。走下去,生活还要继续。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明