[移动开发]03_从零构建微信小程序项目_首页静态效果实现

课程目录：

01_从零构建微信小程序项目_项目概述

02_从零构建微信小程序项目_项目环境搭建

03_从零构建微信小程序项目_首页静态效果实现

持续更新中...

一、导航栏和tabBar

全局配置介绍

????????微信小程序端中实现导航栏和tabBar，是通过配置实现的；这是区别于移动端开发的点；

????????参考文档：?https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
?? ??? ?
????????小程序的配置分为三部分：
????????????????全局配置：对微信小程序进行全局配置，它是对整个视口(可视化窗口)的设置；
?? ??? ?????????页面配置：对本页面的窗口表现进行配置。
?? ??? ?????????sitemap 配置：对微信小程序的索引规则的配置。

????????小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：

entryPagePath

????????指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为?pages?列表的第一项。不支持带页面路径参数。

{
  "entryPagePath": "pages/index/index"
}

pages

????????用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的?.json,?.js,?.wxml,?.wxss?四个文件进行处理。

????????未指定?entryPagePath?时，数组的第一项代表小程序的初始页面（首页）。

????????小程序中新增/减少页面，都需要对 pages 数组进行修改。

? ? ? ? 定义四个tabBar页面：

{
    "pages": [
        "pages/index/index",
        "pages/consult/consult",
        "pages/course/course",
        "pages/my/my"
    ]
}

window

????????用于设置小程序的状态栏、导航条、标题、窗口背景色。

• 注 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
    }
}

tabBar

????????如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

? ? ? ? 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"
      }
    ]
  }
}

完整配置

{
  "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"
}

删除自带的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文件?? ?页面配置文件

页面结构

????????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>

样式实现

????????微信小程序的样式都是写在对应的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;
}

三、轮播图

页面结构

????????微信小程序的轮播图特别简单即可实现，因为微信给我们提供了轮播图组件；
????????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
  },

样式实现

????????1、标注图对于轮播图区域的高度定义的是160pt，但是实际开发的时候，为了展示效果更好，调高了一些，那么我们高度使用200pt；给swiper设置高度；
?? ?
????????2、给图片设置宽、高；

/* 轮播图样式 */
swiper{
  height: 400rpx;
}

/* 选择swiper里面的后代元素image */
swiper image{
  width: 750rpx;
  height: 400rpx;
}

四、导航菜单

页面结构

????????通过分析标注图，我们得出结论，一个大的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>

样式实现

????????在微信小程序里面，所有的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;
}

五、在线客服

????????理念：不要添加无意义的组件或标签；

????????给页面添加一个整体的灰色背景色，然后给必要的组件添加白色背景；

页面结构

????????1、定义一个view，用来承载在线客服相关内容，给其定义id：onlineView
?? ?
????????2、在onlineView定义图片、文本；

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

样式实现

????????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;
}

六、精选文章

页面结构

????????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>

?样式实现

????????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;
}

七、请求回答

页面结构

????????定义一个view，给其添加id：askView，在其中定义一张图片；

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

样式实现

????????1、设置图片的大小

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

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

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