开发自定义微信小部件组件，实现tabBar、navBar

应用项目需要提取其中一个模块来制作小部件。功能有： 底部标签栏、顶部标题栏

选择自定义有两个原因：

• Chatly 支持不返回图标。 Android 上标题显示在左侧，iOS 上标题显示在中间。
• tabBar的底边不支持点击移动到页面，图标布局也不支持tabBar的身高。

下面两张图是简单的效果。

启动组件输出页面如下：

// 引入组件
<navbar navbar-data='{{nvabarData}}'></navbar>
// 内容
<view class="home-page">
  <view style='margin-top: {{height}}px;margin-bottom:10px;'></view>
</view>
// 引入组件
<tabbar tabbar="{{tabbar}}"></tabbar>
复制代码

定制tabBar组件分析

请参阅文章顶部原作者的分析。这里有一些陷阱。

• 虽然tabbar是在组件js子文件中设置的，但仍然需要定义❙。 tabbar，有关配置的更多信息，请参阅文章顶部的github链接。
• 加载页面时需要重新设置

wx.hideTabBar({
    })
复制代码

因为当你点击分享页面左上角的主页图标返回首页时，两个♼❀遥明会出现，所以在首页你需要再次隐藏tabbar。

• 注意路径问题。新版本开发工具的components文件必须在miniprogram级别下，与pages❀同级别，否则路径可能为该组件已启用。

自定义navBar组件分析

小组件中的分页没有后退按钮。为了让用户能够返回到我们的小部件，我们自定义了后退按钮以及导航栏中的后退按钮以返回主页。按钮。

这里我们使用小部件的场景值和全局变量share来判断它是否来自共享页面。在app.js中处理：

// 判断是否由分享进入小程序
    if (options.scene == 1007 || options.scene == 1008) {
      this.globalData.share = true
    } else {
      this.globalData.share = false
    };
复制代码

要调整顶部的高度，margin-top会动态设置❀♹。布局高度 ，这个高度是通过计算系统状态栏的高度得到的。

 getSystemInfo: function () {
    let t = this;
    wx.getSystemInfo({
      success: function (res) {
        // 获取高度
        t.globalData.height = res.statusBarHeight;
      }
    });
  },
复制代码

然后在data页面设置组件数据和状态栏高度：

data: {
    // 组件所需的参数
    nvabarData: {
      showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
      title: '让故事发生', //导航栏 中间的标题
    },
    // 此页面 页面内容距最顶部的距离
    height: app.globalData.height * 2 + 20,
    // tabbar
    tabbar: {},
  },
复制代码

原作者的屏幕和图标隐藏逻辑与我的预期相反。我想要实现的是，左上角的返回主页图标仅在来自共享页面时可见。通常只有后退按钮可见。编辑的Wxml如下：

      <view bindtap='_navback' wx:if='{{!share}}'>
        <image src='/images/back.png' mode='aspectFill' class='back-pre'></image>
      </view>
// 这里把 share 取反去掉
      <view class='navbar-v-line' wx:if='{{share}}'></view>
// 这里把  share 取反去掉
      <view bindtap='_backhome'  wx:if='{{share}}'>
        <image src='/images/icon/icon_home.png' mode='aspectFill' class='back-home'></image>
      </view>

作者：Aller_dong
链接：https：//juejin.im/post/5c3b35d2e5444d740来源：Nuggets
版权属于作者。商业转载请联系作者获得许可。非商业转载请注明出处。