校徽头像小程序开发教程

之前公众号推过一个校徽头像制作的工具类小程序，通过图片叠加的技术，实现头像与校徽图片的叠加，并生成新的头像图片，今天首先教大家制作小程序前台界面。

1、创建工程

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

2、编写页面元素代码

页面设计的非常的简单，一个卡片式的方块存放图片，加上两个简单按钮。选择index文件下的index.wxml，删除原有代码，写入新的页面代码如下。

3、编写css代码

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

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

运行效果如下图：

4、编写js代码

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

然后通过自定义函数对两个按钮的点击事件进行绑定，首先是点击按钮，需要打开手机相册，选择照片后再对照片进行上传，服务器接收到了图片请求，会将处理好的新的图片的url返回。如果成功，会执行success的回调函数，因此我们在success的函数中将新的图片url进行数据绑定，并提示上传成功。代码如下：

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

选择一张图片进行上传测试，后台我已经搭好了，大家如果需要测试记得上传地址就和代码里的一致就行。

最后就是保存图片了，首先为按钮定义一个点击事件，然后再事件中下载图片。代码如下：

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

最后再去更换自己的头像吧！

总结

其实这个小程序实现起来并不是很难，只有一些简单的事件绑定。你只需要了解一些小程序基本的api，就能够开发出来，大家有时间的可以去试试，后台我已经搭好了，大家可以直接使用。