微信小程序自定义单页面、全局导航栏

实现方案

一、实现的前提

1、首先查看文档，看文档里关于自定义导航栏是怎么规定的，有哪些限制；还有小程序自定义导航栏全局配置和单页面配置的微信版本和调试库的最低支持版本。

2、在app.json window 增加 navigationStyle:custom ，顶部导航栏就会消失，只保留右上角胶囊状的按钮，如何修改胶囊的颜色呢;胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 "navigationBarTextStyle":"white/black"

3、还要考虑加返回按钮和返回首页的按钮，适配不同的机型

先说下两种配置方法：

①全局配置navigationStyle：

• 调试基础库>=1.9.0
• 微信客户端>=6.6.0

app.json

{
  "usingComponents": {
    "navigationBar": "/components/navigationBar/navigationBar"
  },
  "window": {
    "navigationStyle": "custom"
  } 
}

---

②单页面配置navigationStyle

• 调试基础库>=2.4.3
• 微信客户端版本>=7.0.0

自定义的页面.json

{
  "window": {
    "navigationStyle"