mpvue 从零开始女友的衣装 1 pages

最新推荐文章于 2020-08-22 11:12:25 发布

原创最新推荐文章于 2020-08-22 11:12:25 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

mpvue 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍小程序开发中pages文件夹的作用，通过实例演示如何创建和注册页面，以及配置底部tab切换，实现页面间的导航与交互。深入解析app.json文件在页面管理中的核心作用。

pages文件夹就像一个大橱柜，里面放着各种精美的衣装，你也可以理解为供小程序的页面。

1、制造衣服

我在pages页面下新建了3个页面

market 广告市场
task 任务中心
my 个人中心

以market为例，写最简单的代码

<template>
  <div class="container" @click="clickHandle('test click', $event)">
    market
  </div>
</template>

2、注册页面
这时你需要关注app.json文件，女友的搭配都是在这里面控制。pages中填写的页面，可以被访问

{
  "pages": [
    "pages/index/main",
    "pages/logs/main",
    "pages/counter/main",
    "pages/market/main",
    "pages/task/main",
    "pages/my/main"
  ]
}

3、底部tab切换
配置app.json文件。

   "tabBar": {
    "selectedColor": "#145094",
    "list": [
      {
        "pagePath": "pages/market/main",
        "text": "广告市场",
        "iconPath": "static/img/tab/market.png",
        "selectedIconPath": "static/img/tab/market-selected.png"
      },
      {
        "pagePath": "pages/task/main",
        "text": "我的任务",
        "iconPath": "static/img/tab/task.png",
        "selectedIconPath": "static/img/tab/task-selected.png"
      },
      {
        "pagePath": "pages/my/main",
        "text": "个人中心",
        "iconPath": "static/img/tab/my.png",
        "selectedIconPath": "static/img/tab/my-selected.png"
      }
    ]
  }