在这里插入图片描述

前言

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

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

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

一、步骤阐述

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

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

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

二、新建项目并梳理结构

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

打开小程序数据文件，新建文件夹命名为 ” 服装销售平台 “
打开微信小程序开发者工具，新建项目并绑定上述文件夹

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>

效果展示：

上述图片需自己导入

总结

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