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

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

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

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中增加自定义页面。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网际互联及OSI七层模型

1什么是OSI七层模型 2OSI每一个Layer的定义 及用途 3如何使用OSI参考模型分析网络通信过程 一、网际互联 (一)OSI的概念: open system interconnect开放系统互联参考模型,是有ISO(国际标准化组织)定义…

混合现实(MR)技术的应用场景

混合现实(MR)技术将虚拟世界和现实世界融合在一起,用户可以在现实世界中看到和与虚拟物体进行交互,同时还可以感知周围的真实环境。MR技术具有广阔的应用前景,可以应用于各行各业。以下是一些MR的应用场景。北京木奇移…

iOS ------代理 分类 拓展

代理协议 一,概念: 代理,又称委托代理(delegate),是iOS中常用的一种设计模式。顾名思义,它是把某个对象要做的事委托给别的对象去做。那么别的对象就是这个对象的代理,代替它来打理…

Linux部署MySQL8.0—手把手保姆级教程

👩🏽‍💻个人主页:阿木木AEcru 🔥 系列专栏:《Docker容器化部署系列》 《Java每日面筋》 💹每一次技术突破,都是对自我能力的挑战和超越。 目录 一、下载MySQL8.0安装包二、安装MySQ…

springboot的坑

问题:使用Autowired注入一个service,然后写了两个接口,第一个接口与请求时显示注入的service为空一直报错,但是第二个接口请求时service竟然不是空?在这里插入图片描述 凶手找到了,是private修饰。果然没仔…

HTB Runner

Runner User Nmap ──(root㉿kali)-[/home/…/machine/SeasonV/linux/Runner] └─# nmap -A runner.htb -T 4 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-04-22 23:07 EDT Stats: 0:00:01 elapsed; 0 hosts completed (1 up), 1 undergoing SYN Stealth Sca…

OpenHarmony实战开发-内存快照Snapshot Profiler功能使用指导。

DevEco Studio集成的DevEco Profiler性能调优工具(以下简称为Profiler),提供Time、Allocation、Snapshot、CPU等场景化分析任务类型。内存快照(Snapshot)是一种用于分析应用程序内存使用情况的工具,通过记录…

鸿蒙OpenHarmony【小型系统运行案例】 (基于Hi3516开发板)

运行 启动系统 在完成Hi3516DV300的烧录后,还需要设置BootLoader引导程序,才能运行OpenHarmony系统。 在Hi3516DV300任务中,单击Configure bootloader(Boot OS)进行配置即可。 说明: DevEco Device Tool…

【大模型系列】预训练

数据 数据预处理 预处理流程: 原始语料库—>质量过滤(语种过滤、统计过滤、关键词过滤、分类器过滤)—>敏感内容过滤(有毒内容、隐私内容PII)—>数据去重(句子级别、文档级别、数据集级别&#…

【AI】【Python】pydantic库学习demo

因为工作中学习AI,然后包括看源码,以及看代码都使用到了pydantic库,因此下面是一些最主要的20%,以学会其80%的精髓。 pydantic 库是 python 中用于数据接口定义检查与设置管理的库。 pydantic 在运行时强制执行类型提示&#xff0…

内插和抽取

抽取: 频域表达式的关系: 1、角频率扩大M倍 2、移动2pi、22pi…(n-1) 2pi 3、相加 4、幅度变为1/M 内插: 加入低通滤波,减小混叠,但是由于截短,也会造成误差,但是…

【MySQL 数据宝典】【磁盘结构】- 004 redolog 重做日志

一、背景介绍 持久性要求: 对于已提交的事务,即使系统发生崩溃,其对数据库的更改也不能丢失。问题: 在事务提交前将所有修改的页面刷新到磁盘浪费资源。随机IO导致刷新速度慢。 解决方案: 【数据副本】记录事务执行过…

[Meachines][Easy]Bizness

Main $ nmap -p- 10.10.11.252 --min-rate 1000 $ dirsearch -u https://bizness.htb/ $ whatweb https://bizness.htb/control/login 存在一个未授权的RCE $ git clone https://github.com/jakabakos/Apache-OFBiz-Authentication-Bypass.git $ cd Apache-OFBiz-Authenticat…

java:观察者模式

java:观察者模式 1 前言 观察者模式,又被称为发布-订阅(Publish/Subscribe)模式,他定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所…

Visual Studio2022中使用水晶报表

1.创建水晶报表项目 选择需要的表 自动生成连接 选项:可跳过 后续还有一些 都能跳过 看你自己的需求 自己选的样式 自动生成 查看你的数据源,在选择数据集时已经有啦 不懂得可以看上集 字段可以直接拖,页面上的都是初始化选过的 点击生成 成功…

【系统架构师】-选择题(一)

1、信息系统规划方法中,关键成功因素法通过对关键成功因素的识别,找出实现目标所需要的关键信息集合,从而确定系统开发的 (优先次序) 。关键成功因素来源于组织的目标,通过组织的目标分解和关键成功因素识别…

docker容器内彻底移除iptables服务的实现方法

背景 我创建的容器使用的是centos6的标准镜像,所以内置了iptables服务。容器启动后iptables服务默认就启动了。iptables设置的规则默认是所有流量都无法通行。而对于服务器的管理使用的是宿主机的防火墙。这样就导致在实现用iptables动态给容器添加端口映射时不成功…

关于C++STL的总结(基础使用和底层原理)

STL是什么? STL即(Standard Template Library)标准模板库,提供了常见的数据结构和算法函数等,其下共包含六大组件: 容器算法迭代器仿函数适配器空间配置器 本篇重点介绍容器的使用和简单的底层实现原理&…

推荐六款图片编辑软件

图片编辑、抠图、拼图、压缩、放大、加字体、转格式等各种功能应有尽有,收藏这一篇就够了! 综合编辑:图片编辑助手 这是一款电脑软件,里面有超多图片处理功能,压缩图片到指定大小、消除任意位置的图片水印、按指定大小…

【C++】---STL之vector的模拟实现

【C】---STL之vector的模拟实现 一、vector在源码中的结构:二、vector类的实现:1、vector的构造2、析构3、拷贝构造4、赋值运算符重载5、迭代器6、operator[ ]7、size()8、capacity()9、reserve()10、resize()11、empty()12、push_back()13、pop_back()1…