日期	工作内容
2020年8月12日	网页前端架构，素材查找，小程序前端架构
2020年8月13日	网页、小程序页面完善，提交网页与小程序前端文件

文章目录

一、网页
- （一）页头
- - （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.weixin.qq.com/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.weixin.qq.com/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.weixin.qq.com/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.weixin.qq.com/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 2020 Chuangqingchun</p><div class="r"><a href="https://baike.baidu.com/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.js
App({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 (https://github.com/weui/weui-wxss)* Copyright 2020 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;
}

网页+微信小程序UI设计及前端开发（第二周）相关推荐

uniapp打包微信小程序详细步骤【前端开发】
目录 I.预准备:注册微信小程序 II.打包发布 I.预准备:注册微信小程序首先进入微信公众平台,注册自己的微信小程序,完成个人信息配置,做好准备工作. 其次是准备好自己的uniapp工程文件,打开 ...
微擎微信小程序吃客部族微信小程序V2.3.1 前端开发+后端开发
微擎小程序吃货部落小程序V2.3.1 前端+后端更新动态: 版本号:2.3.1 - 平台版 1.优化登陆授权方式注:需更新小程序前端版本号:2.3.0 - 平台版 1.新增手机端操作订单发货 ...
web界面左边菜单设计_微信小程序UI设计规范
第一部分:概述微信小程序,大家应该都不陌生,从2018年开始,小程序迅猛发展,小程序依托微信,凭借"触手可及用完即走"的用户体验备受青睐.现已为各大企业广泛采用.今天就给大家分享 ...
5个非常实用的小程序UI设计模板分享
在互联网飞速发展的时代,手机逐渐成为工作.学习和生活的必需品.小程序作为一种无需下载和安装即可使用的应用程序,因其快速.方便.强大的功能而受到用户的喜爱.小程序无处不在,随时可用,用完就走.随着需求市 ...
高颜值微信小程序 UI 组件库！
Vant Weapp Vant 是一个轻量.可靠的移动端组件库,由有赞于 2017 年开源. Github(⭐️ 16.5k):github.com/youzan/vant- iView Weapp ...
社区团购微信小程序的设计与实现
目录 1 系统简介 2 系统相关技术 2.1微信开发者工具 2.2前端开发技术 2.3后端开发技术 2.4数据库技术 3 需求分析 3.1 功能模块 3.1.1 系统功能模块模型 3.2 系统核心业务 ...
《微信小程序商城界面设计实战》--学习笔记作业
一.学习笔记 1.注释:wxml文档注释: css文档注释:/** **/ js文档注释:单行注释以"//"开头:多行注释以"/"开头,以"/&quo ...
【毕业设计_课程设计】在线免费小说微信小程序的设计与实现（源码+论文）
文章目录 0 项目说明 1 系统介绍 1.1 业务层面 1.2 产品层面 1.3 技术层面 2 项目运行 3 项目截图 3.1 小程序 3.2 后台管理系统 3.3 论文概览 4 项目源码 0 项目说 ...
当前最热门的微信小程序UI组件库
1.WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progre ...

网页+微信小程序UI设计及前端开发（第二周）

文章目录

一、网页

（一）页头

（1）logo及导航栏

（2）banner

（二）主体

（1）第一部分-使用场景

（2）第二部分-实际操作

（3）第三部分-热门资讯

（三）页尾

二、微信小程序

（1）主页面

（2）“开始转换”跳转页面

（3）“我的”页面

网页+微信小程序UI设计及前端开发（第二周）相关推荐

最新文章

热门文章