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组件的模板,使用WebStorm把这个模板加上去,每次写组件的时候打几个字就把模板生成出来,不要太爽啊!(componentName是模板的变量,模板生成出来你填上你的组件名字就可以) }
},// 在编译结束和 $el 第一次插入文档之后调用 ready : function() { },// 在开始销毁实例时调用。此时实例仍然有功能。 },methods : { },events : { } 总体预览这个例子为了演示完整的流程,我把这个例子做成一个小单页叫show-album,就两个页面: 1.主页叫main-page2.详情页叫detail-page 详情页里的功能有: 接收父组件传过来的参数进行上传图片组件的初始化 点击每张图片右上角的叉叉可以删除图片 点击最后那个小相机图案调用微信”从手机相册中选图接口”,用户可以在自己手机上选图 选完图片后,图片按比例调整尺寸变成如图所示那样的缩略图 点击相应的图片调用微信“预览图片接口”进行图片预览 当图片等于最大图片数时,最后那个小相机图案消失 暴露出两个方法供别的组件调用①上传图片方法(上传到微信服务器并执行上传成功后的回调)uploadImage ②获取所有图片信息方法,包括初始化相册、删除过的、新增的图片信息getAllImgInfo OK,介绍完毕,现在正式开始! 一.使用vue-router做路由,搭建show-album.js整个功能叫show-album,所以这个功能的js我们就改名为show-album.js,这个js的结构是这样:<div class="jb51code"> HTML那边就很简单了: <template id="detail-page-temp"> 现在点击主页上的一条记录,就可以跳转到详情页,在详情页后退,就会回到主页了。这样总体结构就完成了。 二.开发微信上传图片组件具体的代码就不罗列出来了,我们就按照上面的组件功能清单,说说每个功能怎样完成 1.接收父组件传过来的参数进行上传图片组件的初始化 首先,子组件中设置好props 然后在父组件中使用子组件时把参数传进去即可 2.点击最后那个小相机图案调用微信”从手机相册中选图接口”,用户可以在自己手机上选图 在小相机图案的html中绑定chooseImage方法@click=”chooseImage” 然后在methods中添加该方法,通过wx.chooseImage请求微信选择图片接口。使用微信js-sdk前需要配置,所以我们在组件的ready时就进行配置即可。 3.选完图片后,图片按比例调整尺寸变成如图所示那样的缩略图 这里要使用到图片预处理,即var img = new Image ();通过实例化一个Image实例去获取原图的尺寸,我们才可以根据这个原图尺寸去计算出相应的等比例缩略图。具体是这样: 特别注意的一个地方:由于每张图片的都有自己的尺寸样式,所以我们要在组件的data选项中添加一个albums的数据作为照片的数据集,里面包含每张照片自己的路径与样式,这样循环渲染每张图片时,才会每张图片对应自己的属性。还有就是,因为相同的图片可以重复上传,所以循环时要加上track-by=”$index” 4.点击相应的图片调用微信“预览图片接口”进行图片预览
在图片中绑定点击事件,传入该图片的索引,去触发一个方法: 5.点击每张图片右上角的叉叉可以删除图片
这个在叉上绑定点击事件,这个事件去处理删除图片。
deleteImage方法,由于要记录下用户删除了哪些初始化的图片,所以要在删除时判断一下这张图片是不是初始化时就有的: 6.当图片等于最大图片数时,最后那个小相机图案消失
7.暴露出两个方法供别的组件调用①上传图片方法(上传到微信服务器并执行上传成功后的回调)uploadImage ②获取所有图片信息方法,包括初始化相册、删除过的、新增的图片信息getAllImgInfo
怎样暴露方法供别的组件调用,这是个大问题。我也不知道怎样做才是最佳实践,因为做法有多种,比如子组件$dispatch,然后父组件在events里接收一下,但这样好像很麻烦,于是我选择了这样做:
在子组件中使用v-rel:xxx添加该组件索引
然后在父组件里通过this.$refs.xxx.uploadImage()即可调用子组件暴露出来的方法 本文已被整理到了《》,欢迎大家学习阅读。 为大家推荐现在关注度比较高的微信小程序教程一篇:小编为大家精心整理的,希望喜欢。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |