○ 前言

小程序初始化的源码中，赋予显示的标题默认设置为 “WeChat”，显然根据业务需求，一定会要求我们可自定义的
下面是实现这个小需求的两种方法

● 解决方案

①. 静态标题栏，json文件操作

对于 json 文件的修改也分两种

（1）. 可以修改项目根目录下的 app.json 文件，找到如下图中的 navigationBarTitleText ，并进行信息编辑，如此一来所有的页面都会默认显示所设置的标题名
（2）. 多数情况下，每个页面的标题栏都不相同，此时可以在 wxml 页面文件同目录下，对应修改同名 json文件（默认建立目录时，没有对应的 json 文件，可自行创建）

json 文件一旦存在，要求内部信息以 json 数组形式存放（可以为空），我们可以对"navigationBarTitleText"进行标题赋值

【注】：按照项目目录的包含级别，如果下级进行了标题栏的设置，则会覆写上级标题，反之则会继承上级所设置的标题名

②. 动态标题栏，js 文件操作

此种情景多用于文章、对话、商品详情页的标题设置，根据参数获得的数据进行标题栏的赋值

可以在业务逻辑处理的 js 中，调用 wx.setNavigationBarTitle()方法，进行 title 的赋值

 /*** 生命周期函数--监听页面加载*/onLoad: function (options) {//console.log(options.id)//TODO 详情页的标题栏设置 wx.setNavigationBarTitle({title: this.data.goodsInfo.title})},

下面是我的一个简单举例，请参考截图

提示：
后续可根据自己的处理逻辑灵活运用
比如页面跳转传参后，wx.request 请求服务器后端数据，然后在回调逻辑中，进行动态的标题栏设置即可
简而言之，最后还是需要使用 wx.setNavigationBarTitle()的动态赋值.

微信小程序Ⅲ [页面标题设置]相关推荐

微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
微信小程序页面上面的名字怎么改_微信小程序如何动态修改页面标题——已解决...
微信小程序初始化的标题我们知道实在全局.json文件中设置的,如果修改全局设置中的navigationBarTitleText,我们全部页面的标题都会统一改变: 例如: "navigatio ...
微信小程序页面背景图片设置
微信微信小程序页面背景图片background-image使用及大小设置源代码//index.wxss page{ background-size:100% 100%; background-ima ...
微信小程序界面从右边滑出_微信小程序页面溢出左右滑动问题
微信小程序页面中view设置width:100%之后,页面右边会多出一块白区域,并且可以左右滑动,解决方法是给这个view加一个box-sizing:border-box; 欢迎使用Markdown ...
微信小程序页面竖向滚动逻辑
微信小程序页面竖向滚动逻辑 1.实现下面类似的数组注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的.而且你永远不知道差在哪里. this.leftScrol ...
微信小程序-页面配置-界面显示部分
微信小程序-页面配置-界面显示部分配置项 singlePage 小结: 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置. 页面中配置项在当前页面会覆盖 app.json 的 ...
微信小程序页面溢出左右滑动问题
微信小程序页面中view设置width:100%之后,页面右边会多出一块白区域,并且可以左右滑动,解决方法是给这个view加一个box-sizing:border-box; 欢迎使用Markdown ...
小程序向Java传值,微信小程序页面传值详解
微信小程序页面传值详解一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如这里将good_id=16 参数传入detail页面, 然后detail页面的 ...
h5跳转小程序页面url_微信小程序页面跳转方法
我所知道的,微信小程序页面跳转有以下方法,下面分情况说明下一.利用小程序提供的 API 跳转: 1.简单page页面之间跳转 // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateB ...

微信小程序Ⅲ [页面标题设置]

○ 前言

● 解决方案

①. 静态标题栏，json文件操作

②. 动态标题栏，js 文件操作

微信小程序Ⅲ [页面标题设置]相关推荐

最新文章

热门文章