教程 | 校徽头像制作小程序前端实现

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

1、创建工程

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

2、编写页面元素代码

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

<!--index.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代码，将页面的整体布局调整为我们能够接受的样子。首先修改index.wxss，设置图片的长宽，并修改<view>标签的样式，为其添加阴影，最后设置按钮的长度以及间距。代码如下：

/**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中的代码，为container类中的元素添加外边距，代码如下：

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

运行效果如下图：

4、编写js代码

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

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

然后通过自定义函数对两个按钮的点击事件进行绑定，首先是点击选择相册图片按钮，需要打开手机相册，选择照片后再对照片进行上传，服务器接收到了图片请求，会将处理好的新的图片的url返回。如果成功，会执行success的回调函数，因此我们在success的函数中将新的图片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，就能够开发出来，大家有时间的可以去试试，后台我已经搭好了，大家可以直接使用。

有疑问的记得留言哦，我会尽力解答的，本次教程的源码关注公众号‘嗜码’并在后台回复校徽头像小程序源码可以获得下载连接。看完了别忘了点个赞哦！

教程 | 校徽头像制作小程序前端实现相关推荐

教程 | 校徽头像制作小程序后端实现
校徽头像小程序后台使用spring进行搭建,只有控制层一层,在控制层中完成了请求的处理以及图片的叠加.下面看实现的具体步骤. 1.实现思路在前面的文章校徽头像小程序前台实现中讲到了校徽制作小程序工作 ...
最近网上比较火的虎年西游记金钱豹头像制作小程序源码
简介: 今天为大家分享一下最近抖音和朋友圈比较火的云开发虎年西游记金钱豹头像制作小程序源码和西游记南山大王金钱豹的趣味头像素材包,年少不知豹哥好,错把樵哥当成宝,金钱豹头像最近也是由于谐音梗金钱暴富为 ...
团长头像制作小程序源码_支持流量主
最近各类团长挺火的然后就诞生了这款团长头像制作器支持流量主模式支持自定义文字,和拥有各种团长模板等等源码下载:团zhang头像制作小程序源码_支持流量主-小程序文档类资源-CSDN下载
团长头像制作小程序源码下载支持流量主安装简单
最近疫情上海魔都各类团长挺火的然后就诞生了这款团长头像制作器支持流量主模式支持自定义文字,和拥有各种团长模板等等具体小编就不多说了,大家看小编的测试演示图吧! 小程序源码下载地址:(已更新) ...
微信小程序修改制作生成头像——校庆头像制作小程序
给头像加边框--校庆头像制作的小程序 --分享改变世界,感谢成长路上遇见的分享话不多说先上图(满意客官再往下看): 首页选择头像框制作界面用户选择图像用户裁剪选择的图像生成并保存头像到手机 ...
表单－微信小程序前端制作切片演示
小程序前端制作-表单切片,内含服务器端.小程序所有文件.切片文件(可以用小程序切片软件打开再次编辑).效果图内含以下栏目: 新增校园经历组织/公司名称职位开始时间结束时间经历描述资源下载 ...
禾匠榜店商城小程序4.5.14全开源独立版+微信+抖音小程序前端去后门安装教程
榜店商城4.5.14全开源修版:含VUE小程序前端+后端管理+抖音小程序前端,新增周期.定制商品.企业微信SCRM.企业微信客服.链接生成工具(微信小程序)等插件.整体测试非常完美相比上几版本该版本基 ...
php获取微信小程序用户头像,微信小程序获取用户头像+昵称+openid，小程序登录！附前端后端源码！...
做一款小程序,如果需要判断用户,当然要获取一些基本信息,例如头像,昵称,openid.所以本次案例就直接上代码了. 小程序前端 index.wxml 获取头像昵称 {{userInfo.nickNam ...
姓氏头像框一键制作小程序源码
正文: 姓氏头像框一键制作小程序源码+附微语模块,源码无需后端服务器搭建,源码搭建也非常简单,包含了多种模板制作,且风格多样化,例如有热度比较高的姓氏头像. 虽然该主题是以姓氏框制作为主的,但是姓氏主 ...

教程 | 校徽头像制作小程序前端实现

教程 | 校徽头像制作小程序前端实现相关推荐

最新文章

热门文章