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

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

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

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

属性类型默认值描述平台差异说明
navigationBarBackgroundColorHexColor#F8F8F8导航栏背景颜色（同状态栏背景色）APP与H5为#F8F8F8，小程序平台请参考相应小程序文档
navigationBarTextStyleStringblack导航栏标题颜色及状态栏前景颜色，仅支持 black/white支付宝小程序不支持，请使用 my.setNavigationBar
navigationBarTitleTextString导航栏标题文字内容
navigationStyleStringdefault导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
backgroundColorHexColor#ffffff下拉显示出来的窗口的背景色微信小程序
backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark / light微信小程序
enablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面生命周期。
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期
backgroundColorTopHexColor#ffffff顶部窗口的背景色（bounce回弹区域）仅 iOS 平台
backgroundColorBottomHexColor#ffffff底部窗口的背景色（bounce回弹区域）仅 iOS 平台
titleImageString导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址支付宝小程序、H5、APP
transparentTitleStringnone导航栏整体（前景、背景）透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明支付宝小程序、H5、APP
titlePenetrateStringNO导航栏点击穿透支付宝小程序、H5
pageOrientationStringportrait横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape 详见 响应显示区域变化App 2.4.7+、微信小程序、QQ小程序
animationTypeStringpop-in窗口显示的动画效果，详见：窗口动画App
animationDurationNumber300窗口显示动画的持续时间，单位为 msApp
app-plusObject设置编译到 App 平台的特定样式，配置项参考下方 app-plusApp
h5Object设置编译到 H5 平台的特定样式，配置项参考下方 H5H5
mp-alipayObject设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY支付宝小程序
mp-weixinObject设置编译到 mp-weixin 平台的特定样式，配置项参考下方 MP-WEIXIN微信小程序
mp-baiduObject设置编译到 mp-baidu 平台的特定样式，配置项参考下方 MP-BAIDU百度小程序
mp-toutiaoObject设置编译到 mp-toutiao 平台的特定样式抖音小程序
mp-larkObject设置编译到 mp-lark 平台的特定样式飞书小程序
mp-qqObject设置编译到 mp-qq 平台的特定样式QQ小程序
mp-kuaishouObject设置编译到 mp-kuaishou 平台的特定样式快手小程序
mp-jdObject设置编译到 mp-jd 平台的特定样式京东小程序
usingComponentsObject引用小程序组件，参考 小程序组件
renderingModeString同层渲染，webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层微信小程序
leftWindowBooleantrue当存在 leftWindow 时，默认是否显示 leftWindowH5
topWindowBooleantrue当存在 topWindow 时，默认是否显示 topWindowH5
rightWindowBooleantrue当存在 rightWindow 时，默认是否显示 rightWindowH5
rpxCalcMaxDeviceWidthNumber960rpx 计算所支持的最大设备宽度，单位 pxApp（vue2 且不含 nvue）、H5（2.8.12+）
rpxCalcBaseDeviceWidthNumber375rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 pxApp（vue2 且不含 nvue）、H5（2.8.12+）
rpxCalcIncludeWidthNumber750rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpxApp（vue2 且不含 nvue）、H5（2.8.12+）
dynamicRpxBooleanfalse动态 rpx，屏幕大小变化会重新渲染 rpxApp-nvue（vue3 固定值为 true） 3.2.13+
maxWidthNumber单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)H5（2.9.9+）

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

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

属性类型默认值描述平台差异说明
navigationBarBackgroundColorHexColor#F8F8F8导航栏背景颜色（同状态栏背景色）APP与H5为#F8F8F8，小程序平台请参考相应小程序文档
navigationBarTextStyleStringblack导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
navigationBarShadowObject导航栏阴影，配置参考下方 导航栏阴影
navigationStyleStringdefault导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效微信小程序（iOS）、百度小程序（iOS）
backgroundColorHexColor#ffffff窗口的背景色微信小程序、百度小程序、抖音小程序、飞书小程序、京东小程序
backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark/light
enablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面生命周期。
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期
backgroundColorTopHexColor#ffffff顶部窗口的背景色（bounce回弹区域）仅 iOS 平台
backgroundColorBottomHexColor#ffffff底部窗口的背景色（bounce回弹区域）仅 iOS 平台
disableSwipeBackBooleanfalse是否禁用滑动返回App-iOS（3.4.0+）
titleImageString导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址支付宝小程序、H5、App
transparentTitleStringnone导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明支付宝小程序、H5、APP
titlePenetrateStringNO导航栏点击穿透支付宝小程序、H5
app-plusObject设置编译到 App 平台的特定样式，配置项参考下方 app-plusApp
h5Object设置编译到 H5 平台的特定样式，配置项参考下方 H5H5
mp-alipayObject设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY支付宝小程序
mp-weixinObject设置编译到 mp-weixin 平台的特定样式微信小程序
mp-baiduObject设置编译到 mp-baidu 平台的特定样式百度小程序
mp-toutiaoObject设置编译到 mp-toutiao 平台的特定样式抖音小程序
mp-larkObject设置编译到 mp-lark 平台的特定样式飞书小程序
mp-qqObject设置编译到 mp-qq 平台的特定样式QQ小程序
mp-kuaishouObject设置编译到 mp-kuaishou 平台的特定样式快手小程序
mp-jdObject设置编译到 mp-jd 平台的特定样式京东小程序
usingComponentsObject引用小程序组件，参考 小程序组件App、微信小程序、支付宝小程序、百度小程序、京东小程序
leftWindowBooleantrue当存在 leftWindow时，当前页面是否显示 leftWindowH5
topWindowBooleantrue当存在 topWindow 时，当前页面是否显示 topWindowH5
rightWindowBooleantrue当存在 rightWindow时，当前页面是否显示 rightWindowH5
maxWidthNumber单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)H5（2.9.9+）

