小程序demo实践：一点一滴学好小程序开发

2024-02-10 11:32:18

今天我们来学习一个小程序demo的实践，通过这个demo来练习之前学到的知识点，主要涉及梳理项目结构，配置导航栏效果，配置tabbar效果，实现轮播图，九宫格，图片布局等等。

项目结构梳理

我们先来看一下项目的结构。

├── app.js
├── app.json
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.wxml
│   │   ├── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.wxml
│       ├── logs.wxss
└── utils
    ├── util.js

app.js是项目的入口文件，app.json是项目的配置文件，pages文件夹是页面目录，index文件夹是首页目录，index.js是首页的逻辑代码，index.wxml是首页的模板文件，index.wxss是首页的样式文件，logs文件夹是日志目录，logs.js是日志页面的逻辑代码，logs.wxml是日志页面的模板文件，logs.wxss是日志页面的样式文件，utils文件夹是工具目录，util.js是工具文件。

导航栏配置

导航栏是小程序页面顶部的横条，它可以显示标题、返回按钮和操作按钮。导航栏的配置在app.json文件中。

{
  "navigationBarTitleText": "小程序demo",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationStyle": "custom"
}

navigationBarTitleText是导航栏的标题，navigationBarBackgroundColor是导航栏的背景颜色，navigationBarTextStyle是导航栏的文字颜色，navigationStyle是导航栏的样式。

tabbar配置

tabbar是小程序页面底部的横条，它可以显示多个tab，每个tab对应一个页面。tabbar的配置在app.json文件中。

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home_active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/logs.png",
        "selectedIconPath": "images/logs_active.png"
      }
    ]
  }
}

list是tabbar的tab列表，pagePath是tab的页面路径，text是tab的文字，iconPath是tab的图标路径，selectedIconPath是tab的选中图标路径。

轮播图实现

轮播图是小程序中常见的组件，它可以展示多张图片，并且可以自动播放。轮播图的实现需要借助第三方组件，这里我们使用的是swiper组件。

<swiper indicator-dots="true" autoplay="true" circular="true">
  <swiper-item>
    <image src="images/1.jpg" />
  </swiper-item>
  <swiper-item>
    <image src="images/2.jpg" />
  </swiper-item>
  <swiper-item>
    <image src="images/3.jpg" />
  </swiper-item>
</swiper>