微信小程序--证件照换底色UI及前端页面修改+札记与贺卡图片整理

札记与贺卡

主要是进行所需要的海报的选择，修改和收集。因为是一个模板类的小程序，用户选择我们设定的模板之后，进行文字的添加，所以我们这边模板的多样性很重要，也因为是双节比较特别，就收集了各类的模板海报，再进行修改。
分为三类，国庆、中秋以及符合今年情况的双节
分为给用户展示的界面以及用户编辑时显示的界面

每个系列各10几张图片（一张示例）

证件照换底色

证件照换底色主要进行部分界面UI的重新设计以及前端页面的代码修改

UI设计

修改了以下两个示意图中的按钮样式，更加好看点

UI修改重点是在以下的我的界面，进行重新设计使其不再那么空
修改点击获取头像的样式，匹配获取头像之后的圆形，所以也改为圆形展示，获取信息之后显示头像和微信名
背景图片改了豪好多版，老是因为现在的手机普遍比较长

前端修改

在项目中对以上的UI进行重新修改

1.按钮修改

按钮中嵌套图片并将按钮设置为透明无边框，纯展示图片样式

 <button class="btm" bindtap="bindClear">
    <image src="../../images/change.png"></image>
    </button>

.btm{
  background: rgba(0,0,0,0);
  width: 300rpx;
  height: 70rpx;
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 20rpx;
}
.btm image{
  width: 300rpx;
  height: 70rpx;
}
.btm::after{
  border: 0;
}

2.我的界面

··························
banner界面，注意需要进行图片高度自适应的设置，否则图片会因为不同手机的分辨率不同而被压缩或者拉伸。

<image style="width:100%;height:{{imgheight}}rpx " src="../../images/banner3.png"></image>

Page({
  data: {
    imgheight:0,
  },

 onLoad: function (options) {
    var imgwidth = 1080,
    imgheight = 507,
    //宽高比
    ratio = imgwidth / imgheight;
  console.log(imgwidth, imgheight)
  //计算的高度值
  var viewHeight = 750 / ratio;
  var imgheight = viewHeight;
  this.setData({
    imgheight: imgheight,
  })
  },

··························
背景图片，设置为全部铺满，不然会因为手机不同出现空白区域
设置mode="aspectFill"全铺满，z-index: -1;在其他组件的下方渲染，不会挡住别的组件

<image class='background' src="../../images/bg.png" mode="aspectFill"></image>

.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
}

··························
图片居中，在外面嵌套一个view，给view设置flex居中布局，从而使内部的图片居中
css如下

.img_view{
  display:flex;                    
  justify-content: center;       
  align-items:center;    
}

··························
不是默认的布局顺序，而是随意放置某个组件，使其和另一个组件叠加
叠加需要注意调整两个组件的位置以达到最好效果
需要设置position: absolute;
css如下

.img_down{
  width:350rpx;
  height:80rpx;
  position: absolute;
  margin-top: 550rpx;
}

 <block wx:else>
    <image class="img_border" src="../../images/border.png"></image>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>

.img_border{
  width:180rpx;
  height:180rpx;
  position: absolute;
  z-index: -1;
  padding-top: 5rpx;
}

.userinfo-avatar {
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
  border-radius: 50%;
}

··························
图片固定在底部不动

  <image style="width:100%;height:{{imgheight1}}rpx;
  margin-top:50rpx ;position:fixed; bottom:0;" 
  src="../../images/bottom.png"></image>