【微信小程序入门到精通】—小程序实战构建售货平台首页

前言

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！

本篇文章我将为大家带来小程序实战构建售货平台首页，对其进行基础布局！

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、步骤阐述

首先我们先进行整体规划，将项目实现进行阶段分配。

1. 新建项目并梳理结构
2. 配置导航栏
3. tabBar 实现
4. 轮播图实现

那么接下来我们就逐一进行实现！

二、新建项目并梳理结构

我们需要新建一个空白项目，然后进行操作！

• 打开小程序数据文件，新建文件夹命名为 ” 服装销售平台 “

  

• 打开微信小程序开发者工具，新建项目并绑定上述文件夹

  appid 直接点击下拉然后选择自己的即可

  

• 打开 app.json，删除原始两个页面，新建三个页面

  "pages":[
  "pages/NEWS/NEWS",
  "pages/ALL/ALL",
  "pages/contact/contact"
  ],
  

至此我们项目准备工作就结束了，接下来我们进行导航栏效果构建！

---

三、配置导航栏

• 打开 app.json ，设置导航栏文本为“ 魅衣汇 ”

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "魅衣汇",
    "navigationBarTextStyle":"black"
  },
  

• 设置导航栏背景颜色以及文本颜色

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#faa",
    "navigationBarTitleText": "魅衣汇",
    "navigationBarTextStyle":"white"
  },
  

• 效果展示：

  

---

四、tabBar 实现

• 打开 app.json ，创建 tabBar 节点

  "tabBar": {
    "list": [{
      "pagePath": "pages/NEWS/NEWS",
      "text": "新品速递",
      "iconPath": "阿比巴卜/上新（未选中）.png",
      "selectedIconPath": "阿比巴卜/上新（选中）.png"
    },
    {
      "pagePath": "pages/ALL/ALL",
      "text": "全部商品",
      "iconPath": "阿比巴卜/所有商品（未选中）.png",
      "selectedIconPath": "阿比巴卜/所有商品（选中）.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "阿比巴卜/交流（未选中）.png",
      "selectedIconPath": "阿比巴卜/交流（选中）.png"
    }]
  },
  

• 效果展示：

  

---

五、轮播图实现

• 打开 NEWS.wxml ，进行轮播图设计

  <!--pages/NEWS/NEWS.wxml-->
  <swiper  autoplay interval="2000"  >
   <!-- 第一个轮播图 -->
   <swiper-item >
    <view><image src="/阿比巴卜/新品（轮播图1）.png" mode="widthFix"></image></view>
   </swiper-item>
  
   <!-- 第二个轮播图 -->
   <swiper-item >
     <view><image src="/阿比巴卜/新品轮播图2.png" mode="widthFix"></image></view>
   </swiper-item>
  
   <!-- 第三个轮播图 -->
   <swiper-item>
     <view><image src="/阿比巴卜/新品轮播图3.png" mode="widthFix"></image></view>
   </swiper-item>
   </swiper>
  

• 效果展示：

• 上述图片需自己导入

---

总结

大家每天都要开开心心的喔，让我们一起快乐的学习吧！