欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

01-微信小程序商城 商城框架的制作(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)

程序员文章站 2024-02-12 22:19:34
...

微信小程序商城 商城框架的制作

讲解商城小程序首页模块的制作,包含商城框架的制作、顶部普通广告图片、顶部轮播广告、快捷菜单、最新通知、最新产品、精品推荐等元素的制作,最后介绍销售排行的制作。本章主要应用了CSS和Flex Box的知识、小程序前端开发的基础知识。

商城框架

本节开始制作整个小程序商城的框架,主要是底部5个菜单的设置,微信小程序中app.json的设置参见2.2.1节“全局配置”。
准备:5个菜单的默认图片和选中菜单的显示图片,合计10个图片,位于文件夹images里面。底部菜单的设置参见2.2.1节“全局配置中的tabBar”。
app.json的设置代码示例如下:

{
  "pages":[  <!—小程序里面的页面-->
    "pages/index/index" 
  ],
  "window":{ <!—小程序的窗体设置-->
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#999999",
    "navigationBarTitleText": "小程序购物商城",
    "navigationBarTextStyle":"black"
  },
  "tabBar":{ <!-底部菜单-->
    "list":[
      {
        "pagePath":"pages/index/index", <!—页面链接的路径-->
        "text":"首页", <!—菜单文字-->
        "iconPath":"images/shou-off.png", <!—菜单图片-->
        "selectedIconPath":"images/shou-on.png" <!—菜单选中时候显示的图片-->
      },
      {
        "pagePath": "pages/fenlei/index",
        "text": "分类",
        "iconPath": "images/fen-off.png",
        "selectedIconPath": "images/fen-on.png"        
      },
      {
        "pagePath":"pages/tmp/gouwuche/01-jianjie",
        "text":"购物车",
        "iconPath":"images/che-off.png",
        "selectedIconPath": "images/che-on.png"
      },
      {
        "pagePath": "pages/huiyuan/index",
        "text": "我的",
        "iconPath": "images/hui-off.png",
        "selectedIconPath": "images/hui-on.png"
      },
      {
        "pagePath": "pages/tmp/index",
        "text": "知识点",
        "iconPath": "images/anli-off.png",
        "selectedIconPath": "images/anli-on.png"
      }            
    ]
  }
}

效果如图所示。
01-微信小程序商城 商城框架的制作(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
【微信小程序参考资料】
(1)微信小程序学习路线 http://www.hzyaoyi.cn/
(2)Java微信小程序商城系统指导 https://ke.qq.com/course/3066521
(3)PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518
(4)微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/