使用wepy開發微信小程序商城第二篇：路由配置和頁面結構

使用wepy開發微信小程序商城

第二篇：路由配置和頁面結構

 

前言：

最近公司在作一個微信小程序的項目，用的是相似於vue的wepy框架。我也藉此機會學習和實踐一下。

 

小程序官方文檔：https://developers.weixin.qq.com/miniprogram/dev/

wepy官方文檔：https://tencent.github.io/wepy/document.html#/

wepy小程序項目初始化：wepy小程序入門之項目初始化

 

今天的目標是開發微信小程序的底部導航

效果圖：

 

1.打開編輯器（我用的是vscode），而後打開微信開發者工具，選擇開發的項目

這裏注意，記得要執行 npm run dev，不然微信開發者工具裏看不到修改的效果。

2.在目錄src/pages裏面新建幾個頁面，如首頁、分類、購物車、會員中心

wepy構建項目會自動生成的index.wpy，這個文件先保留，裏面有一些組件示例能夠參考。

複製index.wpy4次，保留代碼結構，內容刪掉。分別命名爲home.wpy（首頁）,category.wpy（分類），cart.wpy（購物車）, member.wpy（會員中心）

 

3.打開app.wpy

export default class extends wepy.app {
     config = {

    }  
}

 

config配置看這裏，小程序官方文檔-全局配置： https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

 

（1）配置pages和window

pages用於指定小程序由哪些頁面組成，每一項都對應一個頁面的 路徑+文件名 信息。文件名不須要寫文件後綴，框架會自動去尋找對於位置

數組的第一項表明小程序的初始頁面（首頁）。小程序中新增/減小頁面，都須要對 pages 數組進行修改。

window 用於設置小程序的狀態欄、導航條、標題、窗口背景色

config = {
  pages: [
    'pages/home', // 首頁
    'pages/category', // 分類
    'pages/cart', // 購物車
    'pages/member' // 會員中心
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  },
}

 

（2）配置tabBar（重點！）

在config對象裏面，window一項下面，接着寫代碼，以下：

"tabBar": {
  "color": "#999999",
  "selectedColor": "#ff6a3c",
  "backgroundColor": "#ffffff",
  "borderStyle": "black",
  "list": [{
    "pagePath": "pages/home",
    "text": "首頁",
    "iconPath": "images/icon_home.png",
    "selectedIconPath": "images/icon_home_active.png"
  }, {
    "pagePath": "pages/category",
    "text": "分類",
    "iconPath": "images/icon_classify.png",
    "selectedIconPath": "images/icon_classify_active.png"
  }, {
    "pagePath": "pages/cart",
    "text": "購物車",
    "iconPath": "images/icon_shop_cart.png",
    "selectedIconPath": "images/icon_shop_cart_active.png"
  }, {
    "pagePath": "pages/member",
    "text": "會員中心",
    "iconPath": "images/icon_info.png",
    "selectedIconPath": "images/icon_info_active.png"
  }]
}

4.完成，效果如上圖。