此前小程序开发版头像，公众号推送了一款制作校徽头像的工具小程序。 通过图像叠加技术，将头像与校徽图片叠加，生成新的头像图片。 今天我就先教大家如何制作小程序的前台界面。

1. 创建项目

打开微信开发者工具，新建一个项目，输入自己的项目，勾选快速启动模板，点击确定。

2.编写页面元素代码

页面设计非常简单，一个卡片状的盒子来存放图片，加上两个简单的按钮。 选择文件下的.wxml，删除原来的代码，编写新的页面代码如下。

<view class="container">
    <view class="userinfo card">
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{avatarUrl}}" mode="cover">image>
    view>
    view>
    <view class='operation'>
        <button bindtap='openAlbum' type='default' size='{{buttonSize}}'>选择相册图片button>
        <button bindtap='exportPic' class='export' size='{{buttonSize}}' type='primary'>一键导出头像button>
    view>

view>

3.编写CSS代码

如果只写上面的代码，页面会非常难看。 我们需要编写一些css代码来将页面的整体布局调整到我们可以接受的程度。 首先修改.wxss，设置图片的长和宽，修改标签的样式，为其添加阴影，最后设置按钮的长度和间距。 代码如下所示：

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 450rpx;
  height: 450rpx;
  margin: 20rpx;
}

.card {
    position: relative;
    margin: .5rem 0 1rem 0;
    background-color: #fff;
    -webkit-transition: -webkit-box-shadow .25s;
    transition: -webkit-box-shadow .25s;
    transition: box-shadow .25s;
    transition: box-shadow .25s, -webkit-box-shadow .25s;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);

}

.userinfo-nickname {
  color: #aaa;
}

.operation {
  margin-top: 50rpx;
}

.export {
    margin-top: 30rpx;
}

然后，修改整体元素的布局，修改app.wxss中的代码，给类中的元素添加边距。 代码如下：

/**app.wxss**/
.container {
    margin: 50rpx;
}

运行效果如下：

4.编写js代码

js代码主要是上传下载图片以及绑定页面元素数据。 首先是填充页面绑定的数据。 这里有两个数据，一个是图片的url，另一个是按钮的大小。 代码如下所示：

data: {
        avatarUrl: "https://zouxiaoming.xyz:8443/images/152799490334logo.png",
        buttonSize: 'default'
    },

然后使用自定义函数绑定两个按钮的点击事件。 首先，单击选择相册图片按钮。 您需要打开手机相册，选择照片，然后上传照片。 服务器收到图片请求并处理新的图片请求。 返回图像的 url。 如果成功，会执行回调函数，所以我们会在函数中数据绑定新的图片url，并提示上传成功。 代码如下所示：

openAlbum: function () {
        var that = this;
        // 打开手机相册
        wx.chooseImage({
            success: function (res) {
                var tempFilePaths = res.tempFilePaths;
                // 上传图片
                wx.uploadFile({
                    url: 'https://zouxiaoming.xyz:8443/avatar_change/saveHeaderPic',
                    filePath: tempFilePaths[0],
                    name: 'file',
                    // 上传成功，执行success函数
                    success: function (res) {
                        var data = JSON.parse(res.data);
                        var avatar_url = 'https://zouxiaoming.xyz:8443/avatar_change/images/' + data.url;
                        that.setData({
                            avatarUrl: avatar_url
                        });
                        // 弹出toast提示
                        wx.showToast({
                            title: '图片上传成功',
                            icon: 'succes',
                            duration: 2000,
                            mask: true
                        });
                    },
                    // 如果失败，执行fail函数
                    fail: function () {
                        wx.showToast({
                            title: '图片上传失败',
                            icon: 'none',
                            duration: 2000,
                            mask: true
                        });
                    }

                })
            },
        })
    }

保存代码，该工具将自动编译并运行。

选择要上传并测试的图片。 我已经设置好了背景。 如果需要测试，记得上传地址与代码一致。

最后一件事是保存图片。 首先为一键导出头像按钮定义一个点击事件，然后在事件中下载图片。 代码如下所示：

// 导出图片
exportPic: function () {
        var that = this;
        // 下载图片
        wx.downloadFile({
            url: this.data.avatarUrl,
            success: function (res) {
                console.log(res);
                // 保存图片至相册
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: function (res) {
                        console.log('success');
                        wx.showToast({
                            title: '保存成功',
                            icon: 'succes',
                            duration: 2000,
                            mask: true
                        });
                    }
                })
            },
            fail: function () {
                wx.showToast({
                    title: '图片下载失败',
                    icon: 'none',
                    duration: 2000,
                    mask: true
                });
            }
        })
    }

点击导出按钮，图片会导出到本地，如果在手机上测试，会导出到手机相册。

最后，去换头像吧！

总结

其实这个小程序实现起来并不是很难，只是一些简单的事件绑定。 你只需要了解一些小程序的基本API，就可以进行开发。 如果你有时间，你可以尝试一下。 背景我已经设置好了，你可以直接使用。

有什么问题记得留言，我会尽力解答。 本教程源码可通过后台回复校徽头像小程序源码下载。 看完后别忘了点赞哦！