「小程序开发」新建页面设置启动页

新建页面的方法

从零开始的新页面

在pages目录下新建文件夹：右击“pages”目录，选择“新建文件夹”，新建一个“news”文件夹，接下来右击“news”，选择“新建pages”，也命名为“news”，这时app.json文件中的pages数组自动添加改页面的路径：
app.json自动修改代码

// app.json
{
            
  "pages": [
    "pages/index/index",
    "pages/news/news"
  ]
}

这种方式的优势是完全掌控，但需要自己处理每个细节。

在app.json文件中修改pages数组

直接在app.json文件的pages数组里面，添加一行代码“pages/news/news”，保存后编译，会自动进入新建的news页面。

设置启动页

在app.json中通过pages数组的第一个元素决定：

// app.json
{
            
  "pages": [    
    "pages/index/index",  // 起始页面
    "pages/news/news"
  ]
}

如果想更换启动页，只需调整pages数组中页面的顺序，把目标页面路径移到第一位即可。记得保存文件后重新编译。

修改页面导航栏样式

每个页面还可以有自己的.json文件来定制导航栏样式：

// pages/news/news.json
{
            
  "navigationBarTitleText": "新闻动态",
  "navigationBarTextStyle": "white",
  "navigationBarBackgroundColor": "#007aff"
}

这种局部配置会覆盖app.json中的全局设置。

常见错误和解决方法

页面不显示
检查是否在app.json的pages数组中注册，路径拼写是否正确。

样式错乱
确认.wxss文件是否保存，检查样式类名是否匹配。

页面跳转失败
使用wx.navigateTo时路径要以/开头，比如”/pages/news/news”。

样式污染
避免使用太简单的选择器如view{}，增加特定class前缀。就像店铺装修要考虑整条街的风格，不能太过突兀。

练习题

理论题

为什么建议在页面路径前加斜杠？这相当于城市规划中的什么原则？
答案：加斜杠表示绝对路径，确保从根目录开始查找，避免相对路径可能导致的定位错误。
如果想让所有页面的导航栏都统一成蓝色背景，应该在哪里配置？什么情况下需要在页面单独配置？
答案：在app.json的window属性中统一配置。当某些特殊页面需要不同风格时（如详情页需要透明导航栏），才需要在页面自己的.json文件中覆盖全局设置。

案例解析

在项目中新建一个“test”页面，修改全局配置文件app.json。

{
            
  "pages": [
    "pages/index/index",  
    "pages/test/test"
  ],
  "window": {
            
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#369",
    "navigationBarTitleText": "测试",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
            
    "color": "#fff",
    "selectedColor": "#f00",
    "borderStyle":"black",
    "backgroundColor": "#369",
    "list": [
      {
            
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
            
        "pagePath": "pages/test/test",
        "text": "测试页"
      }
    ]
  },
  "debug": true,
  "style": "v2",
  "sitemapLocation": "sitemap.json"  
}

pages字段

作用：定义小程序的所有页面路径。它指定了小程序包含哪些页面，编译器会根据这些路径自动生成对应的页面文件（如.js、.wxml、.wxss）。路径必须从项目根目录开始写，且数组的第一个元素默认为首页。
用法：在app.json中作为数组使用。每个元素是一个字符串，表示页面文件的相对路径（无需后缀名）。
注意事项：添加新页面时，需在此数组中添加路径，保存后开发工具会自动创建页面文件。

window字段

作用：全局设置小程序窗口的样式和行为，如导航栏标题、背景色、下拉刷新等。它影响所有页面，除非被页面配置覆盖。
用法：在app.json中作为对象使用。常见属性包括：

navigationBarTitleText：导航栏标题文字。
navigationBarBackgroundColor：导航栏背景颜色（Hex格式）。
enablePullDownRefresh：是否启用下拉刷新（布尔值）。
backgroundColor：窗口背景色。
backgroundTextStyle：下拉刷新时的文本样式（如”dark”或”light”）。

注意事项：页面配置文件（如pages/index/index.json）可以定义同名属性来覆盖全局设置。

tabBar字段

作用：定义底部或顶部的标签栏（tab栏），用于快速切换页面。常见于多页面的小程序，如首页、购物车、个人中心等。
用法：在app.json中作为对象使用。关键属性包括：

list：数组类型，定义每个tab项（至少2个，最多5个）。每个项包含：

pagePath：页面路径（必须在pages字段中已声明）。
text：tab上显示的文本。
iconPath：未选中时的图标路径。
selectedIconPath：选中时的图标路径。
color：tab文本默认颜色。
selectedColor：tab文本选中时的颜色。

backgroundColor：tab栏背景色。
position：位置（“bottom”或”top”，默认为底部）。

注意事项：tabBar只在全局配置中有效，页面配置无法覆盖它。

其他重要字段

style字段（全局配置）：

作用：指定小程序使用的组件样式版本（如”v2″表示新版样式）。
用法：简单字符串，例如"style": "v2"。

sitemapLocation字段（全局配置）：

作用：指定站点地图文件（sitemap.json）的路径，用于控制小程序页面是否被微信索引。
用法：字符串，例如"sitemapLocation": "sitemap.json"。

页面配置字段：

作用：在页面级JSON文件中（如pages/index/index.json），只覆盖window相关属性，不包含pages或tabBar。
用法：例如，设置当前页的导航栏标题：

{
              
    "navigationBarTitleText": "首页定制标题"
}

配置覆盖规则

全局配置（app.json）设置默认值，页面配置（page.json）优先覆盖相同属性（如window字段）。例如，如果全局设置navigationBarBackgroundColor为蓝色，页面配置可改为红色。
字段冲突时，遵循“页面配置 > 全局配置”原则，但tabBar和pages只在全局有效。

view{
            
  margin: 20px;
}
.container{
            
  margin: 20px;
}
view::after{
            
  content: "测试";
}