微信小程序-首页制作 - (图解+代码流程)

首页制作效果图

一、轮播图的制作

1. 首页轮播图 .wxml代码

swiper 和 swiper-item 是两个重要的组件，用于实现页面内元素的滑动展示效果，比如常见的轮播图、标签页切换等。👉了解更多组件

<!-- 轮播图区域 -->
<view>
  <swiper circular="true" indicator-dots="true" autoplay="true" interval="3000" duration="500">
  <swiper-item>
    <image src="/image/banner1.jpg" mode="widthFix"></image>
  </swiper-item>
  <swiper-item>
    <image src="/image/banner2.jpg" mode="widthFix"></image>
  </swiper-item>
  <swiper-item>
    <image src="/image/banner3.jpg" mode="widthFix"></image>
  </swiper-item>
  </swiper>
</view>
<!-- 轮播图区域结束 -->

2. swiper 和 swiper-item 组件

swiper 是一个滑动视图容器组件，它可以包含多个 swiper-item 子组件，并提供自动轮播、指示点、手势控制等功能。主要应用场景包括但不限于轮播图展示、页面导航标签切换等。

• circular： 是否采用衔接滑动，将实现无缝循环播放的效果。
• indicator-dots： 是否显示面板指示点。
• autoplay： 是否自动切换图片。
• interval： 自动切换时间间隔，单位为毫秒。
• duration： 滑动动画时长，单位为毫秒。

/* 轮播图布局样式 */
swiper {
  height: 200px;
  width: 100%;
}
swiper image {
  width: 100%;
}

二、滑动视图效果图

1. 首页滑动视图 .wxml代码

<!-- 滑动视图区域 -->
<View class="box">
  <scroll-view scroll-x="true">
    <view class="kcbox">
      <image src="/image/webzhuanye.jpg" mode="widthFix"/>
      <view>Web前端</view>
    </view>
    <view class="kcbox">
      <image src="/image/UI.jpg" mode="widthFix"/>
      <view>UI设计</view>
    </view>
    <view class="kcbox">
      <image src="/image/java.jpg" mode="widthFix"/>
      <view>Java全栈</view>
    </view>
    <view class="kcbox">
      <image src="/image/yunwei.jpg" mode="widthFix"/>
      <view>网络运维</view>
    </view>
    <view class="kcbox">
      <image src="/image/genzong.jpg" mode="widthFix"/>
      <view>就业案例</view>
    </view>
  </scroll-view>
</View>
<!-- 滑动视图区域结束 -->

scroll-view 组件

在微信小程序中，scroll-view 组件用于创建一个可滚动的视图区域，使得当内容超出其容器范围时，用户可以通过触摸屏幕进行滚动查看全部内容。这对于展示大量数据如新闻列表、商品列表、长文本等场景非常有用。👉了解更多组件

• scroll-x： 布尔值，默认为 false。设置为 true 时允许横向滚动。
• scroll-y： 布尔值，默认为 false。设置为 true 时允许纵向滚动。
• scroll-into-view： 字符串，用于指定滚动到某个特定元素（该元素的id），在初始化时或调用方法时生效。
• scroll-with-animation： 布尔值，默认为 false。设置为 true 时，滚动带有平滑的动画效果。

内容尺寸: 为了使 scroll-view 能够滚动，其内部内容的总尺寸必须大于 scroll-view 组件本身的尺寸。
布局限制: 在 scroll-view 中，浮动 (float) 不可用，使用 display: flex; 对于需要滚动的内容也可能无效。推荐使用固定布局或直接设置宽高。

2. 首页滑动视图 .wxss代码

/* 滚动视图布局样式 */
.box{
  white-space: nowrap;
  text-align: center;
}
.kcbox{
  width: 170rpx;
  height: 180rpx;
  display: inline-block;
  margin: 20rpx 0 20rpx 0;
}
.kcbox image{
  width: 120rpx;
  height: 120rpx;
  border-radius: 75rpx;
}

white-space: nowrap;

控制元素内文本的空白处理方式。它的效果是：不换行： 强制文本在同一行内显示，直到遇到文本的结尾或者遇到 < br > 标签才会换行。
这意味着，即使文本内容超过了其父容器的宽度，文本也不会自动换行到下一行，而是容器会尝试适应文本的宽度，可能导致水平滚动条出现，如果容器设置了适当的overflow 属性的话。

三、标题和学员作品图片布局效果图

1.标题和作品图片 .wxml代码

