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

在这里插入图片描述

目录

  • 前言
  • 一、步骤阐述
  • 二、新建项目并梳理结构
  • 三、配置导航栏
  • 四、tabBar 实现
  • 五、轮播图实现
  • 总结

前言

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

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

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

一、步骤阐述

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

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

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

二、新建项目并梳理结构

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

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

    【微信小程序入门到精通】—小程序实战构建售货平台首页_第1张图片

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

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

    【微信小程序入门到精通】—小程序实战构建售货平台首页_第2张图片

  • 打开 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"
    },
    
  • 效果展示:

    【微信小程序入门到精通】—小程序实战构建售货平台首页_第3张图片


四、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"
      }]
    },
    
  • 效果展示:

    【微信小程序入门到精通】—小程序实战构建售货平台首页_第4张图片


五、轮播图实现

  • 打开 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>
    
  • 效果展示:

【微信小程序入门到精通】—小程序实战构建售货平台首页_第5张图片

  • 上述图片需自己导入

总结

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

在这里插入图片描述

你可能感兴趣的:(【微信小程序入门到精通】,微信小程序,小程序)