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

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

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

二 配置底部切换tabBar

2.1 tarBar配置文件

1
app.json

2.2 tarBar添加按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"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选中和未选中文字颜色

1
2
3
4
5
6
"tabBar": {
    "color": "#000",
    "selectedColor": "#f7982a",
    "backgroundColor": "#f6f6f6",
    "borderStyle": "white"
  },

说明：

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

2.4 windows样式

1
2
3
4
5
6
"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f7982a",
    "navigationBarTitleText": "个人中心",
    "navigationBarTextStyle": "white"
  },

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

3.1 新建页面

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

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

    1
    2
    3
    4
    address.js
    address.json
    address.wxml
    address.wxss

  • 同理，新建其他页面

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

3.2 app.js页面配置

1
2
3
4
5
6
7
8
"pages": [
    "pages/index/index",
    "pages/person/person",
    "pages/address/address",
    "pages/order/order",
    "pages/detail/detail",
    "pages/modify/modify"
  ],

四 源码

  • 源码
  • 物流查询服务器