每个人都可以，
拥有SSL证书

前阵子维护一个微信小程序项目，顶部导航栏是自定义的，基于 weui-navigation-bar 扩展。结构看着没什么大毛病，但线上偶尔有反馈说左侧返回按钮不见了，或者在不同机型上宽度对不齐。查了一下代码，大概长这样：

<view class="weui-navigation-bar {{extClass}}">
  <view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
    <view class='weui-navigation-bar__left' style="{{leftWidth}};"> 
      <!-- 按钮内容 -->
    </view>
  </view>
</view>

问题就出在左侧这块。leftWidth 这个变量直接在 style 里用，某些场景下会被别的样式覆盖成 0 或者 auto，又没有设置 flex-shrink，结果在 flex 容器里按钮被挤没了。还有一次是动态样式变量 color、background 没传默认值，导航栏直接变成透明加白字，根本看不清。

改起来思路不复杂，但有两个点容易绕进去。一个是动态样式传递的兜底。如果父组件没有给 extClass、color、background 这些变量赋初始值，或者某些页面忘了传，渲染出来的 style 字符串就会缺东西，比如 color: ; 这种空值浏览器不会报错，可样式就丢了。

所以要在组件的样式文件里把默认值写好，或者用 computed 给个默认值，保证不管外面传不传，都有个可用的底色和字色。

另一个是左侧按钮的宽度和收缩问题。leftWidth 一般是根据内容计算出来的，但如果在 flex 布局里外层空间不够，又没有禁止收缩，按钮就会缩成 0。加上 flex-shrink: 0 就解决了。顺便把 leftWidth 改成 width 属性写进 style，避免和内联样式冲突。代码就变成这样：

<view class="weui-navigation-bar {{extClass}}">
  <view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
    <view class="weui-navigation-bar__left" style="width: {{leftWidth}}; flex-shrink: 0;">
      <!-- 按钮内容，如返回图标或文字 -->
    </view>
    <view class="weui-navigation-bar__title">
      <!-- 标题内容 -->
    </view>
    <view class="weui-navigation-bar__right">
      <!-- 右侧按钮内容 -->
    </view>
  </view>
</view>

这里还补上了中间标题和右侧按钮的占位，实际业务里这两块经常用到，提前留好结构后面会省很多事。

再说响应式。

leftWidth 如果写死一个固定像素值，在全面屏和普通屏上表现差异很大。可以用媒体查询或者直接传百分比、vw 单位进去，或者更省心地让 flex 布局自己算，只给 min-width 和 padding 限制一下。这样在不同设备上按钮不会过大或过小。

代码可读性方面也顺手整了一下。原代码把动态样式和内联样式全揉在一行，改的时候得上下翻。后面我把导航栏分了三块，用注释隔开，一眼就能看出左中右分别控制什么。

业务逻辑也不复杂，但多人维护时这些小习惯挺管用。

这些修完上线后，导航栏按钮消失的反馈就没再出现过。其实 weui-navigation-bar 底子不错，就是自定义传参多了以后，一些边角情况得自己兜住。写出来当个记录，免得下次再踩同样的坑。