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

由于项目的后端框架是thinkPHP，一直是多页的后端路由，所以用热门的webpack有点不可能(原谅我太好了，只有我一个人推广vue.)，所以没办法。我想用vue，但是在原来的基础上做了改进。使用webpack的最大优点是可以使用像。vue来编写vue组件，这样每个组件就是一个. vue文件，在你使用它的任何地方都会引入，维护起来真的很酷。但是项目一直用的是require.js，所以我想以这种形式来组织vue组件，并添加vue-router和vue-resource。怎么破？本文以微信图片上传组件的开发为例，总结了require . jsvuevue-router vue-resource的开发过程。

用require.js组织您的组件。我们将有一个组件目录来放置我们的组件。每个组件都有一个以自己的名字命名的文件夹。例如，在这个例子中，相册组件，有html，js和css的这个组件。如何使用require.js加载html和css？你可以下载一次相关的插件。因此，这个组件的js可以加载define中所有相关的依赖项，最后返回组件。其他组件也可以通过define加载这个组件，也达到了组件模块化管理的目的。

在这里，我总结了一个使用require.js编写vue组件的模板，使用WebStorm添加这个模板，并在每次编写组件时通过键入几个字来生成模板。别太酷了！(组件名是模板的一个变量，生成模板时可以填写组件名。)

