1. 什么是微信小程序？
微信小程序是指能在微信平台完全运行的应用，它不需要下载和安装就能使用，用户可以在不离开微信的情况下，轻松地使用各种第三方服务。小程序被广泛应用于商家微店、各类社交、地图导航和出行等领域。
1.1 小程序和APP的区别
小程序和APP的最大区别在于：小程序无需安装即可使用（用户扫码或搜索后即可打开使用），而APP需要用户下载安装后使用。另外，小程序体积小，启动快，更加简洁；APP可以使用更多的功能，例如推送、直接调起摄像头等。
1.2 小程序的优势
无需下载安装：方便快捷，用户无需下载占用手机存储空间，一键即可使用。
节省流量：小程序文件体积小，比APP或者网页加载快很多，更加节省流量。
便捷分享：小程序被分享后，用户可直接从分享的页面进入小程序，并进行使用。
更多社交属性：小程序可以直接分享到微信朋友圈、微信好友等，方便、快捷。
便于运营：小程序可接入微信支付、微信社交流量，容易获得微信的推广和接口支持。
2. 小程序中的导航栏
类似APP、网页等应用，微信小程序也具有导航栏用于显示当前页面的标题、返回按钮等信息。
2.1 常规导航栏的实现
在小程序中，常规的导航栏可以使用界面布局组件navigationBar实现，其中可以设置标题、颜色、返回按钮等属性。
// 在.json文件中指定navigationBar的样式和标题
"navigationBarTitleText": "我的小程序",
"navigationBarBackgroundColor": "#2f4554",
"navigationBarTextStyle": "white",
// 在.wxml文件中使用navigationBar组件
<navigationBar title="我的小程序"
background-color="#2f4554"
color="white" />
在实际使用中，如果需要实现更灵活的需求，如添加搜索框、自定义返回按钮等，可以使用自定义导航栏。
2.2 自定义导航栏
自定义导航栏可以满足更多特殊需求，例如需要实现不同页面的导航栏样式、触摸透明度修改等。
自定义导航栏的实现方法如下：
// 在.json文件中设置页面样式
"navigationBarTextStyle": "white",
"usingComponents": {
"custom-bar": "/components/navigationBar/navigationBar"
},
// 在.wxml文件中使用自定义导航栏组件
<custom-bar bgColor="{{bgColor}}"
text="{{title}}"
back="{{back}}"
font-color="{{fontColor}}">
<slot name="search"></slot>
<slot name="btn"></slot>
</custom-bar>
// 在.js文件中设置自定义导航栏的操作
Page({
data: {
title: '我的小程序',
bgColor: '#2f4554',
fontColor: '#ffffff',
back: true,
},
onLoad: function() {
// 设置状态栏颜色
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#2f4554',
})
},
})
注意：自定义导航栏的实现方法可能因开发者工具版本而有所不同，最好查看开发者工具的官方文档进行操作。
3. 使用WeUI框架实现自定义导航栏
WeUI是一种基于微信原生视觉体验的UI框架，它包含导航栏、按钮、标签等组件，使得开发者快速构建微信小程序页面并提供好的用户体验。因而在实现自定义导航栏时可以使用WeUI框架提供的导航栏组件navbar。
3.1 引入WeUI框架
在小程序中引入WeUI框架，需要先下载WeUI源代码并引用样式表和脚本文件。
// 在小程序页面中引入样式表与脚本文件
// 表示在app.wxss文件中引入.weui.wxss文件
@import "../../styles/weui.wxss";
// 在页面的config中引入目前需要使用的楼层
"usingComponents": {
"weui-navbar": "../../components/navbar/navbar"
}
3.2 使用WeUI组件navbar
在页面中使用navbar组件，需要设置以下属性：
bgcolor：导航栏背景颜色
color：导航栏文字颜色
back：是否显示返回按钮
title：导航栏标题
使用方法如下：
// 在.wxml文件中使用WeUI的navbar组件
<weui-navbar title="我的小程序"
bgcolor="#2f4554"
color="#ffffff"
back="{{true}}"></weui-navbar>
注意：在使用WeUI组件navbar时，需要注意组件的数据绑定，例如是否显示返回按钮，需要使用{{true}}而不是true。
4. 自定义导航栏的使用场景
自定义导航栏一般适用于需要在导航栏中添加搜索框、自定义返回按钮、更改触摸透明度的场景。
4.1 添加搜索框
在需要搜索框的页面中，可以通过slot来设置导航栏中的搜索框，具体代码如下。
// 在自定义导航栏的组件中添加slot
<!-- components/navigationBar/navigationBar.wxml -->
<view class="search">
<slot name="search"></slot>
</view>
// 在被引用的页面中设置搜索框
<!-- pages/page/page.wxml -->
<custom-bar bgColor="{{bgColor}}"
text="{{title}}"
back="{{back}}"
font-color="{{fontColor}}">
<icon type="search" slot="search"/>
</custom-bar>
4.2 自定义返回按钮
通过在自定义导航栏中添加响应返回按钮的控件，可以实现不同于默认导航栏样式的返回按钮。
// 在自定义导航栏的组件中添加slot
<!-- components/navigationBar/navigationBar.wxml -->
<view class="left"
bindtap="goBack"
wx:if="{{back}}">
<slot name="btn"></slot>
<image class="back-img" src="/images/icon-back.png"/>
</view>
// 在被引用的页面中设置自定义的返回按钮
<!-- pages/page/page.wxml -->
<custom-bar bgColor="{{bgColor}}"
text="{{title}}"
back="{{back}}"
font-color="{{fontColor}}">
<image src="/images/icon-close.png" slot="btn"/>
</custom-bar>
// 在自定义导航栏的组件中添加响应返回事件
goBack() {
wx.navigateBack();
}
4.3 更改触摸透明度
// 在被引用的页面的.css文件中设置透明度
nav.nav-bar {
background-color: ${({ bgColor }) => bgColor};
opacity: 0.7;
transition: opacity 350ms;
}
// 在被引用的页面的.js文件中添加触摸透明度变化事件
onShareAppMessage() {
this.setData({
isTouched: false,
});
return {
title: "我的小程序",
path: "/pages/page/page",
};
},
handleTouchStart() {
this.setData({ isTouched: true });
},
handleTouchEnd() {
this.setData({ isTouched: false });
}
5. 总结
自定义导航栏在小程序中可以满足更多特殊需求，例如需要实现不同页面的导航栏样式、触摸透明度修改等。开发者可以选择常规导航栏、WeUI导航栏、或者自定义导航栏等方式实现，根据不同的业务场景进行选择。