03_心理咨询_微信小程序项目实战_首页静态效果实现
一、导航栏和tabBar
1.1 全局配置介绍
微信小程序端中实现导航栏和tabBar，是通过配置实现的；这是区别于移动端开发的点；
参考文档： https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
小程序的配置分为三部分：
全局配置：对微信小程序进行全局配置，它是对整个视口(可视化窗口)的设置；
页面配置：对本页面的窗口表现进行配置。
sitemap 配置：对微信小程序的索引规则的配置。
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：
1.1.1 entryPagePath
指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。
{
"entryPagePath": "pages/index/index"
}1.1.2 pages
用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。
小程序中新增/减少页面，都需要对 pages 数组进行修改。
定义四个tabBar页面：
{
"pages": [
"pages/index/index",
"pages/consult/consult",
"pages/course/course",
"pages/my/my"
]
}1.1.3 window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
| 属性 | 类型 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色，如 #000000 |
|
| navigationBarTextStyle | string | white | 导航栏标题颜色，仅支持 black / white |
|
| navigationBarTitleText | string | 导航栏标题文字内容 | ||
| navigationStyle | string | default | 导航栏样式，仅支持以下值：default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。 |
iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | string | dark | 下拉 loading 的样式，仅支持 dark / light |
|
| backgroundColorTop | string | #ffffff | 顶部窗口的背景色，仅 iOS 支持 | 微信客户端 6.5.16 |
| backgroundColorBottom | string | #ffffff | 底部窗口的背景色，仅 iOS 支持 | 微信客户端 6.5.16 |
| enablePullDownRefresh | boolean | false | 是否开启全局的下拉刷新。 | |
| onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为 px。 | |
| pageOrientation | string | portrait | 屏幕旋转设置，支持 auto / portrait / landscape |
- 注 1：HexColor（十六进制颜色值），如"#ff00ff"
- 注 2：关于
navigationStyle- iOS/Android 客户端 7.0.0 以下版本，
navigationStyle只在app.json中生效。 - iOS/Android 客户端 6.7.2 版本开始，
navigationStyle: custom对web-view组件无效 - 开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉
- Windows 客户端 3.0 及以上版本，为了给用户提供更符合桌面软件的使用体验，统一了小程序窗口的导航栏，
navigationStyle: custom不再生效
- iOS/Android 客户端 7.0.0 以下版本，
全局窗口配置如下：
{
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "十方智育",
"navigationBarTextStyle": "black",
"navigationStyle": "default",
"backgroundColor": "#eee",
"onReachBottomDistance": 60
}
}1.1.4 tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
| 属性 | 类型 | 必填 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默认颜色，仅支持十六进制颜色 | ||
| selectedColor | HexColor | 是 | tab 上的文字选中时的颜色，仅支持十六进制颜色 | ||
| backgroundColor | HexColor | 是 | tab 的背景色，仅支持十六进制颜色 | ||
| borderStyle | string | 否 | black | tabbar 上边框的颜色， 仅支持 black / white |
|
| list | Array | 是 | tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab |
||
| position | string | 否 | bottom | tabBar 的位置，仅支持 bottom / top |
|
| custom | boolean | 否 | false | 自定义 tabBar，见详情 |
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pagePath | string | 是 | 页面路径，必须在 pages 中先定义 |
| text | string | 是 | tab 上按钮文字 |
| iconPath | string | 否 | 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。 |
| selectedIconPath | string | 否 | 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。 |
tabBar配置如下：
{
"tabBar": {
"color": "#898989",
"selectedColor": "#87cefa",
"list": [{
"pagePath": "pages/index/index",
"text": "主页",
"iconPath": "/images/@2x_home_line.png",
"selectedIconPath": "/images/@2x_home.png"
},
{
"pagePath": "pages/consult/consult",
"text": "咨询",
"iconPath": "/images/@2x_talk_line.png",
"selectedIconPath": "/images/@2x_talk.png"
},
{
"pagePath": "pages/course/course",
"text": "课程",
"iconPath": "/images/@2x_class_line.png",
"selectedIconPath": "/images/@2x_class.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/images/@2x_my_line.png",
"selectedIconPath": "/images/@2x_my.png"
}
]
}
}1.2 完整配置
{
"entryPagePath": "pages/index/index",
"pages": [
"pages/index/index",
"pages/consult/consult",
"pages/course/course",
"pages/my/my"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "十方智育",
"navigationBarTextStyle": "black",
"navigationStyle": "default",
"backgroundColor": "#eee",
"onReachBottomDistance": 60
},
"tabBar": {
"color": "#898989",
"selectedColor": "#87cefa",
"list": [{
"pagePath": "pages/index/index",
"text": "主页",
"iconPath": "/images/@2x_home_line.png",
"selectedIconPath": "/images/@2x_home.png"
},
{
"pagePath": "pages/consult/consult",
"text": "咨询",
"iconPath": "/images/@2x_talk_line.png",
"selectedIconPath": "/images/@2x_talk.png"
},
{
"pagePath": "pages/course/course",
"text": "课程",
"iconPath": "/images/@2x_class_line.png",
"selectedIconPath": "/images/@2x_class.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/images/@2x_my_line.png",
"selectedIconPath": "/images/@2x_my.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}1.3 删除自带的logs页面
1、删除小程序根目录下的 app.json 文件中pages里面的logs路径配置；
2、删除logs目录；
二、搜索框
结合效果图和标注图，我们可以分析得出结论：搜索框区域是由两个容器组成的；
一个外部容器 和 一个内部容器；
外部容器包裹内部容器；而且内部容器正好在外部容器的居中(水平垂直居中)位置
微信小程序的一个页面对应了四个文件，js文件、json文件、wxml文件、wxss文件
wxml文件 -> html文件
wxss文件 -> css文件
js文件 -> js文件
json文件 -> 配置文件
app.json 全局配置文件
index/my/course/..json文件 页面配置文件
2.1 页面结构
1、删除index.wxml里面的demo代码；
2、在index.wxml文件中定义两个嵌套view，布局容器的特点：宽度占据100%视口，但是高度是随着内容；
在微信小程序中，定义布局容器使用的是view；可以在view里面定义内容；
3、在内部view引入图片和文字；
在微信小程序中，定义图片使用的是image组件；通过image组件的src属性引入图片；
在微信小程序中，定义部分文字，可以使用text组件；
4、有了结构之后，效果没有达到我们的预期，那么我们需要添加修饰；添加修饰，需要区分不同的元素，那么我们可以给组件添加id属性。
搜索
2.2 样式实现
微信小程序的样式都是写在对应的wxss文件中；
1、删除index.wxss里面的demo样式代码；
2、搜索图片太大，我们可以给这个图片设置大小;
通过searchInnerView查找图片
#searchInnerView > image ->选择id为searchInnerView组件里面的image组件
标注图里面的pt，在微信小程序使用的单位是rpx；
1pt = 1px = 2rpx;
3、给搜索文字设置大小和文字颜色；
给搜索文本之前添加一个空格，可以让图片和文字拉开一点间距；
4、图片和文字居中，给searchInnerView设置内容居中；
5、给searchInnerView设置宽、高、背景颜色、边框、圆角；
6、图片和文字垂直水平居中，并且对齐；
6.1 给searchInnerView里面的文字设置行高
6.2 给图片和文字分别设置垂直对齐方式
7、给searchOuterView设置内边距
内边距：边框到内容之间的距离；
/* 顶部搜索框样式 */
#searchOuterView{
/* 设置内边距 */
padding: 15rpx;
}
#searchInnerView{
/* 内容居中 */
text-align: center;
/* 设置宽高 */
width: 720rpx;
height: 58rpx;
/* 设置背景颜色 */
background: #EEEEEE;
/* 设置边框 */
border: 2rpx solid #ECECEE;
/* 设置边框圆角 */
border-radius: 8rpx;
/* 设置行高 */
line-height: 52rpx;
/* 设置边框包含在宽高之内 */
box-sizing: border-box;
}
#searchInnerView > image{
/* 给图片设置宽和高 */
width: 36rpx;
height: 36rpx;
/* 设置垂直对齐方式 */
vertical-align: middle;
}
#searchInnerView > text{
/* 给文字设置大小 */
font-size: 24rpx;
/* 给文字设置颜色 */
color: #B2B2B2;
/* 设置垂直对齐方式 */
vertical-align: middle;
}三、轮播图
3.1 页面结构
微信小程序的轮播图特别简单即可实现，因为微信给我们提供了轮播图组件；
swiper组件文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
1、从swiper组件文档的最底部的wxml中复制swiper组件的相关代码；
2、从swiper组件文档的最底部的JavaScript中复制data数据，放在index.js的data里面；
把index.js里面原有的data数据给删掉；
3、把swiper-item里面的view改成image，因为每个滑块展示出来的都是一张图片；
4、swiper-item是定义在block wx:for这个语法里面,wx:for是引用的js里面data的数据，data里面对应的数组值有几个，那么就会生成几个swiper-item；
4.1 wx:for引用的值改为imgUrls,这样是为了见名知意
4.2 把imgUrls数组里面写成需要使用的图片的路径
4.3 在image组件中引入对应的图片路径
5、通过swiper相关属性来设置自动轮播、轮播间隔、轮播方向等；
indicator-dots 是否显示面板指示点
indicator-active-color 当前选中的指示点颜色
autoplay 是否自动切换
interval 自动切换时间间隔
duration 滑动动画时长
circular 是否采用衔接滑动
data: {
imgUrls: ['/images/img1.png', '/images/img2.png', '/images/img3.png'],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 3500,
duration: 500,
activeColor: "#fff",
circular: true
},3.2 样式实现
1、标注图对于轮播图区域的高度定义的是160pt，但是实际开发的时候，为了展示效果更好，调高了一些，那么我们高度使用200pt；给swiper设置高度；
2、给图片设置宽、高；
/* 轮播图样式 */
swiper{
height: 400rpx;
}
/* 选择swiper里面的后代元素image */
swiper image{
width: 750rpx;
height: 400rpx;
}四、导航菜单
4.1 页面结构
通过分析标注图，我们得出结论，一个大的view，包含了6个小的view，每个小view里面都有一个图片和文字；
1、定义一个view，用来承载所有的导航菜单，给其定义id：navView
2、在navView里面定义6个子view，给其定义class：navItemView
3、在每个navItemView里面定义image和text；
心理测评
咨询预约
心理答疑
心理知识
FM
公益中心
4.2 样式实现
在微信小程序里面，所有的image都默认赋予了指定的宽高；
1、给navItemView里面的所有图片设置宽高；
2、给navItemView设置宽度，宽度和图片宽度一致，设置文本居中；
view组件的特点是独占一行，及时设置了宽高；
3、想要让navItemView不独占一行，有很多种方式，但是在移动端更多的是使用flex布局；
flex布局教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
3.1 给navView应用flex布局，采用了flex布局之后，所有的子元素都会排列在一行；
3.2 给navView设置换行显示；
3.3 给navItemView设置左右间距，我们称之为外边距；
3.4 给navView设置高度。
3.5 给navView设置多根轴线的对齐方式。
/* 导航菜单样式 */
#navView{
/* 应用flex布局 */
display: flex;
/* 设置换行显示 */
flex-wrap: wrap;
height: 464rpx;
/* 多轴线的垂直排列方式 */
align-content:space-around;
font-size: 26rpx;
/* 字体加粗 */
font-weight: bold;
}
.navItemView{
width: 150rpx;
text-align: center;
/* 设置左右外边距 */
margin: 0 50rpx;
}
.navItemView > image{
width: 150rpx;
height: 150rpx;
}五、在线客服
理念：不要添加无意义的组件或标签；
给页面添加一个整体的灰色背景色，然后给必要的组件添加白色背景；
5.1 页面结构
1、定义一个view，用来承载在线客服相关内容，给其定义id：onlineView
2、在onlineView定义图片、文本；
咨询助理在线客服
5.2 样式实现
1、给onlineView里面的图片设置宽、高；
2、给onlineView设置高度、背景颜色、上下外边距、左右内边距、设置行高；
3、给onlineView文本设置字体大小、字体加粗；
设计图上的24pt有点问题，我们只需要26rpx即可；
记得把导航菜单里面的字体也改成26rpx 加粗；
4、图片和文字对齐；
右箭头实现
右箭头的实现：一个正方形、定义上边框和右边框、旋转45度、然后通过定位放到指定位置；
给arrow元素设置 position: absolute; 使用绝对定位，绝对定位是相对于父元素进行定位，前提父元素必须具有定位属性。
给#onlineView设置position: relative; 让父元素具有定位属性；
/* 在线客服样式 */
#onlineView{
height: 88rpx;
background: #fff;
/* 设置上下外边距 */
margin: 24rpx 0;
/* 设置左右内边距 */
padding: 0 30rpx;
line-height: 88rpx;
position: relative;
}
#onlineView > image{
width: 60rpx;
height: 60rpx;
vertical-align: middle;
}
#onlineView > text{
font-size: 26rpx;
/* 字体加粗 */
font-weight: bold;
vertical-align: middle;
}
/* 右箭头的实现原理: 一个正方形,定义上/右边框,旋转45度 */
.arrow{
width: 16rpx;
height: 16rpx;
border-top: 4rpx solid #999;
border-right: 4rpx solid #999;
/* 旋转45度 */
transform: rotate(45deg);
/* 调整位置 */
position: absolute;
right: 30rpx;
top: 38rpx;
}六、精选文章
6.1 页面结构
1、定义view，用来承载文章标题、所有文章列表、查看更多；给其添加id：hotArticleView
2、定义view，用来承载文章总标题，给其添加id：hotArticleTitleView
3、定义三个view，用来承载三个精选文章列表，这三个view，效果都是一样的，区别点在于图片和文字不同；给这三个view添加class：articleView
4、在articleView里面分了左右两部分
4.1 在articleView定义两个子view；左边承载图片，右边承载文字；给右侧的view添加class：articleContent；
4.2 在articleContent分为上下两部分，定义两个子view，分别添加class：articleTitle、articleDesc；
5、定义view，用来表示查看更多，给其添加id：moreView
在这个view里面定义文本和右箭头
精选文章
你活出自我的样子,真美
千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
你活出自我的样子,真美
千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
你活出自我的样子,真美
千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
查看更多
6.2 样式实现
1、给hotArticleView添加左右内边距、背景颜色；
2、给hotArticleTitleView设置高度、字体大小、字体粗细；下边框、行高；
3、给articleView 里面的图片设置大小；
4、给articleView应用flex布局、上下内边距、下边框；
5、给articleView 里面的图片设置右外边距；
6、给右侧文章标题和描述内容分别设置文字大小、颜色、行高；
文章标题设置28rpx；
7、给moreView设置高度、行高、相对定位；
8、给moreView里面的文字设置大小、颜色；
9、给hotArticleView添加下外边距；
/* 精选文章 */
#hotArticleView{
padding: 0 30rpx;
background: #fff;
margin-bottom: 24rpx;
}
#hotArticleTitleView{
height: 88rpx;
font-size: 30rpx;
font-weight: bold;
border-bottom: 1rpx solid #F1F1F1;
line-height: 88rpx;
}
.articleView {
display: flex;
padding: 30rpx 0;
border-bottom: 1rpx solid #F1F1F1;
}
.articleView image{
width: 120rpx;
height: 120rpx;
margin-right: 20rpx;
}
.articleTitle{
font-size: 28rpx;
font-weight: bold;
line-height: 50rpx;
}
.articleDesc{
font-size: 26rpx;
color: #A9A9A9;
line-height: 35rpx;
}
#moreView{
height: 88rpx;
line-height: 88rpx;
font-size: 28rpx;
color: #A6A6A6;
position: relative;
}七、请求回答
7.1 页面结构
定义一个view，给其添加id：askView，在其中定义一张图片；
7.2 样式实现
1、设置图片的大小
2、给askView添加固定定位（无论页面内容怎么滚动，元素一致在窗口的指定位置），设置对应的位置即可；
/* 请求回答 */
#askView{
position: fixed;
bottom: 100rpx;
right: 10rpx;
}
#askView > image{
width: 100rpx;
height: 100rpx;
}