文章目录
一、网页（一）页头（1）logo及导航栏（2）banner（二）主体（1）第一部分-使用场景（2）第二部分-实际操作（3）第三部分-热门资讯（三）页尾二、微信小程序（1）主页面（2）“开始转换”跳转页面（3）“我的”页面一、网页
网页前端代码参考:HTML/CSS——PC端博文尚美网页
调整后如图：
（一）页头
（1）logo及导航栏
图片处理步骤：
①logo及“创青春”三字源于创青春微信公众号，经PS抠图（选择-色彩范围-点击彩色部分-反选-ctrl+J复制图层-导出）分别处理形成；
②将处理后的两张图片上传至Word，使用取色器取“创青春”紫色对“证件照换底色”进行处理，截图形成“logo.png”。
HTML
<body><div id="head" class="container"><div class="head_logo l"><img src="./images/logo.png" alt="创青春" title="创青春LOGO"></div><ul class="head_menu r"><li><a herf="#">注册/登录</a></li></ul></div>
CSS
.container{width: 1080px;margin:0 auto;position: relative;}.container-fluid{width: 100%;}#head{height: 81px;}#head .head_logo{width: 162px;height: 40px;margin-top: 10px;}#head .head_menu{font-size: 14px;line-height: 81px;}#head .head_menu li{float: left;margin-left: 58px; }
（2）banner
制作方法参考上一篇博客：证件照换底色·网页图片设计·第一次项目技术总结
HTML
<style>.banner {padding: 80px;text-align: center;/* background: #1abc9c; */height: 520px;color: white;background:url("./images/banner.png");background-size:100% 100%;background-repeat: no-repeat;}</style><div class="bannerbox"><div class="banner"></div></div>
CSS
#banner{position: relative;}#banner .bannerbox{height: 40px;position: relative;}
（二）主体
（1）第一部分-使用场景
图片来源于iconfont插画库，配色是小伙伴调的：Grape 20个场景插画（后因版权不明确，未使用）
HTML
<div id="service" class="container"><div class="area_title"><h2>使用场景</h2><p>Usage Scenario</p></div><ul class="service_list"><li><div><img src="./images/求职.png"></div></li><li><div><img src="./images/学校.png"></div></li><li><div><img src="./images/备用.png"></div></li></ul></div>
CSS
#service{min-height: 407px;}#service .service_list{text-align: center;margin-top: 34px;}#service .service_list li{list-style:none; /* 将默认的列表符号去掉 */padding:0; /* 将默认的内边距去掉 */margin:0; /* 将默认的外边距去掉 */float: left; /* 往左浮动 */display: block;margin-left:-65px;}#service .service_list div{width: 10px;height: 10px;margin: 0 180px;}#service .service_list li:nth-last-of-type(1) div{background-image: url(./images/求职.png)}#service .service_list li:nth-last-of-type(2) div{background-image: url(./images/学校.png)}#service .service_list li:nth-last-of-type(3) div{background-image: url(./images/备用.png)}#service .service_list h3{font-size: 18px;color: #434343;line-height: 36px;margin-top: 25px;}#service .service_list p{font-size: 14px;color: #6d6d6d;line-height: 22px;}
（2）第二部分-实际操作
图片来源于iconfont插画库：头像（后因版权不明确，未使用）
图片处理步骤：
①图片颜色处理：经PS抠图（选择-色彩范围-点击彩色部分-反选-ctrl+J复制图层-导出）、换底色（矩形选框工具-填充-颜色-导出）分别处理形成；
②（因该部分图片为可点击按钮，故想增加阴影）图片阴影处理：使用PPT处理而成（点击图片-效果-阴影-内部），具体参数如下：
HTML
<script>window.onload = function(){ myimage.onclick = function(){ p2=document.getElementById("myimage2")p3=document.getElementById("myimage3")if (this.src.search("white_color.png") != -1) {this.src = "./images/白白1.png"; } else{this.src = "./images/white_color.png"; p2.src = "./images/红红1.png"; p3.src = "./images/蓝蓝1.png"; } } myimage2.onclick = function(){ p2=document.getElementById("myimage")p3=document.getElementById("myimage3")if (this.src.search("red_color.png") != -1) {this.src = "./images/红红1.png"; } else{this.src = "./images/red_color.png";p2.src = "./images/白白1.png"; p3.src = "./images/蓝蓝1.png"; } } myimage3.onclick = function(){ p2=document.getElementById("myimage")p3=document.getElementById("myimage2")if (this.src.search("blue_color.png") != -1) {this.src = "./images/蓝蓝1.png"; } else{this.src = "./images/blue_color.png"; p2.src = "./images/白白1.png"; p3.src = "./images/红红1.png";} } }<ul class="case_list clear"><li><img id="myimage" src="./images/白白1.png" alt></li><li><img id="myimage2" src="./images/红红1.png" alt></li><li><img id="myimage3" src="./images/蓝蓝1.png" alt></li></ul> <div align="center"><img class="case_img" src="./images/shangchuan.png"></div></div><div class="case_btn1"><a href="#">点击下载</a></div></div></div>
CSS
.area_title{margin-top: 61px; text-align: center;}.area_title p{font-size: 14px;line-height: 34px;color: #9f9f9f;}.area_title1 p{font-size: 25px;line-height: 34px;color: #4e4e4e;font-family: "楷体";}.area_title h2{font-size: 20px;line-height: 20px;height: 20px;color: #CF2121;font-weight: normal}#case{background-color: #f8f8f8;}#case .container{min-height: 880px;overflow: hidden;}#case .area_title{margin-top: 55px;text-align: center;}#case .area_title1{margin-top: 55px;text-align: center;}#case .area_title h2{color:#CF2121 }#case .case_list{margin-top: 28px;}#case .case_list li{list-style:none; /* 将默认的列表符号去掉 */padding:0; /* 将默认的内边距去掉 */margin:0; /* 将默认的外边距去掉 */float: left; /* 往左浮动 */display: block;margin-left:120px;}#case .case_btn{width:176px;height: 37px;background-color:#CF2121;margin: 0 auto;border-radius: 25px;line-height: 37px; text-align: center;font-size: 14px;margin-top: 55px;}#case .case_btn a{display: block;width: 100%;height: 100%;color: white;}#case .case_btn1{width:176px;height: 37px;background-color:#a1a1a1;margin: 0 auto;border-radius: 25px;line-height: 37px; text-align: center;font-size: 14px;margin-top: 55px;}#case .case_btn1 a{display: block;width: 100%;height: 100%;color: white;}#case .case_img{width:200px;height: 285px; margin-top: 50px;}
（3）第三部分-热门资讯
图片处理：
PS调节不透明度
HTML
<div id="news" class="container"><div class="area_title"><h2>热门资讯</h2><p>POPULAR NEWS</p></div><dl><dt class="l"><img src="./images/标志.png" alt=""></dt><dd class="l"><ul class="news_list"><li><div class="news_date l"><i>12</i><span>Aug</span></div><div class="news_text l"><h3><a href="https://mp./s/UODVd0YafPnbT2eVdNA44Q" target="_black">上线了！上线啦！ “三下乡”社会实践活动平台小程序上线啦！</a></h3><p>大家期待许久的“‘三下乡’社会实践”平台小程序终于“千呼万唤始出来”啦！</p></div></li><li><div class="news_date l"><i>11</i><span>Aug</span></div><div class="news_text l"><h3><a href="https://mp./s/xp5py8m2nAI-VgQvf8_6Uw" target="_black">冷门or热门，专业怎么选？专业秘籍限量派发中，手慢无！</a></h3><p>学电竞专业的男孩子 学遗体修复的女孩子 电竞专业上课不能打游戏……</p></div></li><li><div class="news_date l"><i>11</i><span>Aug</span></div><div class="news_text l"><h3><a href="https://mp./s/SjFzeGz5Rw_rWYG8qs0ozw" target="_black">看！懂？来！第十二届“挑战杯”中国大学生创业计划竞赛系列活动重磅来袭！</a></h3><p>第十二届“挑战杯”中国大学生创业计划竞赛系列活动正式上线！</p></div></li><li><div class="news_date l"><i>11</i><span>Aug</span></div><div class="news_text l"><h3><a href="https://mp./s/fPa0Ic80yySrSpjft8epGQ" target="_black">叮！室友百景图请查收！</a></h3><p>假期居家时间余额不足……新消息提示……久未开学的你是否想念一起努（feng）力（feng）学（dian）习（dian）的室友？</p></div></li></ul></dd></dl></div>
CSS
#news{min-height: 450px;overflow: hidden;}#news .area_title{margin-top: 65px;text-align: center;}#news dl{margin-top: 48px;}#news dt{width:234px;}#news dd{width:846px;}#news .news_list{width: 100%}#news .news_list li{width: 50%;float: left;margin-bottom: 48px;}#news .news_date{width: 70px;height: 70px; border-right: 2px solid #dcdcdc;text-align: center;}#news .news_date i{font-size: 39px;color: #CF2121;display: block;font-weight: bold;}#news .news_date span{color: #999999;font-size: 20px;line-height: 36px;}#news .news_text{width: 310px;margin-left: 20px;}#news .news_text h3{font-size: 14px;}#news .news_text h3 a{color: #3f3f3f;}#news .news_text p{color: #4a4a4a;font-size: 12px;line-height: 21px;margin-top: 17px;}
（三）页尾
HTML
<div id="foot" class="container_fluid"><div class="container"><p class="l">Copyright Chuangqingchun</p><div class="r"><a href="/item/创青春/15824799?fr=aladdin#6" target="_black">About</a>|<a href="#">Back To TOP</a></div></div></div></body></html>
CSS
#foot{background-color: #CF2121;}#foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;}#foot div a{color: white;margin: 0 10px;}
二、微信小程序
tabBar图标来源于iconfont
app.js
//app.jsApp({onLaunch: function () {// 展示本地存储能力var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})// 获取用户信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo = res.userInfo// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},globalData: {userInfo: null}})
app.json
{"pages":["pages/index/index","pages/logs/logs","pages/grids/grid_demo"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#CF3439","navigationBarTitleText": "创青春·证件照换底色","navigationBarTextStyle":"white"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "转换","iconPath": "images/zhuanhuan.png","selectedIconPath": "images/zhuanhuan1.png"},{"pagePath": "pages/logs/logs","text": "我的","iconPath": "images/wode.png","selectedIconPath": "images/wode2.png"}],"color": "#000000","selectedColor": "#CF3439"},"sitemapLocation": "sitemap.json"}
引入微信WEUI组件库，方法：①下载WEUI，地址：Tencent/weui-wxss
将weui.wxss文件复制到小程序项目的根目录下；
②app.wxss在app.wxss中加入weui.wxss的引用- @import ‘weui.wxss’
app.wxss
/**app.wxss**/@import 'weui.wxss';
详细方法可见：
WeUI for 小程序–使用教程
（1）主页面
主页面我只添加了index.wxml的滚动广告条，其他都是小伙伴弄的~
index.wxml
<swiper indicator-dots="true" autoplay="true" duration="1000"style='height:{{imgheights[current]}}rpx;width:100%'bindchange="bindchange"><!--swiper-item只能包含一个节点再多会自动删除--><swiper-item><view><image class="weui-article__img" src="/images/cover.png" mode="aspectFit" bindload="imageLoad" style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"/></view></swiper-item><swiper-item><view><image class="weui-article__img" src="/images/cover.png" mode="aspectFit" bindload="imageLoad" style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"/></view></swiper-item><swiper-item><view><image class="weui-article__img" src="/images/cover.png" mode="aspectFit" bindload="imageLoad" style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;" /></view></swiper-item></swiper>
（2）“开始转换”跳转页面
①建立跳转页面文件夹：
②在app.json中加入路径:
"pages":["pages/index/index","pages/logs/logs","pages/grids/grid_demo"],
③给“开始转换”（bindtap=“bindClear”）按钮添加跳转路径:
bindClear: function(e) {wx.navigateTo({url: '../grids/grid_demo'})}
因单选部分引入了WEUI组件库，故勾勾颜色为绿色，后经更改weui.wxss，变为红色，方法如下：（小伙伴想到的↓）
（3）“我的”页面
logs.js
//logs.js//获取应用实例const app = getApp()Page({data: {motto: '你来啦',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo')},//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onLoad: function () {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse){// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}})
logs.json
{"navigationBarTitleText": "我的","usingComponents": {}}
logs.wxml
<!--logs.wxml--><view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view></view>
logs.wxss
/**logs.wxss**/.userinfo {display: flex;flex-direction: column;align-items: center;}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;}.userinfo-nickname {color: #aaa;}.usermotto {margin-top: 200px;}/*!* WeUI v2.3.0 (/weui/weui-wxss)* Copyright Tencent, Inc.* Licensed under the MIT license*/.button-sp-area{padding-top:15px;text-align:center}.weui-btn_mini{margin-right:4px}.top {background-color: #fff;padding: 10rpx;/* border-bottom: 2rpx solid #d0d0d0; */position: relative;height: 180rpx;display: flex;box-sizing: border-box;}.btn-logn {background-color: transparent;width: 100%;height: 100%;}.top image {position: absolute;left: 0rpx;height: 138rpx;width: 138rpx;margin-left: 25rpx;border-radius: 10rpx;border: 2rpx solid #d0d0d0;margin-top: 10rpx;}
