Fork me on GitHub

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

前言

  • 在微信小程序的开发中,如果页面的状态改变,需要动态的修改微信小程序的页面的标题,可以通过微信小程序提供的APIwx.setNavigationBarTitle来实现动态的修改微信小程序的页面标题。

静态设置页面标题

  • 对应页面的json文件里面加入下面代码就可以实现页面标题的设置
    1
    2
    3
    {
    "navigationBarTitleText": "当前页标题"
    }

动态设置页面标题

  • 下面是动态修改微信小程序的页面标题的示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    onLoad: function () {
    var sign = 1;
    var times = setInterval(function(){
    if(sign > 10 )
    {
    clearInterval(times);
    }
    else{
    var tmpTitle = '微信小程序的页面标题' + sign++;
    wx.setNavigationBarTitle({
    title: tmpTitle,
    success: function(){
    console.log("当前微信小程序的页面标题为\"" + tmpTitle + "\"" );
    },
    complete: function(){
    console.log("动态修改微信小程序的页面标题-complete");
    }
    });
    }
    }, 1000);
    }
  • 关键的操作是wx.setNavigationBarTitle({ title: tmpTitle })

  • wx.setNavigationBarTitle的API也支持在执行修改小程序页面标题的成功、失败和完成的状态的回调事件
  • 注意wx.setNavigationBarTitle要在onready之后设置
    (onload也是在onready)。
------ 本文结束 ------