超有意思,圣诞节自己做一个装饰圣诞帽头像的APP!

话说又到了一年一度到别人到节日,圣诞节,还记得去年的时候,朋友圈疯狂转发到圣诞帽嘛,在圣诞节为自己到头像增加一款圣诞帽还是蛮应景的。

可能是这样的

超有意思,圣诞节自己做一个装饰圣诞帽头像的APP!_第1张图片

怎么样,看起来都不错吧,不要想多了,我说的是帽子( ̄▽ ̄)"

那么有没有想过,自己来实现一个装饰头像的小程序呢,今天我们就一起来完成一个

项目框架

最近一直迷恋 uni-app,虽然自己还是一个初学者,但是总是隐隐的能感觉到,大前端时代正在走来。没错,今天我们要说的 APP 就是通过 uni-app 来实现的,纯前端代码即可实现!

这里我还是推荐使用 HBuilderX这款编译器,毕竟是真的好用且和 uni-app 项目完美结合,因为都是 DCloud 团队的产品嘛!

下面完美就通过 HBuilderX 来创建一个 uni-app 项目

超有意思,圣诞节自己做一个装饰圣诞帽头像的APP!_第2张图片

对于本程序,我们就采用最简单的方式,一个页面足够了,编辑 pages 当中的 index 中的 index.vue,在这里编写我们程序的页面布局,已经相关的操作

我们先设置页面背景,这个可以定下全局的基调

下面我们布置个人头像


            
                
            
            
            
        

对于个人头像,使用 avatarPath 来保存,在后面会给出定义路径

接下来我们定义几个按钮


            
                
                获取头像
                
                
                上传头像
                
            
            
                保存头像
            
            
            
                分享朋友
            
            
        

在这里,我通过注释法来选择平台,从而调用不同的方法\
· 对于微信小程序,按钮的功能是获取用户头像\
· 对于 APP 程序,按钮的功能是从本地相册选择图片

下面就是挂件部分


            
                
            
        

在这里把我们准备好的挂件图片通过方法转换长 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!_第3张图片

最后,如果想要这款 APP 的话,可以在后台回复“圣诞头像”,如果想要完整代码,可以回复“圣诞代码”

谢谢大家的支持,给个赞和关注再走吧!

你可能感兴趣的