微信小程序> 小程序动态设置页面标题

小程序动态设置页面标题

浏览量:1753 时间: 来源:alexzt

为提高微信小程序的用户体验,原则上设计页面时,页面顶部标题应随内容不同进行修改。


微信小程序固定架构

  • pages
    • example
      • example.js
      • example.json
      • example.wxml
      • example.wxss
  • utils
  • app.js
  • app.json
  • app.wxss

微信小程序默认架构中存在全局设置文件app.json,用以设置跳转页面链接、窗体格式、TabBar以及网络超时等。

页面标题有两种需求存在:页面功能固定(如:设置功能、个人信息展示功能),该类页面可采用在功能页面配置.json文件的形式;另一类需求为页面内容与业务关联性比较强,需要从数据库中获取数据后方可确定页面标题,该类页面需在功能页面加载时采用动态设置的方式。

1. 页面标题内容固定

1.1示例:

//页面标题代码在example.json文件中的书写格式{    "navigationBarTitleText": "充值业务"}
  • 1
  • 2
  • 3
  • 4

1.2示图:

小程序

2. 随数据库返回内容动态更新页面标题

//example.js加载时动态设置页面标题//获取应用实例var app = getApp();Page({  data: {},  onLoad: function (options) {    var that = this;    that.setData({      mername: options.mername//options为页面路由过程中传递的参数    })    wx.setNavigationBarTitle({      title: that.data.mername//页面标题为路由参数    })  },  onReady: function () {    // 页面渲染完成  },  onShow: function () {    // 页面显示  },  onHide: function () {    // 页面隐藏  },  onUnload: function () {    // 页面关闭  }})

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

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