标准版/开源版移动端新增页面使用文档

心已赠人 2024-04-29 19:24 74阅读 0赞

在标准版开发的实际使用中，随着用户移动端的产品和信息内容不断增多，新增页面来展示对应的产品详情、模块等内容。针对一些概念或者步骤较多的内容，可以新增子页面构建多级模块结构，帮助用户快速定位。

下面就如何新增页面做一讲解：

1.在pages目录下新增页面组件文件夹及文件,例如:

pages/newPage/NewPage.vue

2.添加对应路由

`pages.json` 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中`app.json`的**页面管理**部分。注意定位权限申请等原属于`app.json`的内容，在uni-app中是在manifest中配置。

1) 如果是tab页

现在顶部添加路由地址

"pages": [
      {
        "path":"pages/newPage/newPage",
        "style": {
          "navigationBarTitleText": "新页面"
        } 
      }
    ]

2.在底部tabBar中的list数组中添加对应配置

![ab126202308291153031787.png][]

2. 如果是正常模块内容

1）存在对应模块

在对应模块的分包中添加对应路由即可。

![6ae25202308291155006536.png][]

2）不存在模块需在subPackages中新增分包模块，在按照上一步进行创建页面路由。

到这里创建页面介绍完了，还需要给大家介绍一下pages.json其中的两个属性，以便大家可以调整标题及状态栏。

第一个 **globalStyle** 用于设置应用的状态栏、导航条、标题、窗口背景色等。**（全局的喔）**

