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

講解商城小程序首頁模塊的制作，包含商城框架的制作、頂部普通廣告圖片、頂部輪播廣告、快捷菜單、最新通知、最新產(chǎn)品、精品推薦等元素的制作，最后介紹銷售排行的制作。本章主要應(yīng)用了CSS和Flex Box的知識、小程序前端開發(fā)的基礎(chǔ)知識。

商城框架

本節(jié)開始制作整個小程序商城的框架，主要是底部5個菜單的設(shè)置，微信小程序中app.json的設(shè)置參見2.2.1節(jié)“全局配置”。
準(zhǔn)備：5個菜單的默認(rèn)圖片和選中菜單的顯示圖片，合計10個圖片，位于文件夾images里面。底部菜單的設(shè)置參見2.2.1節(jié)“全局配置中的tabBar”。
app.json的設(shè)置代碼示例如下：

{
  "pages":[  <!—小程序里面的頁面-->
    "pages/index/index" 
  ],
  "window":{ <!—小程序的窗體設(shè)置-->
    "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"
      }            
    ]
  }
}

效果如圖所示。

【微信小程序參考資料】
（1）微信小程序?qū)W習(xí)路線 http://www.hzyaoyi.cn/
（2）Java微信小程序商城系統(tǒng)指導(dǎo) https://ke.qq.com/course/3066521
（3）PHP微信小程序商城系統(tǒng)指導(dǎo) https://ke.qq.com/course/3066518
（4）微信官方文檔 https://developers.weixin.qq.com/miniprogram/dev/framework/