微信小程序综合训练--花店商城小程序首页、分类笔记（1），微信小程序综合训练，花店商城首页与分类功能详解（笔记1）

摘要：本篇文章介绍了微信小程序综合训练中的花店商城小程序首页及分类笔记部分。通过设计精美的首页和清晰的分类，用户可以轻松浏览和选购各种花卉产品。文章详细阐述了小程序首页的设计要素和功能，同时提供了分类笔记的相关内容，帮助读者更好地理解和开发类似小程序。

目录

一、小程序环境搭建和创建项目

1.新建一个文件夹并给它命名

2.打开微信开发者工具，创建项目，​

二. 项目初始化   

三、自定义构建 npm + 集成Scss

四、构建项目页面和首页页面

1.首页页面

2.新建banner组件（轮播图区域）和entrance组件（导航区域）

a：完成轮播图组件

 b：完成导航区域组件

 3.编写广告区域和商品列表区域

a：广告区域

b：商品列表区域

五、分类页面

一、小程序环境搭建和创建项目

 【慕尚花坊小程序】项目使用原生小程序进行搭建开发，项目涵盖电商项目常见的功能模块：

项目首页、 商品分类 、商品列表、 商品详情 、用户管理、 收货地址、 购物车、 结算支付、 订单管理 等……

1.新建一个文件夹并给它命名

2.打开微信开发者工具，创建项目，

1. 在目录中引入刚刚创建的新文件夹，

2. 填写自己的APPID，

3. 选择不使用云服务，选择js基础模板。

二. 项目初始化   

项目目录结构如下：

三、自定义构建 npm + 集成Scss

为了方便进行项目的开发，开发人员通常会对目录结构进行调整优化，在这个项目中， 我们就需要将小程序源码放到 miniprogram 目录下

四、构建项目页面和首页页面

在app.json文件中， 定义页面的路径：

定义应用的窗口样式和底部导航栏的布局和样式：

"window": {
 //设置窗口的背景文字样式为浅色。
    "backgroundTextStyle":"light",
//设置导航栏的标题为“慕尚花坊”。
    "navigationBarTitleText": "慕尚花坊",
//设置导航栏的背景颜色为#f3514f
    "navigationBarBackgroundColor": "#f3514f",
//设置导航栏的文字颜色为白色
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
//设置 tabBar 上未选中文字的颜色为#252933。
    "color":"#252933",
//设置 tabBar 上选中文字的颜色为#FF734C。
    "selectedColor": "#FF734C",
// 设置 tabBar 的背景颜色为白色。
    "backgroundColor": "#ffffff",
//设置 tabBar 的边框样式为黑色
    "borderStyle":"black",
//list 属性定义了 tabBar 的各个标签项
    "list": [
//首页
      {
        "pagePath": "pages/index/index",
        "text":"首页",
        "iconPath": "assets/tabbar/index.png",
        "selectedIconPath": "assets/tabbar/index-active.png"
      }

1.首页页面

如图所示：

在index.wxml里搭建首页结构

并设置首页背景图的样式：

  //首页背景图
   .window-bgc {
    height: 200rpx;
    position:absoulte;
    width: 100%;
    background-color:#f3514f;
    border-radius:0rpx 0rpx 40% 40%;
}

2.新建banner组件（轮播图区域）和entrance组件（导航区域）

在banner.json和entrance.json中搭建组件结构:

{
  "usingComponents": {},
  "component": true
  
}

 "usingComponents": {}: 这是一个对象，它的键是usingComponents。这个对象通常用于声明当前组件所使用的其他组件。在{}内部，会看到一系列的键值对，其中键是自定义组件的标签名，值是组件的路径。但是在这个例子中，它是空的，表示当前组件没有使用其他组件。

"component": true: 这是一个键值对，其中键是component，值是true。这通常表示当前描述的是一个组件。在某些框架或系统中，它可能用于标记或标识一个对象或文件为一个组件。

在index.json中表示当前index组件使用了这些组件，并且引入他们的路径：

{
  "usingComponents": {
    "banner":"./banner/banner",
    "entrance":"./entrance/entrance",
    "goods-list":"../../components/goods-list/goods-list"
  
  },
  "navigationBarTitleText": "慕尚花坊"
}

a：完成轮播图组件

在banner.wxml中

• 使用swiper组件创建一个自动轮播的图片列表。
• 通过wx:for循环遍历bannerList数组，为每一个图片链接创建一个swiper-item。
• 在轮播图的下方，根据bannerList的长度生成相应数量的指示点。

  //这是一个容器，其类名为"swiper-box"，用于包裹轮播组件并提供样式。
  
  
  //这是一个循环，用于遍历bannerList数组。
  wx:for是微信小程序的循环指令，
  而wx:key用于指定列表中项目的唯一的标识符，这里使用index作为键。