表1

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">属性</th> 
   <th colspan="1">类型</th> 
   <th colspan="1">默认值</th> 
   <th colspan="1">描述</th> 
   <th colspan="1">平台差异说明</th> 
  </tr> 
  <tr> 
   <td colspan="1">navigationBarBackgroundColor</td> 
   <td colspan="1">HexColor</td> 
   <td colspan="1">#F8F8F8</td> 
   <td colspan="1">导航栏背景颜色（同状态栏背景色）</td> 
   <td colspan="1">APP与H5为#F8F8F8，小程序平台请参考相应小程序文档</td> 
  </tr> 
  <tr> 
   <td colspan="1">navigationBarTextStyle</td> 
   <td colspan="1">String</td> 
   <td colspan="1">black</td> 
   <td colspan="1">导航栏标题颜色及状态栏前景颜色，仅支持 black/white</td> 
   <td colspan="1">支付宝小程序不支持，请使用&nbsp;<a href="https://opendocs.alipay.com/mini/api/xwq8e6" rel="nofollow" title="my.setNavigationBar">my.setNavigationBar</a></td> 
  </tr> 
  <tr> 
   <td colspan="1">navigationBarTitleText</td> 
   <td colspan="2">String</td> 
   <td colspan="2">导航栏标题文字内容</td> 
  </tr> 
  <tr> 
   <td colspan="1">navigationStyle</td> 
   <td colspan="1">String</td> 
   <td colspan="1">default</td> 
   <td colspan="1">导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看<a href="https://uniapp.dcloud.net.cn/collocation/pages#customnav" rel="nofollow" title="使用注意">使用注意</a></td> 
   <td colspan="1">微信小程序 7.0+、百度小程序、H5、App（2.0.3+）</td> 
  </tr> 
  <tr> 
   <td colspan="1">backgroundColor</td> 
   <td colspan="1">HexColor</td> 
   <td colspan="1">#ffffff</td> 
   <td colspan="1">下拉显示出来的窗口的背景色</td> 
   <td colspan="1">微信小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">backgroundTextStyle</td> 
   <td colspan="1">String</td> 
   <td colspan="1">dark</td> 
   <td colspan="1">下拉 loading 的样式，仅支持 dark / light</td> 
   <td colspan="1">微信小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">enablePullDownRefresh</td> 
   <td colspan="1">Boolean</td> 
   <td colspan="1">false</td> 
   <td colspan="2">是否开启下拉刷新，详见<a href="https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle" rel="nofollow" title="页面生命周期">页面生命周期</a>。</td> 
  </tr> 
  <tr> 
   <td colspan="1">onReachBottomDistance</td> 
   <td colspan="1">Number</td> 
   <td colspan="1">50</td> 
   <td colspan="2">页面上拉触底事件触发时距页面底部距离，单位只支持px，详见<a href="https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle" rel="nofollow" title="页面生命周期">页面生命周期</a></td> 
  </tr> 
  <tr> 
   <td colspan="1">backgroundColorTop</td> 
   <td colspan="1">HexColor</td> 
   <td colspan="1">#ffffff</td> 
   <td colspan="1">顶部窗口的背景色（bounce回弹区域）</td> 
   <td colspan="1">仅 iOS 平台</td> 
  </tr> 
  <tr> 
   <td colspan="1">backgroundColorBottom</td> 
   <td colspan="1">HexColor</td> 
   <td colspan="1">#ffffff</td> 
   <td colspan="1">底部窗口的背景色（bounce回弹区域）</td> 
   <td colspan="1">仅 iOS 平台</td> 
  </tr> 
  <tr> 
   <td colspan="1">titleImage</td> 
   <td colspan="2">String</td> 
   <td colspan="1">导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址</td> 
   <td colspan="1">支付宝小程序、H5、APP</td> 
  </tr> 
  <tr> 
   <td colspan="1">transparentTitle</td> 
   <td colspan="1">String</td> 
   <td colspan="1">none</td> 
   <td colspan="1">导航栏整体（前景、背景）透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明</td> 
   <td colspan="1">支付宝小程序、H5、APP</td> 
  </tr> 
  <tr> 
   <td colspan="1">titlePenetrate</td> 
   <td colspan="1">String</td> 
   <td colspan="1">NO</td> 
   <td colspan="1">导航栏点击穿透</td> 
   <td colspan="1">支付宝小程序、H5</td> 
  </tr> 
  <tr> 
   <td colspan="1">pageOrientation</td> 
   <td colspan="1">String</td> 
   <td colspan="1">portrait</td> 
   <td colspan="1">横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape 详见&nbsp;<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html" rel="nofollow" title="响应显示区域变化">响应显示区域变化</a></td> 
   <td colspan="1">App 2.4.7+、微信小程序、QQ小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">animationType</td> 
   <td colspan="1">String</td> 
   <td colspan="1">pop-in</td> 
   <td colspan="1">窗口显示的动画效果，详见：<a href="https://uniapp.dcloud.net.cn/api/router#animation" rel="nofollow" title="窗口动画">窗口动画</a></td> 
   <td colspan="1">App</td> 
  </tr> 
  <tr> 
   <td colspan="1">animationDuration</td> 
   <td colspan="1">Number</td> 
   <td colspan="1">300</td> 
   <td colspan="1">窗口显示动画的持续时间，单位为 ms</td> 
   <td colspan="1">App</td> 
  </tr> 
  <tr> 
   <td colspan="1">app-plus</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 App 平台的特定样式，配置项参考下方&nbsp;<a href="https://uniapp.dcloud.net.cn/collocation/pages#app-plus" rel="nofollow" title="app-plus">app-plus</a></td> 
   <td colspan="1">App</td> 
  </tr> 
  <tr> 
   <td colspan="1">h5</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 H5 平台的特定样式，配置项参考下方&nbsp;<a href="https://uniapp.dcloud.net.cn/collocation/pages#h5" rel="nofollow" title="H5">H5</a></td> 
   <td colspan="1">H5</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-alipay</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-alipay 平台的特定样式，配置项参考下方&nbsp;<a href="https://uniapp.dcloud.net.cn/collocation/pages#mp-alipay" rel="nofollow" title="MP-ALIPAY">MP-ALIPAY</a></td> 
   <td colspan="1">支付宝小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-weixin</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-weixin 平台的特定样式，配置项参考下方&nbsp;<a href="https://uniapp.dcloud.net.cn/collocation/pages#mp-weixin" rel="nofollow" title="MP-WEIXIN">MP-WEIXIN</a></td> 
   <td colspan="1">微信小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-baidu</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-baidu 平台的特定样式，配置项参考下方&nbsp;<a href="https://uniapp.dcloud.net.cn/collocation/pages#mp-baidu" rel="nofollow" title="MP-BAIDU">MP-BAIDU</a></td> 
   <td colspan="1">百度小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-toutiao</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-toutiao 平台的特定样式</td> 
   <td colspan="1">抖音小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-lark</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-lark 平台的特定样式</td> 
   <td colspan="1">飞书小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-qq</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-qq 平台的特定样式</td> 
   <td colspan="1">QQ小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-kuaishou</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-kuaishou 平台的特定样式</td> 
   <td colspan="1">快手小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-jd</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-jd 平台的特定样式</td> 
   <td colspan="1">京东小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">usingComponents</td> 
   <td colspan="1">Object</td> 
   <td colspan="1"></td> 
   <td colspan="2">引用小程序组件，参考&nbsp;<a href="https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81" rel="nofollow" title="小程序组件">小程序组件</a></td> 
  </tr> 
  <tr> 
   <td colspan="1">renderingMode</td> 
   <td colspan="1">String</td> 
   <td colspan="1"></td> 
   <td colspan="1">同层渲染，webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层</td> 
   <td colspan="1">微信小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">leftWindow</td> 
   <td colspan="1">Boolean</td> 
   <td colspan="1">true</td> 
   <td colspan="1">当存在 leftWindow 时，默认是否显示 leftWindow</td> 
   <td colspan="1">H5</td> 
  </tr> 
  <tr> 
   <td colspan="1">topWindow</td> 
   <td colspan="1">Boolean</td> 
   <td colspan="1">true</td> 
   <td colspan="1">当存在 topWindow 时，默认是否显示 topWindow</td> 
   <td colspan="1">H5</td> 
  </tr> 
  <tr> 
   <td colspan="1">rightWindow</td> 
   <td colspan="1">Boolean</td> 
   <td colspan="1">true</td> 
   <td colspan="1">当存在 rightWindow 时，默认是否显示 rightWindow</td> 
   <td colspan="1">H5</td> 
  </tr> 
  <tr> 
   <td colspan="1">rpxCalcMaxDeviceWidth</td> 
   <td colspan="1">Number</td> 
   <td colspan="1">960</td> 
   <td colspan="1">rpx 计算所支持的最大设备宽度，单位 px</td> 
   <td colspan="1">App（vue2 且不含 nvue）、H5（2.8.12+）</td> 
  </tr> 
  <tr> 
   <td colspan="1">rpxCalcBaseDeviceWidth</td> 
   <td colspan="1">Number</td> 
   <td colspan="1">375</td> 
   <td colspan="1">rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px</td> 
   <td colspan="1">App（vue2 且不含 nvue）、H5（2.8.12+）</td> 
  </tr> 
  <tr> 
   <td colspan="1">rpxCalcIncludeWidth</td> 
   <td colspan="1">Number</td> 
   <td colspan="1">750</td> 
   <td colspan="1">rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx</td> 
   <td colspan="1">App（vue2 且不含 nvue）、H5（2.8.12+）</td> 
  </tr> 
  <tr> 
   <td colspan="1">dynamicRpx</td> 
   <td colspan="1">Boolean</td> 
   <td colspan="1">false</td> 
   <td colspan="1">动态 rpx，屏幕大小变化会重新渲染 rpx</td> 
   <td colspan="1">App-nvue（vue3 固定值为 true） 3.2.13+</td> 
  </tr> 
  <tr> 
   <td colspan="1">maxWidth</td> 
   <td colspan="2">Number</td> 
   <td colspan="1">单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)</td> 
   <td colspan="1">H5（2.9.9+）</td> 
  </tr> 
 </tbody> 
