微信小程序--证件照换底色项目前端修改+头像框项目前端页面实现修改

证件照换底色

主要进行后端所需功能的增加，尺寸选择功能的增加，颜色选择功能样式修改，版权问题导致的ui修改和所需ui的设计。

跳转前按钮判断

在点击开始转换图片进行跳转之前，判断用户是否已经进行授权，后端需要用到用户的信息进行操作，所以在前端进行图片的操作之前，需要让用户先进行授权，才能获取相应的信息。若用户未授权，在点击进行转换按钮后将会自动跳转到tabBar的我的界面，用户点击授权按钮进行授权并且显示头像和姓名，授权后将自动进入证件照换底色的功能界面进行操作。
点击按钮响应函数中，wx.getSetting为获取用户的当前设置的函数，if语句判断用户是否授权过，若已经授权就直接跳转底色功能界面

 wx.getSetting({
   
    // 调用接口获取用户的当前设置
      success: res => {
   
    // 调用成功时的回调函数
        if (res.authSetting['scope.userInfo']) {
   
   
          wx.navigateTo({
   
   
            url: '../grids/grid_demo'
          //openID可以用时改为下面这个url
          //url: '../grids/grid_demo?openID='+this.data.openID
          })
        }

若未授权，就弹出提示框并且在1秒后自动跳转到进行授权的界面进行操作
wx.showToast弹出框函数
setTimeout为自动跳转函数，数值为等待时间

else{
   
   
          wx.showToast({
   
   
            title: '请先授权登录',       
            icon: 'success',        
            duration: 2000
           })
           setTimeout(function(){
   
   
                wx.switchTab({
   
   
                  url: '../logs/logs'
                //openID可以用时改为下面这个url
                //url: '../grids/grid_demo?openID='+this.data.openID
                })
              },1000);
        }

跳转授权界面后，用户点击获取头像昵称按钮进行用户授权，按钮响应函数中判断返回数值是否含有相关数据，若含有则表示授权成功，在授权成功之后将自动跳转到底色功能界面。

 setTimeout(function(){
   
   
                        wx.navigateTo({
   
   
                          url: '../grids/grid_demo'
                        //openID可以用时改为下面这个url
                        //url: '../grids/grid_demo?openID='+this.data.openID
                        })
                      },1000);

解决上传图片位置的不固定

在横向的两个组件外面添加flex横向布局，使两个组件可以固定在横向的特定位置，之后进行图片上传显示的话，图片尺寸不对也不会影响整体的布局。又因为使用了weui组件库中的上传图片组件，所以在weui源文件中会默认设置一些该组件位置的属性使最终页面效果有所变化，所以需要到weui.wxss中直接修改相应的原属性的部分数值，使其效果达到平均横向显示。

······flex·横向居中布局
.flex{
   
   
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

weui-单选组件设置背景图片

需要了解这个组件之间各种属性的关系和作用，经过不断测试，得出label属性为底下的背景界面，对其进行背景图片的设置就可以实现单选组件的背景图片设置。
以下为随便图片的测试结果，需要更加美观可以在weui.wxss中对相关组件进行部分数值的修改，如padding属性等。最终效果中，没有使用到该单选组件，而是使用了下面会说到的grid组件。

weui-grid组件及选中未选中状态切换

weui组件库已经实现了grid，直接进行搬运使用，而所需要做的是用户进行点击之后需要显示被选中的图片，更加直观地看到自己的选择。
我的想法是将grid中的多余组件，如文字和图片嵌套都去掉，直接内嵌一个按钮，设计其功能类似于单选按钮，通过点击对应部分对其背景图片进行切换，实现选中和未选中的状态展示。
···········
内嵌按钮组件

<view class="weui-grids">
	<a class="weui-grid">
		<button  class='{
    
    {colorbtns[0].checked?"checked_colorbutton":"normal_colorbutton"}}' data-id='{
    
    {colorbtns[0].id}}' bindtap='radiocolorButtonTap'>
		</button>
	</a>
	<a class="weui-grid">
		<button  class='{
    
    {colorbtns[1].checked?"checked_colorbutton2":"normal_colorbutton2"}}' data-id='{
    
    {colorbtns[1].id}}' bindtap='radiocolorButtonTap'>
		</button>
	</a>
	<a class="weui-grid">
		<button  class='{
    
    {colorbtns[2].checked?"checked_colorbutton3":"normal_colorbutton3"}}'