通过wx.setNavigationBarTitle的API动态修改微信小程序的页面标题

2016/10/14 12:21:50 人评论 次浏览 分类:系列教程


在微信小程序的开发中,如果页面的状态改变,需要动态的修改微信小程序的页面的标题,可以通过微信小程序提供的API,wx.setNavigationBarTitle来实现动态的修改微信小程序的页面标题。
下面是动态修改微信小程序的页面标题的示例,大家可以参考一下:

示例代码:在页面中js的中onload的function中实现
  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 , });注意要在onready之后(onload也是在onready)就可以通过这个setNavigationBarTitle的API实现。



执行结果:


setNavigationBarTitle的API也支持在执行修改小程序页面标题的成功、失败和完成的状态的回调事件。

注意的wx.setNavigationBarTitle 要在onready之后设置


微信小程序开发交流群 487660230 欢迎各位微信小程序技术开发者的加入交流

相关资讯

  • 微信小程序通过wx.makePhoneCall调用一键拨打电话

    微信小程序通过wx.makePhoneCall调用一键拨打电话,主要是通过微信小程序提供的makePhoneCall的API调用拨打电话的操作。本来这个功能在WEB网页中是可以浏览器的示例代码:wx.makePhoneCall({phoneNumber: 1340000 //仅为示例,并非真实的电话号码 })

    2016/10/29 22:54:06
  • 在Json配置中修改设置微信小程序的页面标题

    打开微信开发者工具,新建一个quick start的项目,项目默认显示Hello World微信小程序的首页,微信小程序的默认标题为:WeChat;点击【编辑】进入代码编辑界面;在app.json文件中的navigationBarTitleText对应的默认值“WeChat”修改成为“我的微信小程序自定义标题”

    2016/10/12 11:26:13
  • 微信小程序开发工具常用开发快捷键

    微信小程序开发工具常用开发快捷键

    2016/9/30 13:02:28
  • 微信小程序IDE开发环境的搭建(破解版)

    关于破解版的微信开发工具IDE的说明目前小程序在内测的阶段,有邀请码你才会有属于你的微信小程序appId因为最初的微信开发工具版本在没有APPID是不可以体验或者开发的,必须经过破解,才能进行开发的。后来的版本微信官方把小程序的IDE环境直接开放,增加无AppID 模式。

    2016/9/28 21:31:34