</table>

第二个 style 用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

页面中配置项会**覆盖** [globalStyle][] 中相同的配置项

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">属性</th> 
   <th colspan="1">类型</th> 
   <th colspan="1">默认值</th> 
   <th colspan="1">描述</th> 
   <th colspan="1">平台差异说明</th> 
  </tr> 
  <tr> 
   <td colspan="1">navigationBarBackgroundColor</td> 
   <td colspan="1">HexColor</td> 
   <td colspan="1">#F8F8F8</td> 
   <td colspan="1">导航栏背景颜色（同状态栏背景色）</td> 
   <td colspan="1">APP与H5为#F8F8F8，小程序平台请参考相应小程序文档</td> 
  </tr> 
  <tr> 
   <td colspan="1">navigationBarTextStyle</td> 
   <td colspan="1">String</td> 
   <td colspan="1">black</td> 
   <td colspan="2">导航栏标题颜色及状态栏前景颜色，仅支持 black/white</td> 
  </tr> 
  <tr> 
   <td colspan="1">navigationBarTitleText</td> 
   <td colspan="2">String</td> 
   <td colspan="2">导航栏标题文字内容</td> 
  </tr> 
  <tr> 
   <td colspan="1">navigationBarShadow</td> 
   <td colspan="2">Object</td> 
   <td colspan="2">导航栏阴影，配置参考下方&nbsp;<a href="https://uniapp.dcloud.net.cn/collocation/pages#navigationBarShadow" rel="nofollow" title="导航栏阴影">导航栏阴影</a></td> 
  </tr> 
  <tr> 
   <td colspan="1">navigationStyle</td> 
   <td colspan="1">String</td> 
   <td colspan="1">default</td> 
   <td colspan="1">导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看<a href="https://uniapp.dcloud.net.cn/collocation/pages#customnav" rel="nofollow" title="使用注意">使用注意</a></td> 
   <td colspan="1">微信小程序 7.0+、百度小程序、H5、App（2.0.3+）</td> 
  </tr> 
  <tr> 
   <td colspan="1">disableScroll</td> 
   <td colspan="1">Boolean</td> 
   <td colspan="1">false</td> 
   <td colspan="1">设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效</td> 
   <td colspan="1">微信小程序（iOS）、百度小程序（iOS）</td> 
  </tr> 
  <tr> 
   <td colspan="1">backgroundColor</td> 
   <td colspan="1">HexColor</td> 
   <td colspan="1">#ffffff</td> 
   <td colspan="1">窗口的背景色</td> 
   <td colspan="1">微信小程序、百度小程序、抖音小程序、飞书小程序、京东小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">backgroundTextStyle</td> 
   <td colspan="1">String</td> 
   <td colspan="1">dark</td> 
   <td colspan="2">下拉 loading 的样式，仅支持 dark/light</td> 
  </tr> 
  <tr> 
   <td colspan="1">enablePullDownRefresh</td> 
   <td colspan="1">Boolean</td> 
   <td colspan="1">false</td> 
   <td colspan="2">是否开启下拉刷新，详见<a href="https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle" rel="nofollow" title="页面生命周期">页面生命周期</a>。</td> 
  </tr> 
  <tr> 
   <td colspan="1">onReachBottomDistance</td> 
   <td colspan="1">Number</td> 
   <td colspan="1">50</td> 
   <td colspan="2">页面上拉触底事件触发时距页面底部距离，单位只支持px，详见<a href="https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle" rel="nofollow" title="页面生命周期">页面生命周期</a></td> 
  </tr> 
  <tr> 
   <td colspan="1">backgroundColorTop</td> 
   <td colspan="1">HexColor</td> 
   <td colspan="1">#ffffff</td> 
   <td colspan="1">顶部窗口的背景色（bounce回弹区域）</td> 
   <td colspan="1">仅 iOS 平台</td> 
  </tr> 
  <tr> 
   <td colspan="1">backgroundColorBottom</td> 
   <td colspan="1">HexColor</td> 
   <td colspan="1">#ffffff</td> 
   <td colspan="1">底部窗口的背景色（bounce回弹区域）</td> 
   <td colspan="1">仅 iOS 平台</td> 
  </tr> 
  <tr> 
   <td colspan="1">disableSwipeBack</td> 
   <td colspan="1">Boolean</td> 
   <td colspan="1">false</td> 
   <td colspan="1">是否禁用滑动返回</td> 
   <td colspan="1">App-iOS（3.4.0+）</td> 
  </tr> 
  <tr> 
   <td colspan="1">titleImage</td> 
   <td colspan="2">String</td> 
   <td colspan="1">导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址</td> 
   <td colspan="1">支付宝小程序、H5、App</td> 
  </tr> 
  <tr> 
   <td colspan="1">transparentTitle</td> 
   <td colspan="1">String</td> 
   <td colspan="1">none</td> 
   <td colspan="1">导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明</td> 
   <td colspan="1">支付宝小程序、H5、APP</td> 
  </tr> 
  <tr> 
   <td colspan="1">titlePenetrate</td> 
   <td colspan="1">String</td> 
   <td colspan="1">NO</td> 
   <td colspan="1">导航栏点击穿透</td> 
   <td colspan="1">支付宝小程序、H5</td> 
  </tr> 
  <tr> 
   <td colspan="1">app-plus</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 App 平台的特定样式，配置项参考下方&nbsp;<a href="https://uniapp.dcloud.net.cn/collocation/pages#app-plus" rel="nofollow" title="app-plus">app-plus</a></td> 
   <td colspan="1">App</td> 
  </tr> 
  <tr> 
   <td colspan="1">h5</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 H5 平台的特定样式，配置项参考下方&nbsp;<a href="https://uniapp.dcloud.net.cn/collocation/pages#h5" rel="nofollow" title="H5">H5</a></td> 
   <td colspan="1">H5</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-alipay</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-alipay 平台的特定样式，配置项参考下方&nbsp;<a href="https://uniapp.dcloud.net.cn/collocation/pages#mp-alipay" rel="nofollow" title="MP-ALIPAY">MP-ALIPAY</a></td> 
   <td colspan="1">支付宝小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-weixin</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-weixin 平台的特定样式</td> 
   <td colspan="1">微信小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-baidu</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-baidu 平台的特定样式</td> 
   <td colspan="1">百度小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-toutiao</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-toutiao 平台的特定样式</td> 
   <td colspan="1">抖音小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-lark</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-lark 平台的特定样式</td> 
   <td colspan="1">飞书小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-qq</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-qq 平台的特定样式</td> 
   <td colspan="1">QQ小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-kuaishou</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-kuaishou 平台的特定样式</td> 
   <td colspan="1">快手小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">mp-jd</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">设置编译到 mp-jd 平台的特定样式</td> 
   <td colspan="1">京东小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">usingComponents</td> 
   <td colspan="2">Object</td> 
   <td colspan="1">引用小程序组件，参考&nbsp;<a href="https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81" rel="nofollow" title="小程序组件">小程序组件</a></td> 
   <td colspan="1">App、微信小程序、支付宝小程序、百度小程序、京东小程序</td> 
  </tr> 
  <tr> 
   <td colspan="1">leftWindow</td> 
   <td colspan="1">Boolean</td> 
   <td colspan="1">true</td> 
   <td colspan="1">当存在 leftWindow时，当前页面是否显示 leftWindow</td> 
   <td colspan="1">H5</td> 
  </tr> 
  <tr> 
   <td colspan="1">topWindow</td> 
   <td colspan="1">Boolean</td> 
   <td colspan="1">true</td> 
   <td colspan="1">当存在 topWindow 时，当前页面是否显示 topWindow</td> 
   <td colspan="1">H5</td> 
  </tr> 
  <tr> 
   <td colspan="1">rightWindow</td> 
   <td colspan="1">Boolean</td> 
   <td colspan="1">true</td> 
   <td colspan="1">当存在 rightWindow时，当前页面是否显示 rightWindow</td> 
   <td colspan="1">H5</td> 
  </tr> 
  <tr> 
   <td colspan="1">maxWidth</td> 
   <td colspan="2">Number</td> 
   <td colspan="1">单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)</td> 
   <td colspan="1">H5（2.9.9+）</td> 
  </tr> 
 </tbody> 
</table>

【表1.2引自uniapp官方文档】

以上步骤即可在CRMEB标准版商城uni-app中增加自定义页面。![e739c7e5bd974444a877abb860069831.jpeg][]

[ab126202308291153031787.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/635165ea5c4c4da3b4c0973f08d3ecd9.png
[6ae25202308291155006536.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/17cdc4a0e5d04a04b8653305b54262c4.png
[globalStyle]: https://uniapp.dcloud.net.cn/collocation/pages#globalstyle
[e739c7e5bd974444a877abb860069831.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/febbcd8db44f412d95759df1a24785e2.jpeg