由于项目是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-pressImage(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微信开发技巧汇总》，欢迎大家学习阅读。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。