校徽头像小程序开发教程

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

1、创建工程

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

2、编写页面元素代码

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

3、编写css代码

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

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

运行效果如下图:

4、编写js代码

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

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

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

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

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

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

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

总结

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180709G0OS8P00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券