使用wepy開發微信小程序的底部導航
阿新 • • 發佈:2019-01-22
per 後綴 navi black 編輯 一個 npm 文件 com
pages用於指定小程序由哪些頁面組成,每一項都對應一個頁面的 路徑+文件名 信息。文件名不需要寫文件後綴,框架會自動去尋找對於位置
數組的第一項代表小程序的初始頁面(首頁)。小程序中新增/減少頁面,都需要對 pages 數組進行修改。
window 用於設置小程序的狀態欄、導航條、標題、窗口背景色
前言:
最近公司在做一個微信小程序的項目,用的是類似於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
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.完成,效果如上圖。
使用wepy開發微信小程序的底部導航