艺灵设计

全部文章
×

微信小程序从入坑到放弃之十五:动态设置当前页面标题

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2018-11-26 16:18:45 - 阅: - 评:0 - 积分:0

摘要:
微信小程序中当前页面标题在.json文件中通过navigationBarTitleText参数进行控制。如果想动态修改,可以使用wx.setNavigationBarTitle这个API......

每个网页都有标题,即使是在微信小程序中也不例外。但是,在微信小程序中,页面标题的设置是放到.json文件中的。

一、设置页面的标题

拿首页来说,进入/pages/index/index后页面的标题并不是“首页”而是微信默认的WeChat。如图:微信小程序index页面标题默认为weChat微信小程序index页面标题默认为weChat如果想让WeChat变成“首页”,我们需要在index.json页面中写入:"navigationBarTitleText": "首页"保存就行了。如图:在json文件中通过navigationBarTitleText可以设置当前页面的标题在json文件中通过navigationBarTitleText可以设置当前页面的标题

二、动态设置页面的标题

刚开始觉得,既然页面可以设置标题,干嘛还要动态设置标题呢?直到后来才发现,有些时候确实是需要动态设置当前页面标题的。比如:处理支付状态时,由于两个页面极其相似,所以我就只写一个页面然后根据不同参数来控制当前页面标题。效果如图:微信小程序之商城项目中的支付状态页面

2.1、wx.setNavigationBarTitle

在微信小程序官方文档中可以找到wx.setNavigationBarTitle这个API,主要功能就是动态设置页面标题,文档地址;//developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.html?search-key=wx.setNavigationBarTitle

2.1、设置动态标题

  1. onLoad: function (options) {
  2.  if(options.status){
  3.   var title="支付成功";
  4.  }else{
  5.   var title="支付失败";
  6.  }
  7.  wx.setNavigationBarTitle({
  8.   title:title
  9.  });
  10. }

通过跳转链接中的status这个参数来为当前页面设置不同的标题。由于此时我们的首页是没有任何参数的,所以保存后会默认显示“支付失败”。如图:wx.navigationBarTitleText动态设置当前页面的标题

好了,现在看官应该知道如何修改微信小程序页面标题了吧!

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/xwzj/2018-11-26/weixin-navigationBarTitleText.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 微信 小程序 navigationBarTitleText wx.setNavigationBarTitle 页面标题 动态标题

上一篇: 微信小程序从入坑到放弃之十四:竖向滚动导航特效及隐藏滚动条   下一篇: 微信小程序从入坑到放弃之十六:多页面导航栏背景换肤功能

评论区