【表1.2引自uniapp官方文档】

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/4938.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

掩码讲解，以及生成

掩码讲解，以及生成

掩码生成模块的原理主要基于特定的算法和规则，用于生成一个掩码矩阵，该矩阵与输入序列的长度相同，由0和1组成。这个掩码矩阵的作用是控制模型在处理序列数据时忽略无效部分。 在自注意力机制中，掩码被用来屏蔽无效的位置&#xff…
阅读更多...
新一代大数据平台，为什么选择中国移动梧桐数据库？

新一代大数据平台，为什么选择中国移动梧桐数据库？

个人介绍：艺名司镜233，是中国移动梧桐数据库研发团队成员，从事相关的技术开发近5年了。最让我觉得自豪的不是在研发这款数据库，而是我们用代码，切实地帮助企业解决数据的困扰，切实地解决社会的问题。 本篇文…
阅读更多...
软件工程的介绍

软件工程的介绍

软件工程 这一章的内容其实还是蛮多的，大概一共有10个章节，分别是下面的一些内容，但是呢，这一章的内容其实是比较偏向文科类的，也就是说，记忆的内容其实占有很大的篇幅，在该考试科目当中呢，其实也是主要影响上午题部分的选择题的考察，基本的分值呢，在10分左右，分值占…
阅读更多...
windows ubuntu:sed,awk,grep篇：4.执行 sed

windows ubuntu:sed,awk,grep篇：4.执行 sed

目录 23.单行内执行多个 sed 命令 24.sed 脚本文件 25.sed 注释 26.把 sed 当做命令解释器使用 27.直接修改输入文件 23.单行内执行多个 sed 命令 第一章内已经讲过，单行内执行多个 sed 命令有多种方法。 1. 使用多命令选项 –e 多命令选项-e 使用方法如…
阅读更多...
Mybatis-Plus自定义dataScpoe拦截器实现数据权限

Mybatis-Plus自定义dataScpoe拦截器实现数据权限

