前言

我们在使用微信小程序的时候，经常会发现小程序的状态栏与我们手机的状态栏不太一致。有时候状态栏的颜色与我们小程序的主题色不相符，有时候状态栏的文字内容也不太符合我们的需求。为了解决这些问题，我们需要对微信小程序的状态栏进行动态设置。在本文中，我们将探讨如何通过代码实现微信小程序状态栏的动态设置，让我们的小程序更加美观与实用。

一、标题

1.设置整个小程序通用标题，在 app.json 里设置

"window": {"navigationBarTitleText": "默认标题"
}

2.单独设置页面标题，在对应页面 json 文件里设置（子页面设置会覆盖通用设置）：

{"navigationBarTitleText": "demo"
}

3.动态设置：

<view><button bindtap="clickOn">点击我改变标题</button>
</view>

Page({clickOn() {wx.setNavigationBarTitle({title: '修改title',})},
})

展示效果

二、背景色

frontColor 前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
backgroundColor 背景颜色值，有效值为十六进制颜色
animation 动画效果

animation 的结构包括：duration 和 timingFunc。

duration 表示动画的时间。

timingFunc

linear 动画从头到尾的速度是相同的
easeIn 动画以低速开始
easeOut 动画以低速结束
easeInOut 动画以低速开始和结束

<view><button bindtap="clickOn">点击我改变状态栏背景色</button>
</view>

Page({clickOn() {wx.setNavigationBarColor({frontColor: '#ffffff',backgroundColor: '#48D1CC',animation: {duration: 1000,timingFunc: 'easeInOut'}})},
})

展示效果

三、状态栏加载

wx.showNavigationBarLoading：在当前页面显示导航条加载动画
wx.hideNavigationBarLoading：在当前页面隐藏导航条加载动画

<view><button bindtap="showCartoon">显示加载动画</button><button bindtap="hideCartoon">隐藏加载动画</button>
</view>

Page({// 显示加载动画showCartoon() {wx.showNavigationBarLoading()},// 隐藏加载动画hideCartoon() {wx.hideNavigationBarLoading()}
})

展示效果

四、返回首页按钮

隐藏返回首页按钮。微信 7.0.7 版本起，当用户打开的小程序最底层页面是非首页时，默认展示『返回首页』按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

wx.hideHomeButton();

小技巧大用处：微信小程序状态栏设置全攻略相关推荐

PC端微信机器人智能自动回复实现全攻略
PC端微信机器人智能自动回复实现全攻略程序介绍 WechatPCAPI 百度UNIT 实现代码结语程序介绍 2021/06/05 更新这个程序最大的优点就是免费,而且效果很好,环境要求不高 ...
如何玩好微信十亿流量?微趋道教你小程序推广最全攻略!
3月5日,腾讯公司董事会主席兼首席执行官马化腾在接受采访时透露,在刚刚过去的春节,微信和WeChat合并月活跃账户数超过10亿.如此巨大的流量红利,为小程序的推广提供了沃土.那么到底小程序有哪些行之有 ...
程序员跳槽全攻略（路漫漫其修远兮）
价值论 2015-07-28 使用价值说得更直白一点,就是人才如何直接或者间接的为公司挣钱. 2015-07-28 增加自己的使用价值很简单,提升自己的业务能力就好. 供需 2015-07-28 当企 ...
《程序员跳槽全攻略》读书笔记
原理篇价值论你的价值,和你技术牛不牛无关,只和你能为你的雇主提供多少价值有关.这是最根本的规则.增加自己的使用价值很简单,提升自己的业务能力就好. 供需虽然交换价值以使用价值为基础,但它更容易受 ...
《程序员跳槽全攻略》笔记
本文原创文章,转载注明出处,博客地址 https://segmentfault.com/u/to... 第一时间看后续精彩文章.觉得好的话,顺手分享到朋友圈吧,感谢支持. 使用价值 1,你的价值,和你 ...
2021年django微信扫码支付流程--全攻略(阻止回调请看下一章)
PC端,微信扫码支付, 我们产生支付二维码后,等用户支付, 用户扫码支付成功后,我们接收腾迅的回调数据但是我们如果不阻止回调,则我们的服务器会被腾迅请求很多次在几个小时之内, 所以我们一定要阻止回调 ...
微信支付 postman_微信版花呗“分付”开通入口在哪？2020年微信分付开通最全攻略！...
阅读本文前,请您先点击上面的蓝色字体,再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注免责声明图文来源于网络侵权请联系删除 ...
小技巧大用处！这些渠道让你的群发邮件更省心
群发电子邮件,也称为电子直邮(EDM),是一种强大的营销工具,使企业能够一口气接触到大量客户.然而,为了使这一战略有效地发挥作用,了解使用正确的渠道是很重要的.在本文中,我们将探索群发邮件有哪些渠道? ...
设计模式大集锦程序员面试全攻略
一.入门级程序员的面试题: 这些软件设计和设计模式的先关问题大多会出现在初学者面试情景中,什么是设计模式?特定的设计模式又是什么?等等这些概念,也许你很轻易回答这些概念,但文内提供的这些问题也许能给你 ...

小技巧大用处：微信小程序状态栏设置全攻略

前言

一、标题

二、背景色

三、状态栏加载

四、返回首页按钮

小技巧大用处：微信小程序状态栏设置全攻略相关推荐

最新文章

热门文章