共计 4469 个字符，预计需要花费 12 分钟才能阅读完成。
话说又到了一年一度到他人到节日，圣诞节，还记得去年的时候，朋友圈疯狂转发到圣诞帽嘛，在圣诞节为本人到头像减少一款圣诞帽还是蛮应景的。
可能是这样的
怎么样，看起来都不错吧，不要想多了，我说的是帽子 (~▽~)”
那么有没有想过，本人来实现一个装璜头像的小程序呢，明天咱们就一起来实现一个
我的项目框架
最近始终迷恋 uni-app, 尽管本人还是一个初学者，然而总是隐隐的能感觉到，大前端时代正在走来。没错，明天咱们要说的 APP 就是通过 uni-app 来实现的，纯前端代码即可实现！
这里我还是举荐应用 HBuilderX 这款编译器，毕竟是真的好用且和 uni-app 我的项目完满联合，因为都是 DCloud 团队的产品嘛！
上面完满就通过 HBuilderX 来创立一个 uni-app 我的项目
对于本程序，咱们就采纳最简略的形式，一个页面足够了，编辑 pages 当中的 index 中的 index.vue，在这里编写咱们程序的页面布局，曾经相干的操作
咱们先设置页面背景，这个能够定下全局的基调
<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 能够拿到图片的相干信息
至于如何获取用户微信头像，就不再赘述了，网上有很多例子了！
上面咱们来简略看下最初的成果吧
最初，如果想要这款 APP 的话，能够在后盾回复“圣诞头像”，如果想要残缺代码，能够回复“圣诞代码”
谢谢大家的反对，给个赞和关注再走吧！
