又到了一年一次去别人家过节的时候了，圣诞节。还记得去年，朋友圈疯狂转发圣诞帽。在圣诞节给你的头像加上一顶圣诞帽是非常合适的。可能是这样吧，挺好看的，别想太多，我说的是帽子(￣▽￣)”那么你有没有想过自己实现一个装饰头像的小程序呢？今天我们就起床完成一个项目框架。最近迷上了uni-app。虽然还是初学者，但总能隐隐感觉到大前端的时代正在到来。没错，我们今天要说的APP就是通过uni-app来实现的，纯前端代码就可以实现！这里我还是推荐使用HBuilderX编译器。毕竟真的很好用而且和uni-app项目完美结合，因为都是DCloud团队的产品！下面完美通过HBuilderX创建一个uni-app工程。对于这个程序，我们就用最简单的方式，一页就够了，在pages的索引中编辑index.vue，把我们程序的页面布局写在这里。相关操作，我们先设置页面背景，可以设置全局基调接下来我们来布置个人头像-1"class="MaskFlip-Horizo??ntal":class="{Maskwithborder:Showborder}"ID='Mask':SRC="Maskpic“”:style="{上:maskCenterY-maskSize/2-2+'px',左:maskCenterX-maskSize/2-2+'px',变换:'rotate('+rotate+'deg)'+'scale('+scale+')'+'rotateY('+rotateY+'deg)'}">个人头像用avatarPath保存，会给出稍后定义路径接下来我们定义几个按钮获取头像上传头像保存头像分享好友这里我通过评论方式选择平台，从而调用不同的方法\·对于微信小程序，按钮的作用是获取用户头像\·对于APP程序，按钮的功能来自本地相册选择图片下面是widget部分这里我们通过一个方法将我们准备好的吊坠图转换成长掩码格式，然后显示在底部。先看脚本部分是data(){return{duration:15,Windowheight:0,CANSWIDTH:270,widthPXCANSHEIGHT:270,//HighPXAvatarpath:'/Static/ChristMas/avatar_mask.png',imglist:Rang:0,7,1),//第二个参数是个数}}这里定义了用户初始头像的路径和头像挂件的个数。以下是APP程序启动时的初始配置。onShareAppMessage(){return{ittle:'圣诞节快到了，让我们装饰一棵圣诞树吧！',ImageUrl:'/Static/image/christmas/avata_mask.png',Path:'/Pages/Index/Index',SUCCESS:Function(resole.log(res);}}}下面看看如何从本地获取图片albumgetPic(result){letself=this;//Default9sizeType:['original','compressed'],//可以指定原图或压缩图，默认都有sourceType:['album'],//从相册中选择resressuccess:function){UNI.GetimageInfo({src:res.tempfilepaths[0],success:function(image){self.avatarpath=image.path;});}这里可以直接调用uniAPI接口，选择Image即可打开本地相册选择一张图片，getImageInfo可以获取图片的相关信息。至于如何获取用户的微信头像，就不赘述了。网上有很多例子！我们简单看一下最终的效果。最后，如果你想要这个应用，可以在后台回复“圣诞头像”。想要完整代码可以回复“圣诞代码”。感谢您的支持，点赞关注就走！
