日期 | 工作内容 |
---|---|
2020年8月16日 | (因涉及版权问题)图片素材重新查找 |
2020年8月17日 | 图片上传 |
2020年8月18日 | 小程序授权判断完善,小程序跳转页面新架构 |
2020年8月19日 | 证件照尺寸用途整理,提交小程序前端文件 |
一、资料
(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;
}
后小伙伴更改为如下页面并实现点击确认功能。