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

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

浏览量:691 时间: 来源:moTzxx

○ 前言

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