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

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

如果是所有页面的导航栏都要自定义，在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、在界面上点击左下角的添加菜单，就可以添加菜单了。

3、在右侧设置菜单名称。

拓展资料

微信公众号功能：

1、功能定位

微信公众平台微信主要价值：在于让企业的服务意识提升，在微信公众平台上，企业可以更好地提供服务，运营方案上面有很多方式，可以是第三方开发者模式也可以是简单的编辑模式。

2、消息推送

普通的公众账号，可以群发文字、图片、语音、视频等类别的内容。而认证的帐号，有更高的权限，能推送更漂亮的图文信息。这类图文信息也许是单条的，也许还是一个专题。

3、门店小程序

在公众平台里可以快速创建门店小程序。运营者只需要简单填写自己企业或者门店的名称、简介、营业时间、联系方式、地理位置和图片等信息，不需要复杂的开发，就可以快速生成一个类似店铺名片的小程序，并支持放在公众号的自定义菜单、图文消息和模版消息等场景中使用。

具体的 *** 作步骤如下：

1、在微信公众平台，输入微信公众号登录，进入信息统计的页面，页面左侧是一些可 *** 作的菜单；

2、点击页面左侧的“自定义菜单”选项，网页右侧会变成相应的 *** 作界面；

3、在界面上选择“添加菜单”，在窗口右侧的菜单名称位置修改成想要的栏目，左侧的预览图可以看见菜单名称的改变；

4、在已经修改好的名称右侧，点击加号，同上一步 *** 作，修改栏目的名称，一级菜单最多只能设置三个；

5、点击其中一个设置好的一级菜单，选择菜单上方d出的加号，同以上方法，在右侧修改栏目的名称；

6、设置完成后，选择其中一个二级栏目，在窗口右侧设置响应的方式，选择其中一个响应方式，选择“发送消息”，点击“图文消息”，选择“从素材库中选择”即可；

7、菜单和响应模式及信息全部设置完成以后，点击“保存并发布”，在d出的窗口中选择“确定”。成功后，页面上方会d出保存成功的提示。

---