<!-- 学员作品区域 -->
<view class="zuopin">
  <!-- 学员作品文字区域 -->
    <xueyuanText wenzitext="学员作品" url="/pages/news/news" />
  <!-- 学员作品文字区域结束 -->

  <!-- 学员作品图片区域 -->
  <view class="tupianlie">
    <view class="zpbox">
      <image src="/image/xszp1.jpg" mode=""/>
      <view class="stutext">
        <view>Web前端</view>
        <view class="line"></view>
        <view class="yinwxt">web front end</view>
      </view>
    </view>
    <view class="zpbox">...
    </view>
    <view class="zpbox">...
    </view>
    <view class="zpbox">...<!-- 这里需要多少个复制多少个即可... -->
    </view>
    <view class="zpbox">...
    </view>
    <view class="zpbox">...
    </view>
    <view class="zpbox">...
    </view>
    <view class="zpbox">...
    </view>
  </view>
  <!-- 学员作品图片区域结束 -->

2.标题和作品图片 .wxss代码

display: flex;

作用： 将一个容器设为Flex布局。一旦设为Flex布局，其子元素就会按照Flex布局的规则进行排列。
特点： 使子元素能够沿着主轴（默认为水平方向）和交叉轴（垂直方向）进行排列，简化了复杂的对齐和布局问题。

flex-wrap: wrap;

默认值： nowrap，意味着所有项目都在一行内显示，即使溢出了容器也不换行。
当设置为 wrap： 如果Flex项目总宽度超过了容器的宽度，项目会换行显示，这样可以避免内容溢出并实现多行布局。

justify-content: space-around;

作用： 定义了Flex容器中主轴上（通常是水平方向）的对齐方式。
当设置为 space-around： 项目之间的空间相等，且项目与容器边缘的空间也相等。这意味着每个项目两侧的空间是相等的，这会在视觉上创造出一种“均匀分布”的效果。

