Top navigation setting in H5+ WeChat applet: app-plus

1. Prerequisites:

First of all, the uniapp code is sometimes incompatible between WeChat applets, App, and H5. For example, the top navigation is normally set through app-plus, and the H5 side is suitable.

The result of the purpose effect display: as shown in the figure, we need to achieve such an effect

1. H5 display:

2. Display on the WeChat Mini Program:

The search icon and the message icon do not appear at the top

2. Implementation description of H5 terminal:

1. View the official documentation (app-plus):

https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview-searchinput

As shown in the picture, we can also see that it is only compatible with App+H5, not compatible with applets

There is a titleNview attribute under app-plus for us to implement the navigation bar

2. titleNView specific attributes:

What we need to use here is the buttons attribute

Detailed link: https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview

3.buttons

Detailed link:

Attributes needed:

float fontSrc text等

4. Concrete implementation

Code display:

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
        "path" : "pages/index/index",
        "style" :                                                                                    
        {
              "navigationBarTitleText": "首页",
            "navigationBarBackgroundColor": "#ffffff",
            "app-plus": {
                            "titleNView": {
                            "buttons": [
                                                {
                                                "float": "left",
                                                "fontSrc":"./static/iconfont.ttf",
                                                "text": "\ue63d"
                                                },
                                                {
                                                "float": "right",
                                                "fontSrc":"./static/iconfont.ttf",
                                                "text": "\ue67a"
                                                }
                                            ]
                                        }
                                },
            "enablePullDownRefresh": false
        }
    },
]

Code image display:

fontSrc: font file path, I use the icon of iconfont, text: must start with \u

Effect realization picture:

3. WeChat Mini Program Implementation Description:

1. Code writing on the index home page

image display:

Code display:

html part:

<template>
    <view>
        <view class="wx-top">
        <!-- 搜索图标 -->
        <view class="iconfont icon-sousuo"></view>
        <view>首页</view>
        <!-- 消息图标 -->
        <view class="iconfont icon-xiaoxi"></view>
        </view>
    </view>
</template>

css style section

<style lang="scss" scoped>
    .wx-top{
        display: flex;
        justify-content: space-between;
        padding: 0 40rpx;
        text-align: center;
        height: 200rpx;
        line-height: 200rpx;
        align-items:center;
            .iconfont{
                font-size: 40rpx;
              }
            .icon-sousuo{
                font-size: 50rpx;
              }
        }
</style>

2. Set navigationStyle in style: custom to reset the navigation, otherwise two titles will appear

Specific highlights:

Code image:

3. Effect realization display:

4. Compatibility issues

At this time, everyone must think that the top navigation of the WeChat applet has been realized, and the top navigation of H5 is also available, so it is finished?

this time is wrong

Problem analysis: At this time, two top navigations will appear on the H5 side

Reason: Because we set the titleNView under the page itself, we will realize the top navigation on the H5 side

In addition, we handwritten a piece of code in index.vue to realize the top of the WeChat applet, so there will be two top navigations in H5 at this time

image display:

Solution: (MP-WEIXIN)

只需要通过if在index.vue中进行判断即可

图片展示：

代码展示：

<!-- #ifdef MP-WEIXIN -->
<!-- MP-WEIXIN是微信小程序端 -->
<view class="wx-top">
    <!-- 搜索图标 -->
    <view class="iconfont icon-sousuo"></view>
    <view>首页</view>
     <!-- 消息图标 -->
    <view class="iconfont icon-xiaoxi"></view>
 </view>
 <!-- #endif -->

五、整体代码展示

pages.json文件里：

代码：

  "app-plus": {
       "titleNView": {
            "buttons": [
                    {
                    "float": "left",
                    "fontSrc":"./static/iconfont.ttf",
                    "text": "\ue63d"
                    },
                    {
                    "float": "right",
                    "fontSrc":"./static/iconfont.ttf",
                    "text": "\ue67a"
                    }
                ]
            }
         },

index.vue文件里：

html部分

代码：

 <view>
    <!-- #ifdef MP-WEIXIN -->
    <!-- MP-WEIXIN是微信小程序端 -->
            <view class="wx-top">
            <!-- 搜索图标 -->
            <view class="iconfont icon-sousuo"></view>
            <view>首页</view>
            <!-- 消息图标 -->
            <view class="iconfont icon-xiaoxi"></view>
            </view>
     <!-- #endif -->
 </view>

css部分：

.wx-top{
     display: flex;
     justify-content: space-between;
     padding: 0 40rpx;
     text-align: center;
     height: 200rpx;
     line-height: 200rpx;
     align-items:center;
         .iconfont{
                font-size: 40rpx;
            }
         .icon-sousuo{
                font-size: 50rpx;
            }
        }

代码：

至此，这个顶部导航的一点兼容问题就结束了，如有不明白的欢迎大家的指正，希望能够共同进步，也谢谢大家的预览。