define(['vue '，' text！/js/lib/components/$ component name $/index . html '，' css！/js/lib/components/此时，实例仍在运行。beforeDestroy :函数(){ }，方法： { }，事件： { })；返回$ componentName $});这个例子的整体预览为了演示完整的过程，我将这个例子制作成一个名为show-相册的小单页，它有两页：1。主页被称为主页

2.详细页称为详细页

详细信息页面中的功能包括：

接收从父组件传输的参数以初始化上传图片组件。点击每张图片右上角的十字删除图片。点击最后一个小摄像头图案，调用微信“手机相册选图界面”。用户在手机上选择图片后，图片会被缩放成缩略图，如图所示。点击对应图片调用微信“预览图片界面”预览图片。当图片等于最大图片数时，最后小摄像头图案的消失揭示了两种方法供其他组件调用。上传图片方法(上传到微信服务器，上传成功后执行回调)上传图片获取所有图片信息方法，包括初始化相册、删除和新增图片信息getAllImgInfo

好了，介绍完了，现在正式开始了！

1.使用vue-router进行路由，构建show-album.js，整个函数叫做show-album，所以这个函数的js会改名为show-album.js，这个js的结构如下：

定义(['vue '，' vue资源'，' vue路由器'，' v相册']，函数(vue，vue资源，vue路由器，相册){//安装资源模块vue . use(VueResource)；//安装路由模块vue . use(VueRouter)；//jquery在执行post请求时会将Content-Type设置为application/x-www-form-URL encoded，//这样服务器就可以正确解析了。当使用本机ajax请求时，如果不显示内容类型，默认为文本/纯文本。//此时服务器不知道如何解析数据，只能通过获取原始数据流来解析请求的数据。//由于vue使用的是原生POST，所以需要设置一个服务器来正确解释过去的POST数据vue . http . options . emulate Jon=true；//定义main page var main page=vue . extend({ template : ' # main-page-temp ' })//定义Detail page var Detail page=vue . extend({ template : ' # Detail-page-temp '，components 3360 { ' album ' : album } })//根组件var show album=vue . extend({ components 3360 { ' main-page ' 3: main page，Detail-page ' 3: Detail page } })//实例化//配置路由路由器. map({ '/main-page ' : { name : ' main page '，component: mainpage}，//这里，使用路由的动态片段'/detail-page/: inspection _ id/: image _ type ' : { name 3360 ' detail page } })；Router.redirect({ //将任何不匹配的路径重定向到/home ' * ' : '/main-page ' })；//启动应用程序//路由器将创建一个实例，并将其装载到选择器匹配的元素上。router . start(show相册，' # show-相册')；});HTML非常简单：

模板id=' main-page-temp ' group cell v-for=' list in list ' title=' test ' value=' click ' is-link v-link=' { ' name ' : ' detail page '，params 3360 { ' inspection _ id ' : list . inspection _ id，' image _ type ' : list . image _ type } } '/cell/group/template template id=' detail-page-temp '相册v-ref :相册3360imgMargin-top: 20px '点击我触发getAllImgInfo方法/按钮/模板div id=' show-ablum '！-路由链-路由器-视图/路由器-视图/div现在点击主页上的一条记录，您可以跳转到详细信息页面。如果您返回到详细信息页面，您将返回到主页。这就完成了整体结构。

2.开发微信上传图片组件

具体代码没有列出，我们将根据上面列出的组件功能来谈谈如何完成每个功能

1.从父组件接收参数以初始化上传图片组件。首先，在子组件中设置道具

道具： {//初始化是否有照片IMGSRCS 3360 {Type: Array，Default3360 []}，//是否可以编辑默认的True CanEdit 3360 { type : Boolean，Default3360 True}。//默认情况下，最大上传数量为9maxnum: {type: number，default: 9}。//上传后的回调是after upload 3360 { type : function } }，然后在父组件中使用子组件时可以传入参数。

相册v-ref :相册： img-srcs=' initimmgsrcs ' : canedit=' true ' : after upload=' after upload function '/相册2。点击最后一个小摄像头图案调用微信“从手机相册中选择图片界面”。用户可以在手机上选择图片，并在小相机图案的html中绑定chooseImage方法@ @ click=“choose image”

span class=' add-img-icon ' img src=' http :/public/home/source/image/camera . png ' @ click=' choose image '/span，然后在methods中添加这个方法，通过wx.chooseImage请求微信选择图像界面我们需要在使用微信js-sdk之前进行配置，这样就可以在组件准备好的时候进行配置。

Ready :函数(){//配置微信JS-SDK this . getsignspackage()；}，方法： { choose image : function(){ var _ this=this；wx . choose image({ count : _ this . maxnum-_ this .相册. length，//默认9size type: ['original '，' compressed']，//可以指定是原图片还是压缩图片。默认情况下，两者都有sourcetype: ['相册'，'相机']。//可以指定来源是相册还是相机。默认情况下，两者都有success3360函数(RES){ var _ local ids=RES . local ids；//记录新照片信息为(var I=0，len=_ local ids . length；我透镜；I){ _ this . NewimageScache . push(_ LocalIdS[I])；}//按比例生成thumbnail _ this . render image(_ local ids)；} });}}3.选择图片后，图片被缩放成缩略图，如图所示。这里，我们需要用到图片预处理，即vari mg=new image()；通过实例化一个Image实例来获取原始图像的大小，我们可以根据原始图像的大小来计算对应的等比例缩略图。具体来说，是这样的：

var img=new Image()；var $ albumSingle=//这里的顺序是先新建Image()，然后执行img.src，然后加载图片。//只有到那时才会调用onload方法img . onload=function(){相册数据={localid:imgsrcs [I]。umsinglestyle : { height : imgrawidth ' px ' }，//compressemage是一种压缩图片的方法，传入这个图片实例和图片的父元素的宽度进行计算。imgElementStyle : _ this.compressimage(img，imgWrapWidth)}；_this .相册. push(albumdata)；};img . src=IMgsrcs[I]；特别的一点：由于每张图片都有自己的大小和风格，我们需要在组件的数据选项中添加一个相册数据作为照片数据集，其中包含每张照片自己的路径和风格，这样在循环渲染每张图片时，每张图片都会对应自己的属性。此外，因为同一张图片可以重复上传，所以在循环时添加track-by=$ index

//每张图片的属性为相册数据={localid:imgsrcs [I]，相册single style 3360 { height : imgwrapwidth ' px ' }。//compressemage是一种压缩图片的方法，传入这个图片实例及其父元素的宽度进行计算。imgElementStyle : _ this.compressimage(img，imgWrapWidth)}；//将每张图片的属性放入相册数据集_this .相册. push(albumdata)；4.点击对应图片调用微信“预览图片界面”预览图片img @click='previewImage($index)'

在图片中绑定一个点击事件，传入图片的索引，并触发一个方法：

previewImage :函数(索引){ var _相册=this .相册；var URL=this . GetLocalIdS(_相册)；wx . preview image({ current : URL[index]，//当前显示图片的http链接urls:urls要预览的图片的http链接列表})；5.点击每张图片右上角的叉，删除图片。这是一个绑定在分叉上的点击事件。此事件处理删除图片。

I class=' close-icon ' @ click=' delete image($ index，album)' v-if='canEdit'/i

在deleteImage方法中，由于需要记录用户删除了哪些初始化图片，所以在删除时需要判断初始化时是否存在该图片：

Delete image :函数(索引，相册){//比较要删除的照片是否在初始化照片中为(var I=0，len=this . oldimagescache . length；我透镜；I){ if(album . localid===_ oldImagesCache[I]){ this . deleteimageslist . push(_ oldImagesCache[index])；} } this.canEdit this .相册. $remove(相册)；}6.当图片等于最大图片数时，最后一个小相机图案消失v-if="相册。长度9英寸

7.暴露两种方法供其他组件调用上传图片方法(上传到微信服务器，上传成功后执行回调)上传图片获取所有图片信息方法，包括初始化相册、删除和新增图片信息。如何公开方法供其他组件调用是一个大问题。我不知道怎么做才是最好的做法，因为有很多方法可以做到，比如子组件$dispatch，然后父组件在事件中接收，但是看起来很麻烦，所以我选择了这样做：在子组件中使用v-rel : xx来添加组件索引

相册v-ref :相册： img-srcs=' initimmgsrcs '/相册

然后，在父组件中，您可以通过此调用子组件公开的方法。$refs.xxx.uploadImage()

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

现在推荐一个关注度高的微信小程序教程：《微信小程序开发教程》边肖为大家精心安排的，希望大家喜欢。

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