小程序 | 改变子级页面标题内容

最新推荐文章于 2024-06-13 15:46:41 发布

Uching

最新推荐文章于 2024-06-13 15:46:41 发布

阅读量714

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/Uching/article/details/77213514

小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何通过app.json全局配置微信小程序的外观属性，并展示了如何为特定页面如搜索页面设置独立的配置项，包括导航栏颜色、文字样式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们可以通过app.json对微信小程序进行全局配置，window用于设置小程序的状态栏、导航条、标题、窗口背景色，全局配置的设置用于整个小程序的页面，但是有时想改变子级页面的配置内容，那就在当前页的json文件里面直接设置。

app.json

"window": {
    "navigationBarBackgroundColor": "#d92636",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "跨境电商",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
  },

全局配置下的标题

search.json

{
    "navigationBarBackgroundColor": "#f6f6fa",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText":"搜索"
}

搜索页面下配置的标题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Uching

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序之子页面动态修改导航栏标题文字内容

夜阑珊妖妖

05-04

1961

在实际的项目开发中，一般我们页面导航栏的标题文字都不是固定的，而是根据场景需要动态设置的，这个如何实现呢。微信官方提供的方法如下： 1.设置动态的 onLoad: function (options) { wx.setNavigationBarTitle({ title: options.name }) // options.name表示上个页面传过来的文字 }, 2.直接设置 onLoad: function (options) { wx.setNavigationBarTitle({ ti.

微信小程序做问卷——前端部分(生成问卷)

yaoxh6的博客

05-01

9393

文章目录实现效果界面功能数据功能各个组件的实现右上角的蓝色加号问卷结构部分以单选部分举例每个题型的灰色加号每个题型的删除按钮每个选项的删除按钮每个输入的数据记录全部代码questionnaire.wxmlquestionnaire.wxssquestionnaire.jsPS 实现效果界面功能最后实现的界面如下最右上角的蓝色加号是增加一种新的题型，一共三种题型，单选，多选，问答。选择一...

参与评论您还未登录，请先登录后发表或查看评论

小程序 · 修改标题

weixin_42091247的博客

07-26

175

小程序动态修改标题navigationBarTitleText ゛Pudding 2020-11-10 10:14:22 1004 收藏分类专栏： 小程序 文章标签： 小程序 版权 1、平时我们是在.json文件直接去设置页面标题 { “navigationBarTitleText”: “首页”, } 1 2 3 2、想要修改标题可以给他动态设置，或者根据一些判断条件在.js文件中去设置 wx.setNavigationBarTitle({ title: ‘我是修改后的标题啊’ }) ————————

微信小程序修改标题

wj0712的博客

06-13

4101

隐藏原生导航栏：在app.json或页面的.json文件中，设置为custom。示例：json复制代码自定义导航栏组件：创建一个自定义的导航栏组件。在components目录下新建一个导航栏组件（例如，json复制代码html复制代码css复制代码/* 这里可以根据需要调整 */ background-color: #fff;/* 背景颜色 */ display: flex;/* 这里设置字体大小 */ font-weight: bold;

小程序：页面标题设置

vviyo????

03-01

675

小程序：页面标题设置

【小程序】navigationBarTitleText配置子页面标题，依旧显示默认标题，子页面配置不显示

记录学习点滴

09-25

590

navigationBarTitleText配置子页面标题不显示，需要注意的是在微信开发者工具中，除了从你其他页面复制的页面不会自动配置，其他新加的页面会自动配置。

在线教育App和小程序模版源码功能讲解

weixin_43947457的博客

03-25

1779

讲解项目：教育培训(education-training) 模板项目简介本项目的一个教育培训服务APP。提供在线浏览机构信息、名师风采和课程预约订购等功能。项目前端使用了 avm.js 多端开发技术，可同时编译为 Android & iOS App 以及微信小程序；后端使用 APICloud 数据云3.0 云函数自定义接口。技术要点本项目在开发过程中，在“能拆就拆”的思想下，对项目进行细粒度的组件化拆解。可以从中了解到组件拆分逻辑和一些操作技巧，对自定义组件进行巩固。效果图开发

三级树形目录网页特效

11-20

【标题】"三级树形目录网页特效"涉及的是在网页设计中实现多级导航菜单的技术。这种特效使得网站的组织结构清晰，用户可以方便地浏览和访问深层次的内容。在网页开发中，通常会使用HTML、CSS和JavaScript来构建这样...

基于微信小程序实现日常学习打卡系统项目演示【附项目源码】

ybigbear的博客

12-23

1101

AppService 逻辑层是 MINA 的服务中心，负责页面渲染需要的数据以及页面交互所处理的逻辑，管理应用的生命周期以及页面路由，视图层向逻辑层发送事件请求，逻辑层通过请求进行页面数据处理与传输，再发送给视图层进行页面渲染。数据库，就是数据存储的储藏室，只不过数据是存储在计算机上的，而不是现实中的储藏室，数据的存放是按固定格式，而不是无序的，则定义就是：长期有固定格式，可以共享的存储在计算机存储器上。数据表的建立，可以对数据表中的数据进行调整，数据的重新组合及重新构造，保证数据的安全性。

web前端页面优化详解

weixin_44465584的博客

03-08

4954

一：web前端页面优化： 1.web页面的具体是什么？前身？ web前端页面作为呈现给用户看的页面，也就是浏览器可以解析出资源的通过一定程序而出现的页面，对于可以开发人员，很好懂：就是HTML（Hyper Text Markup Language【超文本标记语言】）+CSS（Cascading Style Sheets【表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集...

小程序 动态标题内容设置

小星落

04-23

391

wx.setNavigationBarTitle({ title: '啦啦啦啦' })

微信小程序（五）实战——页面标题设置

欢迎交流PHP和前端知识QQ：634487911

07-04

1767

1.全局页面标题我们在app.json中定义了一个全局标题（所有页面都是一样的[测试小程序]） "navigationBarTitleText": "测试小程序",2.固定页面标题我们在某个页面显示固定标题{ "navigationBarTitleText": "首页的内容"}效果：...

小程序修改单独页面title

大山博客

09-04

1万+

通常我们在app.json中统一设置title "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#FFFFFF", "navigationBarTitleText&quot

微信小程序动态修改页面标题setNavigationBarTitle

小天空的博客

12-27

7415

微信小程序不仅可静态修改页面，还可以动态修改页面静态修改页面通过指定页面的对应的json文件加入以下代码就可以实现 { "navigationBarTitleText": "案例详情" } 动态改变标题有几种方法：本页面通过点击事件动态改变标题已经提供好了api，直接调用就可以 anli:function(){ wx.setNavigationBarTitle({ title: "案例详情" }) }, 2.从上一个页面携带数据跳转页面动态改变标题上.

微信小程序开发（一）动态修改页面标题

最新发布

04-04

### WXSS 样式手册与完整列表 #### 什么是 WXSS？ WXSS 是微信小程序中的样式语言，类似于 CSS，用于描述小程序界面的外观和布局。它支持大部分标准 CSS 的语法，并在此基础上进行了扩展[^1]。 --- #### WXSS 支持的选择器 WXSS 提供了丰富的选择器来满足不同的需求，以下是常见的选择器及其功能： - **类选择器**：通过 `.class` 来指定特定类别的样式。 - **ID 选择器**：通过 `#id` 来唯一标识某个元素并为其设置样式。 - **标签选择器**：直接使用 HTML 或 WXML 中的标签名称作为选择器。 - **属性选择器**：例如 `[type="submit"]` 可以针对具有特定属性的元素应用样式。 - **后代选择器**：如 `.parent .child` 表示父级内的子级元素会继承该样式。 - **伪类选择器**：如 `:hover`, `:active` 等可以动态改变交互状态下的表现形式。这些选择器使得开发者能够更加灵活地控制页面上的每一个细节。 --- #### WXSS 的优先级规则当多个样式作用于同一个元素时，遵循以下优先级顺序（从低到高）： 1. 浏览器默认样式； 2. 外部样式表（即全局 app.wxss 文件中定义的内容）； 3. 页面内部局部样式（page.wxss 文件里的声明覆盖前者）； 4. 内联样式（直接写在 wxml 属性 style="" 上面的部分拥有最高权值）。注意，在实际编码过程中应尽量减少冲突情况的发生以免增加调试难度。 --- #### 尺寸单位 rpx 为了适应不同屏幕分辨率设备之间的差异问题，微信团队引入了一种新的相对长度单位——rpx (responsive pixel)，其含义是在 iPhone6 设备上每像素等于真实物理像素点数除以750的结果。因此如果某宽度设定为375rpx，则对应iPhone6屏幕上正好占据一半区域大小；而对于其他型号手机则自动调整至最接近比例呈现效果最佳视觉体验。 ```css /* 示例 */ .container { width: 750rpx; height: 100vh; /* 使用 vh 单位也可以实现响应式设计 */ } ``` --- #### 常见组件样式举例根据官方文档提供的基础内容组件列表[^5]，下面列举几个常用控件对应的典型样式配置方法： ##### Text 文字显示 ```html <text class="title">标题</text> ``` ```css .title { font-size: 48rpx; color: #ff5722; text-align: center; } ``` ##### Button 按钮点击反馈 ```html <button class="btn-primary">提交</button> ``` ```css .btn-primary { background-color: #00aaff; border-radius: 10rpx; padding: 20rpx 40rpx; } .btn-primary:hover { opacity: 0.8; } ``` ##### ScrollView 滚动视图 ```html <scroll-view scroll-y class="list">  </scroll-view> ``` ```css .list { max-height: 500rpx; overflow-y: auto; } ``` --- #### 微信小程序项目结构概述了解如何组织代码对于有效利用 WXSS 至关重要。通常情况下，一个完整的微信小程序由以下几个部分构成[^2]: - 全局配置文件 (`app.json`) 和样式表(`app.wxss`); - 各个独立页面目录下分别包含 json, wxml, wxss以及 js 四种类型文件用来管理各自特有的逻辑行为及UI展示特性. ---