微信小程序-自定义导航栏

自定义导航栏分两种，一种是单独某个页面做一个自定义导航；一种是所有页面的导航栏都是自定义样式

如果是所有页面的导航栏都要自定义，在app.json里找到window样式

"navigationStyle":"custom"

所有页面的就需要先自定义组件了，这里先不做详说，因为我目前项目中只是首页需要自定义导航栏，这里我先详说这个

这样当前页面自带的导航栏就没有了，然后需要你在wxml页面中就可以开始写样式了

<!-- 自定义导航栏 -->

    <view class="navStyle" style="height:{{navHeight}}px">

      <view class="navFix" style="height:{{navHeight}}pxmargin-top:{{imgTop}}px">

          <image src=""></image>

          <view style="margin-top:{{cityTop}}px">

            全国

            {{cityName}}

          </view>

      </view>

    </view>

// 获取状态栏高度

        const { statusBarHeight } = wx.getSystemInfoSync()

        // 得到右上角菜单的位置尺寸

        const menuButtonObject = wx.getMenuButtonBoundingClientRect()

        console.log('右上角菜单的尺寸：',menuButtonObject)

        const { top, height } = menuButtonObject

        // 计算导航栏的高度

        // 此高度基于右上角菜单在导航栏位置垂直居中计算得到

        const navBarHeight = height + (top - statusBarHeight) * 2

        // 计算状态栏与导航栏的总高度

        const statusNavBarHeight = statusBarHeight + navBarHeight

        this.setData({

            navHeight:statusNavBarHeight,

            imgTop:statusNavBarHeight-45,

            cityTop:statusNavBarHeight-45-25

        })

1、路径：小程序—小程序管理—添加

2、关联小程序—管理员微信扫码确认—搜索小程序名称或APPID

如：搜索小程序名称“花吖花艺”，点击下一步，即关联成功

3,、可以看到公众号已经关联了两个小程序，公众号可以关联同一主体的小程序10个，不同

1、公众号自定义菜单添加小程序入口

点击左侧菜单栏，找到“自定义菜单”，选择”+“号，添加菜单，菜单内容选择”小程序“，

d出框显示的小程序就是和此公众号绑定过的小程序，选择想关联的那个小程序即可，点击“确定”。

“金数据”表单提供了自定义表单的功能，可以自己创建表单，然后按需进行相关数据信息的收集。

可以把创建的表单分享在公众号，这样能扩展数据收集的人群。在公众号里可以通过发布链接，可以嵌入小程序等方法实现。

若进行长久的数据采集，可以通过公众号的自定义菜单实现。步骤如下：

1、登录公众号账号，在小程序管理里，添加“金数据”小程序。

2、登录金数据表单管理，查看对应的表单对应的“小程序路径”，并复制。

3、在公众号里自定义菜单，选择“跳转小程序”，粘贴对应的“小程序路径”。保存发布菜单。

---