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

 

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

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'