require.js+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开发微信上传图片组件

这里的话,我总结了一个使用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

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

2.详情页叫detail-page

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

详情页里的功能有:

接收父组件传过来的参数进行上传图片组件的初始化
点击每张图片右上角的叉叉可以删除图片
点击最后那个小相机图案调用微信”从手机相册中选图接口”,用户可以在自己手机上选图
选完图片后,图片按比例调整尺寸变成如图所示那样的缩略图
点击相应的图片调用微信“预览图片接口”进行图片预览
当图片等于最大图片数时,最后那个小相机图案消失
暴露出两个方法供别的组件调用①上传图片方法(上传到微信服务器并执行上传成功后的回调)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那边就很简单了:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzgfgx.html