使用AOP切面，自定义注解，自定义mybatisplus拦截器，使用 JSqlParser 自定拼接where条件。 1、自定义注解DataScope；注解一般用于Service层或者DAO层(Mapper) import java.lang.annotation.*;/*** 数据权限过滤注解**/ Target(Elem…
阅读更多...
7-云原生监控体系-PromQL-函数功能和示例

7-云原生监控体系-PromQL-函数功能和示例

Prometheus支持几个函数来操作数据。 文章目录 1. 函数语法解释2. count(v instant-vector)3. topk(n, v instant-vector)4. bottomk(n, v instant-vector)5. increase(v range-vector)6. rate(v range-vector)7. rate 和 increase8. irate(v range-vector)9. predict_linear(…
阅读更多...
Dockerfile: ENTRYPOINT和CMD的区别

Dockerfile: ENTRYPOINT和CMD的区别

CMD：The main purpose of a CMD is to provide defaults for an executing container. CMD的主要用途是为正在执行的容器提供默认值。也就是指定这个容器启动的时候要运行的命令。 ENTRYPOINT：也是指定这个容器启动的时候要运行的命令。 ———————…
阅读更多...
docker菜鸟教程

docker菜鸟教程

Docker是一个开源的应用容器引擎，它允许开发者将应用及其依赖打包到一个可移植的容器中，然后发布到任何Linux机器上。以下是Docker的一些基本概念和操作指南： 镜像(Image)：Docker镜像是一个文件系统，它包含了应用程序及…
阅读更多...
Golang基础1-基本类型、if、switch、string

Golang基础1-基本类型、if、switch、string

基本类型 bool 整数：byte(相当于uint8), rune(相当于int32), int/uint ,int8/uint8 ,int16/uint16 ,int32/uint32 ,int64/uint64 浮点数: float32 ,float64, complex64 ,complex128 array（值类型）、slice、map、chan（引用类型…
阅读更多...
【Android】 网络技术

【Android】 网络技术

前言 本文用于记录Android网络技术的使用， 包括我们如何发起一条HTTP请求、解析XML、JOSN格式的数据以及最好用的网络库Retrofit。 使用HTTP协议访问网络 关于HTTP协议的工作原理，我们只需要知道客户端向服务器发起一条HTTP请求，服务器接收…
阅读更多...
使用VIVE Eye and Facial Tracking SDK 1.3.6.8 开发眼动追踪功能

使用VIVE Eye and Facial Tracking SDK 1.3.6.8 开发眼动追踪功能

在虚拟现实（VR）环境中，眼动追踪技术可以显著增强用户体验和应用的交互性。HTC Vive Focus 3是一款集成了眼动追踪功能的头戴式显示设备。本文详细介绍如何使用VIVE Sense的VIVE Eye and Facial Tracking SDK 1.3.6.8 在 Unity 中实现眼动追踪…
阅读更多...
【MySQL 数据宝典】【索引原理】- 001 索引原理分析 (AVL树、B-Tree、B+Tree)

【MySQL 数据宝典】【索引原理】- 001 索引原理分析 (AVL树、B-Tree、B+Tree)

一、索引定义 MySQL官方对索引定义：是存储引擎用于快速查找记录的一种数据结构。需要额外开辟空间和数据维护工作。 索引是物理数据页存储，在数据文件中（InnoDB，ibd文件），利用数据页(page)存储。 索引可以…
阅读更多...
Rust检查一个Vec＜String＞是否包含一个特定的子字符串

Rust检查一个Vec＜String＞是否包含一个特定的子字符串

在Rust中&#xff0c;你可以使用contains方法来检查一个Vec<&str>是否包含特定的字符串。但是&#xff0c;如果你想检查一个Vec是否包含一个特定的子字符串&#xff0c;你需要先将子字符串转换为String。 以下是一个示例代码&#xff0c;展示了如何检查一个Vec是否包…
阅读更多...
linux 开机自启 rc.local

linux 开机自启 rc.local

rc.local 是启动加载文件 例1. compose启动Harbor 写一个开启自动启动的脚本 [rootharbor harbor]# vim startall.sh #!/bin/bash cd /root/harbor docker-compose stop && docker-compose start给脚本权限 chmod x startall.sh chmod x /etc/rc.d/rc.local #ll 查…
阅读更多...
springcloud微服务搭建多数据源（mysql,oracle,postgres,等等）管理模块，支持通过注解方式切换不同类型的数据库

springcloud微服务搭建多数据源（mysql,oracle,postgres,等等）管理模块，支持通过注解方式切换不同类型的数据库

1.背景 同一套微服务管理系统&#xff0c;业务完全一样&#xff0c;但不同的客户可能要求使用自己熟悉的数据库&#xff0c;比如&#xff0c;mysql&#xff0c;oracle&#xff0c;postgres&#xff0c;还有一些国产数据库。如果能够将数据库模块独立出来&#xff0c;兼容各家的…
阅读更多...
【数据结构】算法的效率（时间复杂度和空间复杂度）

【数据结构】算法的效率（时间复杂度和空间复杂度）

目录 一.算法的效率 二.时间复杂度 1.概念 2.大O的渐进表示法 3.常见时间复杂度计算举例 三.空间复杂度 四.常见复杂度对比 五. 复杂度的oj练习 1.消失的数字 2.轮转数字&#xff1a; 一.算法的效率 算法在编写成可执行程序后&#xff0c;运行时需要耗费时间资源和空…
阅读更多...
【android 问题 之--自问自答】

【android 问题 之--自问自答】

同一个task 可以放不同进程的activity吗&#xff1f; 答&#xff1a;可以的。 A activity获取C activity的返回值有什么方法&#xff1f; 答&#xff1a;1.最笨的办法是使用stattactivityforresult方法启动A&#xff0c;B&#xff0c;C。在onActivityResult方法中进行 回传返…
阅读更多...
Elasticsearch文本分析深度解析

Elasticsearch文本分析深度解析

在Elasticsearch的世界里&#xff0c;文本分析是数据索引和检索过程的核心环节&#xff0c;它决定了如何将原始文本转换为可搜索的词汇单元。这一过程不仅关乎索引的效率&#xff0c;更直接影响到搜索结果的相关性和准确性。本文将深入探讨Elasticsearch中的文本分析机制&#…
阅读更多...
【C++初阶】string

【C++初阶】string

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…
阅读更多...
【Linux】信号的产生

【Linux】信号的产生

目录 一. 信号的概念signal() 函数 二. 信号的产生1. 键盘发送2. 系统调用kill()raise()abort() 3. 软件条件alarm() 4. 硬件异常除零错误:野指针: 三. 核心转储 一. 信号的概念 信号是消息的载体, 标志着不同的行为; 是进程间发送异步信息的一种方式, 属于软中断. 信号随时都…
阅读更多...
最新文章

Copyright @ 2022~2023