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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/79552943

○ 前言

  • 小程序初始化的源码中,赋予显示的标题默认设置为 “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()的动态赋值.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动开发之家

GSYVideoPlayer项目说明

项目目前UI层大部分方法和变量都是protect,虽然就封装性而言这并不是很好,但你可以继承后快捷实现你的自定义。

11830
来自专栏葬爱家族

微信小程序WePY开发框架简介

微信小程序入门门槛低、开发周期短、代码编写灵活、传播速度快等优点让微信小程序迅速火爆,开发者纷纷涌入,任何语言开发者一旦多了,就会有新的框架出来,WePY就是一...

32120
来自专栏前端黑板报

DOM小结

DOM是针对HTML和XML文档的一个API(应用程序编程入口)。DOM描绘了一个层次化的节点树,允许开发人员添加/移除和修改页面某一部分。 注:从上面的引述中...

208100
来自专栏用户2442861的专栏

chrome调试工具常用功能整理

chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css.

9610
来自专栏Python疯子

给Mac系统浏览器扩展翻译功能

Google Chrome可以即时翻译网页。可是,如果你用惯了Safari,不想安装Google Chrome,又需要对外文网页即时翻译,那么,请看下面:

1K30
来自专栏前端下午茶

Vue 使用中的小技巧

在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧,在下将不定期更...

28820
来自专栏向治洪

微信小程序实例-摇一摇抽奖

概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目...

2.9K100
来自专栏韩东吉的Unity杂货铺

零基础入门 21: UGUI Inputfield

因为一些外部原因,以后文章的发布只会在公众号内推送,取消了在蛮牛专栏的文章更新,望蛮牛小伙伴周知,关注微信公众号,可以第一时间收到新分享的推送通知。

36320
来自专栏源哥的专栏

如何在js文件中写加载Applet控件(js与jsp分离技术)

                        如何在js文件中写加载Applet控件(js与jsp分离技术)

11040
来自专栏Kevin-ZhangCG

[ SSH框架 ] Struts2框架学习之四(自定义拦截器)

22860

扫码关注云+社区

领取腾讯云代金券