微信小程序开发之——个人中心-框架搭建(3)

一 概述

• 框架搭建——配置底部切换tabBar
• 框架搭建——新建首页及个人中心页面

二 配置底部切换tabBar

2.1 tarBar配置文件

app.json

2.2 tarBar添加按钮

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home_select.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/person/person",
        "iconPath": "images/me.png",
        "selectedIconPath": "images/me_select.png",
        "text": "个人中心"
      }
    ]
  },

说明：

属性	说明
list	tabBar下的tab标签列表
pagePath	页面路径
iconPath	默认图标
selectedIconPath	选中图标选项
text	tab显示文字

2.3 tabBar选中和未选中文字颜色

"tabBar": {
    "color": "#000",
    "selectedColor": "#f7982a",
    "backgroundColor": "#f6f6f6",
    "borderStyle": "white"
  },

说明：

属性	说明
color	tabBar的默认字体颜色
selectedColor	tabBar的字体选中颜色
backgroundColor	tabBar的背景

2.4 windows样式

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f7982a",
    "navigationBarTitleText": "个人中心",
    "navigationBarTextStyle": "white"
  },

三 新建首页及个人中心页面

3.1 新建页面

• 右键pages，建立对应的文件夹如(address文件夹)

• 在文件夹上，右键——>新建page(包含以下文件)

  address.js
  address.json
  address.wxml
  address.wxss
  

• 同理，新建其他页面

  页面	page
  首页	index
  个人中心	person
  收货地址	address
  订单物流查询页面	order
  个人详情页	detail
  个人资料修改页	modify

3.2 app.js页面配置

"pages": [
    "pages/index/index",
    "pages/person/person",
    "pages/address/address",
    "pages/order/order",
    "pages/detail/detail",
    "pages/modify/modify"
  ],

四 源码

• 源码
• 物流查询服务器