关键词：
目录
前言
首页都会提供一个搜索框给到客户，让客户自己去搜索自己想要的内容，这里就需要导航栏，来实现搜索页面的跳转，效果如下
App、H5效果
小程序效果
一、兼容APP、H5的方式
在常见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就是中间的搜索框
需要在pages.json中配置，可在button中添加，不过需要注意的是，不管添加文字，矢量图片，默认都是右浮动，可以把其中一个改成左浮动，这里我使用的是阿里巴巴矢量图库的图片，下载文件，引入即可有需要的小伙伴我可以免费提供一个文件夹。
配置代码如下
"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中注册）
来跳转到我们先要的页面
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就能引入
<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就会出现两个搜索框，因为它们兼容小程序的配置
但是小程序只有一个，因为小程序不兼容在 pages.json中配置的搜索框
这时候不用紧张，我们还记得媒体查询吗，这里的方式，和媒体查询几乎是一个意思，在特定的环境使用特定的样式，我们这里通过官网文档可以找到条件编译
使用很简单，只要将代码包裹进条件中即可，我们这里只要将小程序的包裹进，只在微信小程序中编译的条件中即可
#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-->uni-app使用微信小程序消息推送
参考技术Auni-app开发小程序时会用到推送前端基于基础用法做一个封装 查看详情
第五章“我要点爆”微信小程序云开发实例之从云端获取数据制作首页(代码片段)
下面我们来实现从云端获取数据，完成首页世界页面index的制作，首页分为4个数据列表导航页面，页面具体内容如下：推荐：为用户推荐最新的点爆信息，它包含文本点爆内容和语音点爆内容。文爆：筛选出文字点爆内容，只显... 查看详情
uniapp开发的微信小程序,没有appid可以打开吗
...打开微信小程序的。参考技术A没有appid是无法打开和使用uni-app开发的微信小程序的，因为appid是小程序的唯一标识，是每一个小程序的唯一标识，没有appid的话，就无法在微信小程序中打开和使用uni-app开发的小程序，所以，在使... 查看详情
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏。2算法描述首先就是对微信小程序开发者工具的配置，官网搜索后进入，选择稳定版，Windows64位下载。然后点开开发者工具，选择小程序，点击图片位置的... 查看详情
uniapp外包杯学习笔记day07|微信小程序轮播图分类导航楼层图的开发与实现(代码片段)
...建home分支2、配置网络请求由于平台的限制，现需要建立uni-app中使用第三方包请求网络数据请求在uni-app项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求 1.轮播图的外层容器是swiper2.每个轮播项是swiper-item... 查看详情
《微信小程序开发》页面导航最强详解|如何对小程序页面进行跳转？(代码片段)
...换方式、传参方式等有所不同。同时微信小程序的导航跟uni-app十分相似，学会原生的微信小程序，相信对于使用uni-app是没有问题的。在本文演示代码中，tabbar页面配置如下,其余页面均为非tabbar页面。"tabBar":"... 查看详情
uni-app发布到微信小程序
一、工具HbuilderX下载地址微信开发者工具下载地址二、配置正确的微信appid填写正确的appid（已被授权为开发者或者是管理者）三、hbuildx发行到小程序-微信四、微信开发者工具-上传五、小程序管理后台，设置为体验... 查看详情
如何抓取微信小程序的数据
推荐使用小程序数据助手，小程序数据助手”是微信公众平台发布的官方小程序，支持小程序相关的开发和运营人员查看自身小程序的运营数据。那么小程序数据助手的具体功能有哪些？在哪里？怎么使用？一起来看吧。 ... 查看详情
微信小程序用接口b生成的二维码，默认进入啥首页
...种方式：线下扫码二维码是获取小程序最基本的方式。在微信中打开扫一扫，扫描线下二维码即可进入小程序。或者是通过长按二维码会出现识别二维码的菜单，点击进去就可以了第二种方式：微信搜索在微信客户端首页的搜索... 查看详情
在uni-app框架中使用rem（h5和微信小程序）
参考技术A将在学习uni-app过程中遇到的问题记录一下：注意:<page-meta>需要放在页面的第一个标签。1.在uni-app框架中使用rem（h5和微信小程序）2.index.html的设置 查看详情
微信小程序二
学了一段时间微信小程序，但是没有实战，就不知道自己哪里没掌握，哪里的知识点不清楚。所以做一个豆瓣评分的小程序，试试~页面顶部在创建完微信小程序后，可以在首页编写豆瓣顶部颜色和标题设置。... 查看详情
uni-app微信小程序上传图片文件uni.uploadfile()、uni.chooseimage()
参考技术A微信小程序项目注册需要上传门店信息，所以需要用到上传图片功能。可以分为两种情况：官方链接：uni.uploadFile二、统一上传点击选择框首先使用uni.chooseImage()，从本地相册选择图片或使用相机拍照。成功则返回图片... 查看详情
uni-app开发微信小程序使用微信小程序的插件(代码片段)
假如使用uni-app开发微信小程序需要用到官方插件----OCR插件,插件地址如下：OCR插件申请方式见插件地址介绍。本文主要记录调用方式1.在manifest.json的“mp-weixin”里添加"plugins":"ocr-plugin":"version":"3.0.1",... 查看详情
uni-app微信小程序获取手机号并解密
参考技术A1、点击某个按钮，弹出请求微信授权界面。2、点击允许按钮，获取用户微信绑定的手机号与openId3、请求后端接口，实现登录。微信公众平台--->登陆--->开发--->开发管理--->开发设置查看APPID、secret在把上面获... 查看详情
微信小程序如何通过长按二维码进入使用？
微信小程序使用的方法有哪些？线下扫码、微信搜索、公众号关联、好友推荐、历史记录查找微信小程序通过长按二维码进入使用的方法及步骤：线下扫码：二维码是获取小程序最基本的方式，在微信中打开扫一扫，扫描线下二... 查看详情
微信小程序，实现首页弹框活动引导功能(代码片段)
目录1.需求2.数据库设计3.Java后台配置实现4.微信小程序前端实现1.需求后台可以配置活动时间，在活动期间，自动在小程序首页，以弹框形式显示活动图片。用户可以关闭活动图片的显示。1.管理后台可以新增活动时... 查看详情
微信小程序，实现首页弹框活动引导功能(代码片段)
目录1.需求2.数据库设计3.Java后台配置实现4.微信小程序前端实现1.需求后台可以配置活动时间，在活动期间，自动在小程序首页，以弹框形式显示活动图片。用户可以关闭活动图片的显示。1.管理后台可以新增活动时... 查看详情
uni-app使用腾讯地图（三）
参考技术Auni-app使用腾讯地图（一）uni-app使用腾讯地图（二）为什么要用个性化地图，提高不同场景下地图的展现效果和用户体验。为什么选择腾讯位置服务个性化地图：1.登录腾讯位置服务2.验证手机与邮箱3.申请开发密钥（Key... 查看详情