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 不再生效

        全局窗口配置如下：

{
    "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属性。

<!-- 顶部搜索框的实现 -->
<view id="searchOuterView">
  <view id="searchInnerView">
    <image src="/images/@2x_find.png"></image>
    <text> 搜索</text>
  </view>
</view>

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        是否采用衔接滑动

<!-- 轮播图 -->
<!-- 
  swiper组件是用来定义滑块视图容器; swiper-item就是每一个滑块;
  我们需要展示三张图片,三张图片的轮播,那么也就是说需要三个swiper-item
-->
<swiper indicator-dots="{{indicatorDots}}" indicator-active-color="{{activeColor}}" autoplay="{{autoplay}}"
  interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
  <!-- 
    block是一个辅助性组件,它不会有任何展示效果; 
    wx:for 用来定义for循环,wx:for="数组"
    {{表达式}} wxml的插值表达式,从js的data里面引用值;
      {{background}},从js的data中获取background对应的值
    在wxml页面中需要使用的数据,我们最好都定义在data中
  -->
  <block wx:for="{{imgUrls}}" wx:key="*this">
    <swiper-item>
      <!-- swiper-item里面承载的是一张图片,不同的swiper-item承载的不同图片 -->
      <image src="{{item}}"></image>
    </swiper-item>
  </block>
</swiper>

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；

<!-- 导航菜单 -->
<view id="navView">
  <view class="navItemView">
    <image src="/images/@2x_ceping.png"></image>
    <text>心理测评</text>
  </view>
  <view class="navItemView">
    <image src="/images/@2x_yuyue.png"></image>
    <text>咨询预约</text>
  </view>
  <view class="navItemView">
    <image src="/images/@2x_dayi.png"></image>
    <text>心理答疑</text>
  </view>
  <view class="navItemView">
    <image src="/images/@2x_zhishi.png"></image>
    <text>心理知识</text>
  </view>
  <view class="navItemView">
    <image src="/images/@2x_FM.png"></image>
    <text>FM</text>
  </view>
  <view class="navItemView">
    <image src="/images/@2x_gongyi.png"></image>
    <text>公益中心</text>
  </view>
</view>

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定义图片、文本；

<!-- 在线客服 -->
<view id="onlineView">
  <image src="/images/@2x_zixunpeixun.png"></image>
  <text> 咨询助理在线客服</text>
  <!-- 右箭头实现 -->
  <view class="arrow"></view>
</view>

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里面定义文本和右箭头

<!-- 精选文章 -->
<view id="hotArticleView">
  <!-- 文章总标题 -->
  <view id="hotArticleTitleView">
    精选文章
  </view>
  <!-- 文章列表 -->
  <view class="articleView">
    <view>
      <image src="/images/article01.png"></image>
    </view>
    <view class="articleContent">
      <view class="articleTitle">
        你活出自我的样子,真美
      </view>
      <view class="articleDesc">
        千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
      </view>
    </view>
  </view>
  <view class="articleView">
    <view>
      <image src="/images/article02.png"></image>
    </view>
    <view class="articleContent">
      <view class="articleTitle">
        你活出自我的样子,真美
      </view>
      <view class="articleDesc">
        千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
      </view>
    </view>
  </view>
  <view class="articleView">
    <view>
      <image src="/images/article03.png"></image>
    </view>
    <view class="articleContent">
      <view class="articleTitle">
        你活出自我的样子,真美
      </view>
      <view class="articleDesc">
        千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
      </view>
    </view>
  </view>

  <!-- 查看更多 -->
  <view id="moreView"> 
    <text>查看更多</text>
    <view class="arrow"></view>
  </view>
</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，在其中定义一张图片；

<!-- 请求回答 -->
<view id="askView">
  <image src="/images/@2x_fudong.png"></image>
</view>

7.2 样式实现

        1、设置图片的大小

        2、给askView添加固定定位（无论页面内容怎么滚动，元素一致在窗口的指定位置），设置对应的位置即可；

/* 请求回答 */
#askView{
  position: fixed;
  bottom: 100rpx;
  right: 10rpx;
}

#askView > image{
  width: 100rpx;
  height: 100rpx;
}