微信小程序--圣诞头像框UI设计及前端实现

这周主要是在搞一个新项目，主要负责UI设计和前端页面实现，也是类似之前头像框的项目，主题不同，这次的主题是圣诞，所以在UI设计上就需要注意和圣诞节的搭配。
（该项目最后取消了，所以就是记录一下过程）

UI设计

首先就需要找好素材了，怎么样设计都是去看各种各样的图片进行参考，关于圣诞的设计和素材很多，所以选择还是很广的，进行素材的选择和组合，尝试怎样摆放和样式会更加好看，也需要考虑到头像框的放置位置，突出其位置。对于我这种强迫症来说，选定素材、样式和位置等，就很耗时间，虽然说就两个页面，也纠结了很久，花了我认为较多的时间来敲定下来。
···············
下面就是主页面，直接开始用户的选择头像框界面
选定背景颜色，边框以及其上的装饰背景，用白色涂鸦图片突出头像的图片，和背景的红色分割开来，更加清楚看出图片。图片是用手滑动来切换，所以需要在下方放一个提示，来告诉用户如何进行图片切换。三个按钮分别是上传微信头像、从本地上传、生成头像，可以上传自己的微信头像或者从本地上传图片，之后点击生成图片就跳转到下载图片界面进行图片的下载。

下载界面是和主界面一样用白色底突出头像框图片，其他的为设计的背景，沿用上一个界面的背景色和边框，加入圣诞树的元素。两个按钮分别为再生成一张头像和保存图片，再生成将跳转到上一界面，保存图片将在用户授权后将头像框图片保存到手机相册中。

前端页面实现

其实大体和之前的挑战杯头像框实现差不多，这次主要是想替换一下图片的切换方式，挑战杯是通过按钮和wx:if判断语句进行图片的显示，把图片显示的wxml都写出了，一长串很冗余，按钮改变判断语句中的变量，对不同的图片进行展示。这次想将wxml中代码简化，加上滑动的功能。
··················

云存储初始化

这次是将图片存储在云存储中进行调用，所以需要使用到云开发，只要使用云存储的话，需要一个注册过的openid并且在app.js加上下面的代码

env后的英文为自己云开发中的环境ID

//app.js
App({
  onLaunch: function () {

    wx.cloud.init({
      env:"yunkaifa-fp3py"
    })
  },

})

··················

滑动切换图片的实现

通过{{数组名[变量]}}获取js中的数组数据，也就是定义一个变量作为数组的下标，通过用户的滑动切换变量的值，从而切换组件中对应的数组数据，获取数据对应的src地址，从而将其在云存储的图片显示出来。
需要设置用户滑动的开始，结束和左右滑动响应函数，在其中实现相应的功能。

<!-- 滑动图片 -->
<view class="container1" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
<image class="img_head" src="{{imgs[index-1]}}"></image>
</view>

js中需要设置一些变量供滑动的函数使用，以及设置好需要显示的图片，放在数组中，还有变量

var startX, endX;
var moveFlag = true;
 data: {
    index: 1,
    imgs: [
      "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/1.png",
      "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/2.png",
      "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/3.png",
      "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/4.png",
      "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/5.png",
      "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/6.png",
      "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/7.png",
      "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/8.png",
      "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/9.png",
      "cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/10.png",
    ],
  },

触摸开始响应函数，获取用户的触摸原点，并且设置开始滑动的标志为true。

 //触摸开始事件
  touchStart: function (e) {
    startX = e.touches[0].pageX; // 获取触摸时的原点
    moveFlag = true;
  },

监测触摸移动，获取移动的最后位置，如果移动超一定距离则判定为向左或者向右移动，调用左滑动或者右滑动函数。

  // 触摸移动事件
  touchMove: function (e) {
    endX = e.touches[0].pageX; // 获取触摸时的原点
    if (moveFlag) {
      if (endX - startX > 50) {
        console.log("move right");
        this.move2right();
        moveFlag = false;
      }
      if (startX - endX > 50) {
        console.log("move left");
        this.move2left();
        moveFlag = false;
      }
    }
  },

结束事件

  // 触摸结束事件
  touchEnd: function (e) {
    moveFlag = true; // 回复滑动事件
  },

左滑动函数，当用户左滑动时调用，在其中进行变量的修改，使其显示当前图片前的一张图片，需要判断图片是否为第一张，若为第一张需要将变量设为图片的数量值，使其显示最后一张图片，否则会出现对应不到图片的情况。

  //左滑动函数
  move2left() {
    var that = this;
    var index = that.data.index;
    if(index==1){
      this.setData({
        index:10
    })
    }else{
      this.setData({
        index:index-1
    })
    }
  },

右滑动函数，当用户右滑动时调用，在其中进行变量的修改，使其显示当前图片后的一张图片，需要判断图片是否为最后一张，若为最后一张需要将变量设为1，使其显示第一张图片，否则会出现对应不到图片的情况。

  //右滑动函数
  move2right() {
    var that = this;
    var index = that.data.index;
    if(index==10){
      this.setData({
        index:1
    })
    }else{
      this.setData({
        index:index+1
    })
    }
  },

··················
以下的都是之前都写过的了，就简单地再记录一下

背景图片铺满

设置其mode为aspectFill，这个属性是图片会根据长宽比例进行缩放从而铺满屏幕，不会影响到图片的比例

<!-- 背景 -->
<image class='background' src="cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/bg1.png" mode="aspectFill"></image>

wxss中最重要的就是设置background-size，并且将其置于下方z-index，就不会遮挡到别的组件

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

组件之间有上下层顺序时如何设置下方组件的居中

<!-- 底部白色 -->
<view class="img_down">
<image src="cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/back.png"></image>
</view>

在wxss中，需要设置其position为absolute，这样该组件可以进行重叠显示，并且在别的正常书写的组件的下方。而使用了position后就不能用之前一直使用的flex布局进行图片的居中了，所以后来修改的方法就是直接设置其left属性，将其数值设置为正好在页面中可以居中的数字，经测试是可以在不同尺寸的手机上进行居中显示的。

.img_down{
  margin-top: 220rpx;
  position: absolute;
  left:6%;
}
.img_down image{
  height:560rpx;
  width: 677rpx;
}

正常图片居中

<!-- 手指图片 -->
<view class="img_move">
<image src="cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/move (1).png" ></image>
</view> 

这几句代码最居中的关键 display: flex; flex-direction: row; align-items: center; justify-content: center;

.img_move{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 25rpx;
}
.img_move image{
  height: 270rpx;
  width: 340rpx;
}

按钮为图片

设置好按钮，并且内嵌图片样式

  <button class="btn_upload" bindtap="upload">
   <image src="cloud://yunkaifa-fp3py.7975-yunkaifa-fp3py-1303879667/圣诞/weixin.png"></image>
  </button>

设置按钮背景为透明，并且无边框，将图片的长宽设置为和按钮长宽一致。

.btn_upload{
  background: rgba(0,0,0,0);
  width: 244rpx;
  height: 92rpx;
  padding: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.btn_upload image{
  width: 244rpx;
  height: 92rpx;
}
.btn_upload::after{
  border: 0;
}

生成图片后下一个界面获取用户选择的图片

将index变量作为参数在跳转时传递给下一个界面，下一个界面也有imgs数组，获取index参数，将其传递给组件中的imgs[index]，进行图片的显示

使用到的跳转的两种形式

普通跳转，打开新界面，原来界面还存在

 wx.navigateTo({
      url: '../logs/logs?index=' + index
    })

会将当前界面关闭，并打开新界面

 wx.reLaunch({
        url: '../index/index'
      })