日期	工作内容
2020年8月16日	（因涉及版权问题）图片素材重新查找
2020年8月17日	图片上传
2020年8月18日	小程序授权判断完善，小程序跳转页面新架构
2020年8月19日	证件照尺寸用途整理，提交小程序前端文件

文章目录

一、资料
- （1）目前iconfont可商用插画
- （2）证件照尺寸用途汇总
二、小程序完善
- （1）“开始转换”授权登陆判断
- （2）跳转页面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);}})}}})}
})

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

（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>

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;
}

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

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

关于微信小程序授权登陆之后需要在个人信息页展示信息，如微信头像，昵称这件事
开发时使用uniapp进行开发,不过用什么开发都不重要. 在搞完微信授权登陆后,又遇到需要把用户昵称和头像展示在个人信息页的情况,在试了很多方法后,发现了便利的方法. 有想过从数据库获取数据,也想过从 ...
微信小程序--札记与贺卡项目前端页面UI设计实现
这周因为忙着开学准备以及开学之后的事情,所以没有多余的时间去学习另外的知识,只是在有限的时间内抓紧完成了这周布置的任务-札记与贺卡项目的UI设计. 主要是通过千图网和图怪兽寻找灵感进行素材的制作,或者 ...
微信小程序授权登陆，解密encryptedData出现乱码问题
前端传过来的encryptedData 用base64_decode解密后出现乱码解决方法: 用get方式传加密的字符串时,接收到以后,字符串里包含的"+"会被替换成" ...
微信小程序注册/登陆，若依后台获取token
微信小程序注册/登陆,若依后台获取token 后端接口: @ApiOperation(value = "小程序登入", httpMethod = "POST") ...
PHP快速实现微信小程序授权
小程序开发讲究的就是一个敏捷软件开发模式,作为微信小程序授权也有多个项目的积累,所以想贴出来代码,让需要用到的朋友拿来即用(当然前提是需要修改自己的小程序appid和秘钥). 前端调用wx.login ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
新版微信小程序授权登录流程及问题汇总（getUserProfile）
问题来源:前不久去面试的时候有面试官问我你有自己的博客啥的吗?只能很尴尬的说没有.其实一直想有一个属于自己的博客啥的去记录自己在开发过程中遇到的问题,正好现在微信小程序比较流行,就花了两天自己搞了一个 ...
微信小程序授权登录第一次总是失败，第二次登录便正常了
微信小程序授权登录第一次总是失败,第二次登录便正常了错误流程调用用户点击授权用户信息按钮 ===> 调用wx.login( )生成code发送给后台生成session_key解密 ===& ...
微信小程序授权获取用户信息和手机号码
微信小程序授权获取用户信息和手机号码 1.微信官方文档登录:https://developers.weixin.qq.com/miniprogram/dev/framework/open-abili ...

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