话说又到了一年一度到别人到节日，圣诞节，还记得去年的时候，朋友圈疯狂转发到圣诞帽嘛，在圣诞节为自己到头像增加一款圣诞帽仍是蛮应景的。
咱们的目标就是是这样的
怎么样，看起来都不错吧，不要想多了，我说的是帽子(￣▽￣)”
那么有没有想过，自己来完成一个装饰头像的小程序呢，今日咱们就一起来完成一个
项目框架
最近一向迷恋 uni-app,尽管自己仍是一个初学者，可是总是隐隐的能感觉到，大前端年代正在走来。没错，今日咱们要说的 APP 就是经过 uni-app 来完成的，纯前端代码即可完成！
这里我仍是引荐运用 HBuilderX这款编译器，毕竟是真的好用且和 uni-app 项目完美结合，因为都是 DCloud 团队的产品嘛！
下面完美就经过 HBuilderX 来创建一个 uni-app 项目
咱们先设置页面背景，这个能够定下大局的基调
<image class="page-bg" :style="{ height: windowHeight + 'px'}" mode="aspectFill" src="/static/image/christmas-bg.png"></image>
下面咱们安置个人头像
<view class="avatar-container grid justify-center" id="avatar-container" @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove">
<view class="avatar-bg-border">
<image @touchstart="touchAvatarBg" class="bg avatar-bg" id="avatar-bg" :src="avatarPath"></image>
</view>
<image
v-if="currentMaskId > -1"
class="mask flip-horizontal"
:class="{maskWithBorder: showBorder}"
id='mask'
:src="maskPic"
:style="{ top: maskCenterY-maskSize/2-2+'px', left: maskCenterX-maskSize/2-2+'px', transform: 'rotate(' +rotate+ 'deg)' + 'scale(' +scale+')' + 'rotateY('+ rotateY +'deg)'}"
></image>
<text class="cuIcon-full handle circle" :class="{hideHandle: !showBorder}" id="handle" :style="{top:handleCenterY-10 + 'px', left:handleCenterX-10 +'px'}"></text>
</view>
关于个人头像，运用 avatarPath 来保存，在后面会给出界说路径
接下来咱们界说几个按钮
<view class="grid justify-around action-wrapper">
<view class="grid col-1">
<!-- #ifdef MP-WEIXIN -->
<button id="btn-my-avatar" class="cu-btn round action-btn bg-yellow shadow " open-type="getUserInfo" @getuserinfo="getUserInfo">获取头像</button>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<button id="btn-my-avatar" class="cu-btn round action-btn bg-yellow shadow " @click="getPic">上传头像</button>
<!-- #endif -->
</view>
<view class="grid col-2">
<button id="btn-save" class="cu-btn round action-btn bg-yellow shadow" @click="draw">保存头像</button>
</view>
<!-- #ifdef APP-PLUS -->
<view class="grid col-3">
<button id="btn-save" class="cu-btn round action-btn bg-yellow shadow" open-type="share">共享朋友</button>
</view>
<!-- #endif -->
</view>
在这里，我经过注释法来挑选平台，从而调用不同的办法
- 关于微信小程序，按钮的功用是获取用户头像
- 关于 APP 程序，按钮的功用是从本地相册挑选图片
下面就是挂件部分
<scroll-view class="scrollView mask-scroll-view" scroll-x="true">
<view v-for="(item,index) in imgList" :key="index" style="display: inline-flex;">
<image class="imgList" :src="'/static/image/Christmas/'+ index +'.png'" :data-mask-id="index" @tap="changeMask"></image>
</view>
</scroll-view>
在这里把咱们准备好的挂件图片经过办法转换长 mask 格局，然后展示在最底部
下面咱们来看下 script 部分
首先是
data() {
return {
duration: 15,
windowHeight: 0,
cansWidth: 270, // 宽度 px
cansHeight: 270, // 高度 px
avatarPath: '/static/image/Christmas/avatar_mask.png',
imgList: range(0, 7, 1), // 第二个参数是个数
}
}
在这里界说了用户初始头像的路径，以及头像挂件的个数
下面是 APP 程序启动时的初始配置
onShareAppMessage() {
return {
title: '圣诞节降临，装饰一棵圣诞树吧！',
imageUrl: '/static/image/Christmas/avatar_mask.png',
path: '/pages/index/index',
success: function(res) {
console.log(res);
}
}
}
最后咱们再简略的看下怎么从本地相册获取图片
getPic(result) {
let self = this;
uni.chooseImage({
count: 1, //默许9
sizeType: ['original', 'compressed'], //能够指定是原图仍是压缩图，默许二者都有
sourceType: ['album'], //从相册挑选
success: function (res) {
uni.getImageInfo({
src: res.tempFilePaths[0],
success: function (image) {
self.avatarPath = image.path;
}
});
}
});
}
在这里能够直接调用 uni 的 API 接口，chooseImage 能够翻开本地相册并挑选图片，getImageInfo 能够拿到图片的相关信息
至于怎么获取用户微信头像，就不再赘述了，网上有很多比如了！
下面咱们来简略看下最后的效果吧
