介绍
这篇文章主要介绍了如何使用。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组织你的组件
我们会有一个组件目录去放我们的各个组件,每个组件有用自己名字命名的文件夹,比如这次的例子专辑组件,里面就放着这个组件的html、javascript、css,具体怎样用。js去加载html和css,大家百度一下把相关插件下载下来即可。于是该组件的js中就可以在定义里把相关的依赖都加载进去,最后把组件返回出去,别的组件也可以通过定义加载这个组件,这也达到了模块化管理组件的目的了。
这里的话,我总结了一个使用。js写vue组件的模板,使用WebStorm把这个模板加上去,每次写组件的时候打几个字就把模板生成出来,不要太爽啊! (componentName是模板的变量,模板生成出来你填上你的组件名字就可以)
定义([“vue",“文本! . ./js/lib/组件/componentName/index.html"美元,“css ! . ./js/lib/组件/componentName/index.css"美元],function (vue、模板),{
,//这里是模块的代码
,var componentName,美元=,Vue.extend ({
template 才能:模板,
props 才能:[],
data 才能:函数(),{
,,return {
,,}
,,},//,才能在编译结束和,el 美元;第一次插入文档之后调用
ready 才能:函数(),{
,,},//才能,在开始销毁实例时调用。此时实例仍然有功能。
beforeDestroy 才能:函数(),{
,,},
methods 才能:{
,,},
events 才能:{
,,}
,});
,return componentName美元;
}); <强>总体预览这个例子
为了演示完整的流程,我把这个例子做成一个小单页叫show-album,就两个页面:
1。主页叫主页
2。详情页叫细节页面
详情页里的功能有:
接收父组件传过来的参数进行上传图片组件的初始化
点击每张图片右上角的叉叉可以删除图片
点击最后那个小相机图案调用微信”从手机相册中选图接口”,用户可以在自己手机上选图
选完图片后,图片按比例调整尺寸变成如图所示那样的缩略图
点击相应的图片调用微信“预览图片接口”进行图片预览
当图片等于最大图片数时,最后那个小相机图案消失
暴露出两个方法供别的组件调用①上传图片方法(上传到微信服务器并执行上传成功后的回调)uploadImage②获取所有图片信息方法,包括初始化相册,删除过的,新增的图片信息getAllImgInfo
好的,介绍完毕,现在正式开始!
<强>一。使用vue-router做路由,搭建show-album.js
整个功能叫show-album,所以这个功能的js我们就改名为show-album。js,这个js的结构是这样:
定义([“vue",“vueResource",“vueRouter",“vAlbum"], function (Vue、VueResource VueRouter,专辑),{//才能,安装资源模块
Vue.use才能(VueResource);//才能,安装路由模块
Vue.use才能(VueRouter);//才能,jquery在执行帖子请求时,会设置内容类型为应用程序/x-www-form-urlencoded,//才能,所以服务器能够正确解析,而使用原生ajax请求时,如果不显示的设置内容类型,那么默认是文本/平原,//才能,这时服务器就不知道怎么解析数据了,所以才只能通过获取原始数据流的方式来进行解析请求数据。//才能,由于vue是使用原生,所以要设置一下服务器才能正确解释后过去的数据
Vue.http.options.emulateJSON =,才能正确;//才能定义主页页面
var 才能;mainPage =, Vue.extend ({
,,template :,“# main-page-temp"
})才能//才能定义detailPage页面
var 才能;detailPage =, Vue.extend ({
,,template :,“# detail-page-temp"
,,components :, {
,,,& # 39;专辑,专辑:,
,,}
})才能//,才能根组件
var 才能;showAlbum =, Vue.extend ({
,,components :, {
,,,& # 39;main-page& # 39;,:,主页,
,,,& # 39;detail-page& # 39;,: detailPage
,,}
})才能//,才能实例化路由
var 才能;router =, new VueRouter ();//,才能配置路由
router.map({才能
,,& # 39;/main-page& # 39;,:, {
,,,name :, & # 39;主页# 39;
,,,组件:主页
,,},
,,//这里使用路由的动态片段
,,& # 39;/详细信息页面:inspection_id/: image_type& # 39;,:, {
,,,name :, & # 39; detailPage& # 39;
,,,component : detailPage
,,}
,,});
router.redirect({才能//,,,重定向任意未匹配路径到,/home
,,& # 39;* & # 39;:,& # 39;/main-page& # 39;
,,});//,才能启动应用//才能,路由器会创建一个实例,并且挂载到选择符匹配的元素上。
router.start才能(showAlbum, & # 39; # show-album& # 39;),,
});
