【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)

简介: 本节介绍怎样使用uni-app——开发首页搜索框导航栏。

目录


前言


App、H5效果


小程序效果


一、兼容APP、H5的方式


二、兼容小程序


三、实现同时兼容


前言


首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下

微信图片_20220927203842.gif

App、H5效果



小程序效果


微信图片_20220927203856.gif

一、兼容APP、H5的方式

微信图片_20220927203911.png


在常见titleNView配置代码示例中可以看到基本样式的代码如下

{
  "pages": [{
    "path": "pages/index/index", //首页
    "style": {
    "app-plus": {
      "titleNView": false //禁用原生导航栏
    }
    }
  }, {
    "path": "pages/log/log", //日志页面
    "style": {
    "app-plus": {
      "bounce": "none", //关闭窗口回弹效果
      "titleNView": {
      "buttons": [ //原生标题栏按钮配置,
        {
        "text": "分享" //原生标题栏增加分享按钮,点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
        }
      ],
      "backButton": { //自定义 backButton
        "background": "#00FF00"
      }
      }
    }
    }
  }, {
    "path": "pages/detail/detail", //详情页面
    "style": {
    "navigationBarTitleText": "详情",
    "app-plus": {
      "titleNView": {
      "type": "transparent"//透明渐变导航栏 App-nvue 2.4.4+ 支持
      }
    }
    }
  }, {
    "path": "pages/search/search", //搜索页面
    "style": {
    "app-plus": {
      "titleNView": {
      "type": "transparent",//透明渐变导航栏 App-nvue 2.4.4+ 支持
      "searchInput": {
        "backgroundColor": "#fff",
        "borderRadius": "6px", //输入框圆角
        "placeholder": "请输入搜索内容",
        "disabled": true //disable时点击输入框不置焦,可以跳到新页面搜索
      }
      }
    }
    }
  }
  ...
  ]
}



我们并不需要所有的内容,本次我将介绍的是,"buttons","searchInput"的组合使用,这里的buttons其实是我的导航栏左右的两个图片,可以配合图标实现想要的功能,searchInput就是中间的搜索框

微信图片_20220927203949.png



需要在pages.json中配置,可在button中添加,不过需要注意的是,不管添加文字,矢量图片,默认都是右浮动,可以把其中一个改成左浮动,这里我使用的是阿里巴巴矢量图库的图片,下载文件,引入即可有需要的小伙伴我可以免费提供一个文件夹。


微信图片_20220927204001.png


配置代码如下

"path": "pages/index/index",
    "style": {
    "navigationBarTitleText": "小余努力搬砖",
    "app-plus": {
      "titleNView": {
      "searchInput": {
        "backgroundColor": "#f4f4f4",
        "borderRadius": "6px", 
        "placeholder": "请输入搜索内容",
        "disabled": true 
      },
        "buttons": [
      {
        "fontSrc": "/static/font/iconfont.ttf",//矢量图片引入路径
        "float": "left",
        "text": "\ue67a", //引入图片一定要带u   
        "fontSize": "24px",//大小
        "color": "#666666"
      },
      { 
        "float": "right",
        "text":"\ue661",
        "fontSrc": "/static/font/iconfont.ttf",
        "fontSize": "24px",
        "color": "#666666"
      }
          ]
}}}



为了达到跳转的效果,我要在页面同级创建文件夹,为搜索页面,我们要主页使用页面生命周期onNavigationBarSearchInputClicked(此次文件夹需要在pages.json中注册)


微信图片_20220927204030.png


来跳转到我们先要的页面

onNavigationBarSearchInputClicked(){
    uni.navigateTo({
    url:'../search/search'
    })
  }


二、兼容小程序


需要与pages同级创建一个components文件夹,在此文件夹下,不需要在用import引入,就可以注册,创建一个如下的插槽子文件夹,带同名目录。在components中的文件都不需要在pages.json注册。(这里实现的主要方式,是通过自己写的样式,来展现出一个搜索框)

<template>
  <view class='slot'>
  <slot name='left'></slot>
  <slot name='center'></slot>
  <slot name='right'></slot>
  </view>
</template>
<script>
  export default {
  name:"search-slot",
  data() {
    return {
    };
  }
  }
</script>
<style scoped>
.slot{
  width: 750rpx;
  display: flex;
}
</style>



在首页中引入插槽(不会或者忘记的,可以去学习博主的一学就会的插槽教学),其中的图片都是引入的阿里巴巴矢量图片,图片是我提前准备好的,有想要的小伙伴,私聊我。如下就是我提前准备好的,只要用class就能引入

微信图片_20220927204137.png


<search-slot class='flex'>
  <view class="left" slot='left'>
  <text class="iconfont icon-xiaoxi"></text>
  </view>
  <view class="center" slot='center'>
  <text class="iconfont icon-sousuo" @click="search"></text>
  </view>
  <view class="right" slot='right'>
  <text class="iconfont icon-richscan_icon"></text>
  </view>
</search-slot>


这里也同样需要点击搜索导航跳转到搜索页面(此次文件夹需要在pages.json中注册),是通过@click绑定事件完成的,路径还是同样的方法(创建一个专属的搜索页面)

methods: {
search(){
  uni.navigateTo({
  url:'../search/search'
})
}}


css样式代码

<style>
.flex {
  display: flex;
  height: 88rpx;
  line-height: 88rpx;
  align-items: center;
  }
  .left {
  width: 44rpx;
  flex: 0 0 44px;
  align-items: center;
  text-align: center;
  }
  .center {
  flex: 1;
  height: 60rpx;
  line-height: 60rpx;
  background-color: #eee;
  text-align: center;
  color: #ccc;
  }
  .right {
  width: 44rpx;
  flex: 0 0 44px;
  align-items: center;
  text-align: center;
  }
</style>


三、实现同时兼容


通过以上代码,已经实现了在app、h5、小程序,实现搜索框导航栏,但是如果想要同时满足app、h5、小程序,就需要对此作出一个区域性的判断。


如果没有按兼容性显示,同时配置如上的两个搜索框导航栏,在app、h5就会出现两个搜索框,因为它们兼容小程序的配置


微信图片_20220927204226.png


但是小程序只有一个,因为小程序不兼容在 pages.json中配置的搜索框

微信图片_20220927204241.png



这时候不用紧张,我们还记得媒体查询吗,这里的方式,和媒体查询几乎是一个意思,在特定的环境使用特定的样式,我们这里通过官网文档可以找到条件编译


微信图片_20220927204253.png


使用很简单,只要将代码包裹进条件中即可,我们这里只要将小程序的包裹进,只在微信小程序中编译的条件中即可

#ifdef  MP
需条件编译的代码
#endif


代码如下


把配置在首页的小程序的导航栏包裹住(小程序不兼容在 pages.json中的配置,这里就不用在意是否需要条件编译)这样,小程序的搜索框导航不会在app、h5出现了。从而实现了同时兼容的效果。

<!--#ifdef MP -->
  <search-slot class='flex'>
    <view class="left" slot='left'>
    <text class="iconfont icon-xiaoxi"></text>
    </view>
    <view class="center" slot='center'>
    <text class="iconfont icon-sousuo" @click="search"></text>
    </view>
    <view class="right" slot='right'>
    <text class="iconfont icon-richscan_icon"></text>
    </view>
  </search-slot>
  <!--#endif-->


相关文章
|
14天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
197 7
|
13天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
242 1
|
14天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
106 3
|
17天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
99 1
|
18天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
243 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
13天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
135 0
|
20天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
35 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
92 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
91 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
3月前
|
存储 小程序 JavaScript