微信小程序授权登陆判断+证件照换底色UI设计（第三周）_小程序授权ui

一、资料

（1）目前iconfont可商用插画

1.男生女生人物插画【需标明出处】（创建者：ionchan）

2.互联网系统+平台（创建者：SerenaSha）

3. https://www.iconfont.cn/illustrations/detail?spm=a313x.7781069.1998910419.d9df05512&cid=24612
4. https://www.iconfont.cn/illustrations/detail?spm=a313x.7781069.1998910419.d9df05512&cid=24675

（2）证件照尺寸用途汇总

二、小程序完善

（1）“开始转换”授权登陆判断

在index.js页面添加

  ,bindClear: function (e) {

  var that = this

// 判断用户是否授权登录

  wx.getSetting({

    success: function (res) {

      // 判断是否授权

      if (res.authSetting['scope.userInfo']) {

         //获取用户信息

        wx.getUserInfo({

          success: function (res) {
            wx.navigateTo({
              url: '../grids/grid_demo'
            })
            //用户已经授权过，添加用户信息

            // var that = this

            //wx.setStorageSync('nickName', res.userInfo.nickName)

            //wx.setStorageSync('avatarUrl', res.userInfo.avatarUrl)

          }

        });

      }else{

        wx.showToast({

           title: '请授权登录！',

           icon: 'none',

           duration: 1500,

           success: function () {

        //定时器，未授权1.5秒后跳转授权页面

           setTimeout(function () {

           wx.reLaunch({

           url: '../logs/logs',

              })

            }, 1500);

           }

          })

      }

    }

  })

}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

判断用户是否登录，未登录则跳转至登录页面，已登录则跳转至换底色页面。

（2）跳转页面UI设计

grid_demo.wxml

<view class='box'>
  <view class='wrapper'>
    <view class="tab-content {{selectBook? 'select': 'noSelect'}}" bindtap='chooseBookCart'>上传</view>
    <view class="tab-content {{selectThing? 'select': 'noSelect'}}" bindtap='chooseThingCart'>预览</view>
  </view>
</view>
<view class="weui-uploader__bd">
    <view class="flex">
        <view class="weui-uploader__files" id="uploaderFiles">
            <block wx:for="{{files}}" wx:key="*this">
                <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
                    <image class="weui-uploader__img" src="{{item}}" mode="scaleToFill" />
                </view>
            </block>
            <view hidden="{{hidden}}" class="weui-uploader__input-box">
                <view class="weui-uploader__input" bindtap="chooseImage"></view>
            </view>
        </view>
        <image class="image_color" src="../../images/shangchuan.png"></image>
    </view>
</view>
<view class="weui-grids">
    <a class="weui-grid">
        <view class="weui-grid__icon">
            <image src="../../images/white.png" style="margin-right: 16px;vertical-align: middle;width:35px; height: 35px"></image>
        </view>
        <view class="weui-grid__label">白底</view>
    </a>
    <a class="weui-grid">
        <view class="weui-grid__icon">
            <image src="../../images/red.png" style="margin-right: 16px;vertical-align: middle;width:35px; height: 35px"></image>
        </view>
        <view class="weui-grid__label">红底</view>
    </a>
    <a class="weui-grid">
        <view class="weui-grid__icon">
            <image src="../../images/blue.png"style="margin-right: 16px;vertical-align: middle;width:35px; height: 35px"></image>
        </view>
        <view class="weui-grid__label">蓝底</view>
    </a>
</view>
<view class="weui-grids">
    <a class="weui-grid">
        <view class="weui-grid__icon">
            <image src="../../images/xiaoyi.png" style="margin-right: 16px;vertical-align: middle;width:35px; height: 35px"></image>
        </view>
        <view class="weui-grid__label">小一寸</view>
    </a>
    <a class="weui-grid">
        <view class="weui-grid__icon">
            <image src="../../images/yi.png" style="margin-right: 16px;vertical-align: middle;width:35px; height: 35px"></image>
        </view>
        <view class="weui-grid__label">一寸<png/view>
    </a>
    <a class="weui-grid">
        <view class="weui-grid__icon">
            <image src="../../images/dayi.png"style="margin-right: 16px;vertical-align: middle;width:35px; height: 35px"></image>
        </view>
        <view class="weui-grid__label">大一寸</view>
    </a>
</view>
<view class="weui-btn-area">
    <button class="weui-btn" bindtap="showTopTips" hover-class="bg_red">下载</button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

grid_demo.wxss

.page{background-color:var(--weui-BG-2)}image{margin:4px 0}
.weui-uploader__input-box{
  width: 148px;
  height: 207px;
  margin-top: 20px;
  margin-left: 50rpx;
  margin-right: 50rpx;
  margin-bottom:40rpx;
}
.wrapper {
  position: fixed;
  top: 0rpx;
  display: flex;
  width: 100%;
  height: 50rpx;
  justify-content: space-around;
  background-color: #fff;
  z-index: 9999;
}
.weui-uploader__input-box{
  width: 148px;
  height: 207px;
  margin-top: 40px;
  margin-left: 50rpx;
  margin-right: 50rpx;
  margin-bottom:40rpx;
}
.weui-uploader__img{
  width: 148px;
  height: 207px;
  margin-top: 40px;
  margin-left: 50rpx;
  margin-right: 50rpx;
  margin-bottom:40rpx;
}
.image_color{
  width: 148px;
  height: 207px;
  margin-top: 25px; 
}
.weui-btn{
  background-color: #e94f4f;
}
.bg_red{
  background-color: #CF3439;
}
.flex{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.weui-check__label{
  background-image: url(**图片用网站base64转换);
  background-repeat:no-repeat;
  background-size:100% 100%;
 -moz-background-size:100% 100%;
}
.weui-grid__icon{
  margin-top: 40rpx;
  margin-bottom:40rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

后小伙伴更改为如下页面并实现点击确认功能。