/* 学员作品布局区域 */
.zuopin{
  background-color:#f3f0f8;
  width: 100%;
  height: 1300rpx;
}
.tupianlie{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.zpbox{
  margin-top: 10rpx;
  position: relative;
}
.zpbox image{
  width: 350rpx;
  height: 260rpx; 
  border-radius: 10rpx;
}
.stutext{
  color: white;
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 350rpx;
  height: 260rpx;
  line-height: 90rpx;
}
.line{
  height: 2rpx;
  width: 70rpx;
  background-color: white;
}
.yinwxt{
  text-transform:uppercase;
  letter-spacing: 5rpx;
  opacity: 0.5;
}

text-transform: uppercase;

作用： 这个属性用于控制文本中字母的大小写。当设置为 uppercase 时，文本中的所有字母都会被转换为大写字母。
应用场景： 常用于标题、按钮文字、品牌名等需要统一为大写的场景，以增强视觉效果或遵循设计规范。

letter-spacing: 5rpx;

作用： 这个属性用于增加或减少字符间的间距，即字符间距。5rpx 是一个具体的数值，表示字符间的额外空间量。rpx (responsive pixel) 是微信小程序中使用的长度单位，可以根据屏幕宽度自适应缩放。
应用场景： 增大字符间距可以让文本看起来更清晰、易读，特别是在标题或需要强调的文本中。减小间距则可以紧凑布局，但需注意不要影响阅读性。

opacity: 0.5;

作用： 这个属性用于设置元素的不透明度。值范围从0（完全透明）到1（完全不透明）。在这个例子中，0.5 表示元素的透明度为50%，也就是半透明状态。
应用场景： 常用于创建叠加效果、提示信息、背景装饰等，让元素在视觉上显得更加轻盈或营造层次感，同时不影响背后内容的可见性。

四、行业资讯区域效果图

行业资讯区域和学员作品区域类似，这里就不展示代码了

资讯标题超出部分隐藏显示省略号

1.超出部分隐藏显示 .wxml代码

<view class="newbox">
      <image src="/image/xwdt.jpg" mode=""/>
      <view class="newtext">
        <view class="newtext2">剪映，你不xczxcczc能不会的剪辑神器zxczxcczczczcz</view>
        <view class="newtext1">作者：张三--时间：2024-7-5</view>
      </view>
    </view>
    <view class="newbox">
      <image src="/image/xwdt.jpg" mode=""/>
      <view class="newtext">
        <view class="newtext2">剪映，你不能不会的剪辑神器zz</view>
        <view class="newtext1">作者：张三--时间：2024-7-5</view>
      </view>
    </view>

1.超出部分隐藏显示 .wxss代码

.newtext2{
  width: 420rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

overflow: hidden;

作用： 这个属性决定了当元素内容溢出其框时应如何处理。设置为 hidden 意味着任何超出元素框的内容都将被隐藏，不会显示出来。

text-overflow: ellipsis;

作用： 当文本溢出并且overflow被设置为hidden时，此属性用于指示如何显示溢出的文本。ellipsis表示用省略号（…）替代被修剪的文本部分，提示用户还有更多未显示的内容。

width: 420rpx;

作用： 设置元素的宽度为420rpx。rpx (responsive pixel) 是微信小程序中使用的长度单位，可以根据屏幕宽度自适应缩放。这个宽度限制是触发上述溢出省略效果的关键因素，当文本内容宽度超过这个设定值时，结合前面的样式，超出部分会被隐藏并以省略号显示。

white-space: nowrap;

作用： 这个属性控制元素中的空白如何处理以及文本是否换行。设置为 nowrap 意味着文本不会换行，即使在正常情况下文本应该折行的地方也会保持在同一行显示，这对于创建省略号效果至关重要，因为它确保文本不会自行换行而破坏省略号的显示。

五、创建动态组件

1.将头部学员作品标题封装成动态组件并动态引用

在 components 文件下创建组件

2.在创建好的组件 .wxml 中放入代码

<!-- 学员作品文字区域 -->
  <view class="zptitle">
    <view class="zptext">{{wenzitext}}</view>
    <navigator url="{{url}}" open-type="switchTab">
      <view class="zpmore"><text decode>更多&gt;</text></view>
    </navigator>
  </view>
<!-- 学员作品文字区域结束 -->

navigator

在微信小程序中，navigator 是一个非常重要的组件，它用于实现页面间的跳转功能。通过使用 navigator，用户可以从当前页面导航到其他页面，无论是同一个小程序内的页面还是外部的Web页面。

url 属性指定了要跳转的目标页面路径，hover-class 则定义了点击时的样式类名，用于触控反馈效果。

open-type=“switchTab”

作用： 此属性值会让导航直接在小程序的 tabBar 页面间进行切换，而不是像普通页面跳转那样堆叠在导航栈中。
这意味着，执行 switchTab 后，除了 tabBar 页面外的所有非 tabBar 页面都会被关闭，仅保留 tabBar页面，并且跳转的目标页面必须是在小程序配置的 tabBar 页面之一。

注意事项：

只能用于跳转到 tabBar 页面。
不能带参数跳转，因为 tabBar 页面的定位是固定的，不支持动态传递参数。但可以通过全局变量（如wx.setStorageSync）或页面的 onLoad 事件结合options 参数间接传递信息。 如果目标页面没有配置在 tabBar上，使用此属性会导致跳转失败。

3.在创建好的组件 .wxss 中放入代码

/* 学员作品文字区域布局 */
.zptitle{
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 0 20rpx 30rpx 20rpx;
  padding-top: 50rpx;
  box-sizing: border-box;
}
.zptext{
  padding-left: 20rpx;
  box-sizing: border-box;
}
.zptext::before{  /*::后面的元素被称作为伪元素选择器  添加行内元素 */
  content:"";
  background-color: red;
  width: 8rpx;
  height: 40rpx;
  display: inline-block;
  position: absolute;
  top: 52rpx;
  left: 0;
}
.zpmore{
  font-size: 28rpx;
  color: gray;
}

4.（.js）制作动态组件

给要动态显示的内容在 （.js） 页面中设置值，让其动态显示

 /**
   * 组件的属性列表
   */
  properties: {
    wenzitext:{
      type:String,
      value:""
    },
    url:{
      type:String,
      url:""
    }
  },

5.（.json）引用动态组件

要在哪个页面引用动态组件就在哪个页面的 .json 页面中以以下格式引用

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar",
    "headerTop":"/components/headerTop/headertop",
    "didulogo":"/components/didulogo/didulogo",
    //头部学员作品标题动态组件引用
    "xueyuanText":"/components/xueyuanText/xueyuanText"
  }
}

6.引用动态组件显示内容

  <!-- 学员作品文字区域 -->
    <xueyuanText wenzitext="学员作品" url="/pages/news/news" />
  <!-- 学员作品文字区域结束 -->

wenzitext 用来动态显示的属性值
url 用来跳转页面的路径

7.点击 更多 可以跳转页面