正文 

当前位置： 首页 > IT > java教程

[小黄书小程序]导航栏和标题栏界面(代码片段)

天地会珠海分舵 天地会珠海分舵     2022-12-04     113

关键词：

我们前面几章已经将小黄书的后台基础框架给搭建好了。后台的小黄书相关的业务逻辑，会在往后根据客户端的业务需求来进行实现。

今天起我们会开始小黄书小程序的实现。

我们先看下小红书应用的主界面。

这一篇文章中我们主要是要搞定以下界面的UI呈现：

  • 将最下面的导航栏的界面呈现
  • 最上面的标题栏的界面呈现

这里我们假设您已经做好以下准备，如果没有的话，请自行百度：

  • 已经安装微信web开发者工具： 我们可以在该工具上进行小程序开发和调试，所以对我们来说它更像是个IDE。但，作为IDE来说，它还很不完善，代码编辑起来也很麻烦，所以我建议用Webstorm来做代码开发，但是用微信开发者工具来做调试。
  • 已安装webstorm：我们可以在微信开发者工具中打开项目来进行调试，但是在webstorm中对代码进行开发和编辑。微信开发者工具会监控代码的改动，一旦我们在webstorm中进行代码的修改，保存后小程序将自动显示修改后的内容。
  • 已经注册小程序：我们需要根据小程序的appid来发布和在真实机器的微信上运行我们的小程序。

1. 导航栏界面实现

微信小程序的开发简易教程请查看官网：
https://mp.weixin.qq.com/debug/wxadoc/dev/

看完后我们对小程序的开发流程，以及代码文件的功能和应该有个大概的了解。

1.1. 小程序文件结构和功能简介

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，比如最上层的四个全局文件:

  • .js后缀的文件是脚本文件：比如在最上层的app.js中，我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量、实现页面的业务逻辑。

  • .json后缀的文件是配置文件: 比如最上层的app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。

  • .wxss后缀的是样式表文件: 比如最上层的app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

  • .wxml后缀的文件是页面结构文件：最上层的全局配置中不需要这个文件。但是我们每个页面中至少有一个wxml文件，对应的是一个页面的html文件。

1.2. 生成小程序项目

根据官网的流程生成小黄书项目:
https://mp.weixin.qq.com/debug/wxadoc/dev/

微信web开发者工具会为我们生成基本的小程序文件，比如上面提及的：

  • app.json等基本配置文件
  • 同时还是生成两个基本的页面index和 logs。这些我们都不需要用到，所以可以忽略它们。

1.3. 图标准备

参考小红书的操作，导航栏总共有5个tab。其中每个tab都有对应的图标。同时，选中后的图标和没有选中的图标的颜色是不一样的。所以，我们这里需要为每一个标签准备两个形状一样但颜色不同的图标：

  • 灰色：代表没有选中的默认颜色
  • 黄色： 因为我们是小黄书，为了和小红书区别开来，我们小黄书的颜色基调就是黄色。

网上有很多提供免费图标的网站，我这里选择的是：
https://icons8.com/
因为这个网站可以让我选中一个图标后快速的修改不同的颜色，然后下载同一个图标不同颜色的版本。

将需要的图标保存到小程序项目的res/icons/目录下面。

往下我们主要是修改app.json文件来配置我们的导航栏

1.4. 页面文件配置

首先，我们需要修改app.json中的pages选项:

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

我们的5个页面配置如下:

  "pages": [
    "pages/home/home",
    "pages/search/search",
    "pages/shopping/shopping",
    "pages/messages/messages",
    "pages/about/about"
  ],

分别对应我们导航栏下面看到的5个页面的入口:

  • 首页
  • 发现
  • 购买
  • 消息
  • 我

这里特别需要注意的是：数组的第一项代表小程序的初始页面。我们在启动小程序的时候会首先进入到这个页面中去。

1.5. 导航栏配置

导航栏主要是通过tabar选项来完成的。

如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

tabar可以放在顶部，也可以放在底部。参考小红书，我们会在底部呈现，且只有放在底部我们才能将上面下载的图标等显示出来。

  • 当设置 position 为 top 时，将不会显示 icon

配置如下:

  "tabBar": 
    "selectedColor": "Orange",
    "borderStyle": "grey",
    "backgroundColor": "white",
    "list": [
      
        "pagePath": "pages/home/home",
        "iconPath": "res/icons/home_100px_default.png",
        "selectedIconPath": "res/icons/home_100px_selected.png",
        "text": "首页"
      ,
      
        "pagePath": "pages/search/search",
        "iconPath": "res/icons/search_100px_default.png",
        "selectedIconPath": "res/icons/search_100px_selected.png",
        "text": "发现"
      ,
      
        "pagePath": "pages/shopping/shopping",
        "iconPath": "res/icons/cart_100px_default.png",
        "selectedIconPath": "res/icons/cart_100px_selected.png",
        "text": "购买"
      ,
      
        "pagePath": "pages/messages/messages",
        "iconPath": "res/icons/message_100px_default.png",
        "selectedIconPath": "res/icons/message_100px_selected.png",
        "text": "消息"
      ,
      
        "pagePath": "pages/about/about",
        "iconPath": "res/icons/avatar_100px_default.png",
        "selectedIconPath": "res/icons/avatar_100px_selected.png",
        "text": "我"
      
    ]

这里的各项配置的意义我们都可以在官网中很方便的找到：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

这里需要提一下的是每个标签的iconPath和selectedIconPath两个配置，分别代表了上面说的:

  • 没有选中时显示的图标: iconPath选项
  • 选中时显示的图标: selectedIconPath选项

到此为止，我们的页面呈现将如下所示:

2. 顶部导航栏配置

顶部导航栏的配置是通过修改windows选项来实现的。

用于设置小程序的状态栏、导航条、标题、窗口背景色。

实现如下:

  "window": 
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "orange",
    "navigationBarTitleText": "小黄书",
    "navigationBarTextStyle": "black"
  ,

呈现效果如下：

3. 结语

详细实现请查看github中的代码。

  • git clone https://github.com/zhubaitian/XiaoHuangShuXiaoChengXu.git
  • cd XiaoHuangShuXiaoChengXu/
  • git checkout CH01

这一系列文章其实我写了有段时间了，后来忙起来忘了发布了😓。

最后想推下我最近发布的一个小程序：三日清单，希望朋友们能多支持。.

具有标签栏和导航栏的 iPhone 应用程序

】具有标签栏和导航栏的iPhone应用程序【英文标题】：iPhoneappwithtabbarandnavigationbaraspeers【发布时间】：2010-04-1506:08:55【问题描述】：我正在尝试编写一个使用导航栏和标签栏的应用程序（我正在收集）这是一种不寻常的方式。基... 查看详情

android6.0隐藏导航栏和状态栏(代码片段)

frameworks\\base\\core\\res\\res\\values\\dimens.xml<!--Heightofthestatusbar-->mm<dimenname="status_bar_height">0dp</dimen><!--Heightofthebottomnavigation/systembar.-- 查看详情

android基础篇显示隐藏状态栏和导航栏(代码片段)

一、AppTheme主题配置全屏属性<itemname="android:windowFullscreen">true</item>二、Activity的setContentView之前设置全屏的flaggetWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowMana 查看详情

使用导航栏和 iMessage 应用程序

】使用导航栏和iMessage应用程序【英文标题】：UsingaNavigationbarandiMessageApp【发布时间】：2016-08-2121:21:09【问题描述】：我正在使用UISearchBar/UISearchController和MKMapView创建一个iMessage应用程序。搜索栏在紧凑视图中完美显示（我知道... 查看详情

导航栏和它的titleView rightBarButtonItem随着动画变得更小

】导航栏和它的titleViewrightBarButtonItem随着动画变得更小【英文标题】：navigationBarandit\'stitleViewrightBarButtonItembecamesmallerwithanimation【发布时间】：2013-12-3107:12:50【问题描述】：在正常状态下，用户界面就像跟随当tableview向上滑动时... 查看详情

标题栏和导航栏

标题栏 导航栏：   查看详情

在基于窗口的应用程序 iPhone 中添加标签栏和导航栏

】在基于窗口的应用程序iPhone中添加标签栏和导航栏【英文标题】：Addtabbar&navigationbarinWindowbasedapplicationiPhone【发布时间】：2011-01-1318:10:25【问题描述】：大家好我是iphone应用程序开发的新手。我想开发一个包含标签栏、导航... 查看详情

通过标签栏和按钮导航屏幕

...2012-06-2218:13:44【问题描述】：我有以下问题：在我的应用程序中，有两种方法可以导航到其他屏幕：通过按钮或标签栏。所有屏幕都有调用其他屏幕的标签栏，但主屏幕是有按钮但没有标签栏的屏幕。当我开始开发我的应用程序... 查看详情

IOS7中的状态栏和导航栏问题

...时间】：2013-09-2915:05:25【问题描述】：我正在将我的应用程序迁移到iOS7。为了处理状态栏问题，我添加了此代码if([[[UIDevicecurrentDevice]systemVersion]floatValue]>=7.0f)CGRectframe=self.navigationCont 查看详情

如何创建一个带有导航栏和三个详细视图的应用程序？

】如何创建一个带有导航栏和三个详细视图的应用程序？【英文标题】：HowcanIcreateaanapplicationwithanavigationbarandthreedetailviews?【发布时间】：2011-03-1010:31:54【问题描述】：如何创建一个包含三个视图的导航栏的iPad应用程序？有没有... 查看详情

Cordova Android 应用程序导航栏和状态栏闪烁或变为纯白色

】CordovaAndroid应用程序导航栏和状态栏闪烁或变为纯白色【英文标题】：CordovaAndroidappNavigationBarandStatusBarflickerorturnsolidwhite【发布时间】：2021-11-0109:05:14【问题描述】：我们正在ZebraTC-57设备上使用Cordova9.0将我们的Web应用程序部署... 查看详情

如何在 IB 中设置导航栏和工具栏背景图像

...像？我知道如何在代码中执行此操作，并且已在我的应用程序中执行此操作。但现在我希望我的启动屏幕故事板反映应用程序，我必须在IB中执行此操作，因为当时应用 查看详情

隐藏的导航栏和更改的应用程序流程 - swift

】隐藏的导航栏和更改的应用程序流程-swift【英文标题】：Hiddennavigationbarandchangedapplicationflow-swift【发布时间】：2018-07-2511:53:06【问题描述】：我可能阅读了整个互联网，但找不到解决方案，也许我不知道此功能的正确名称。通... 查看详情

ios导航栏和状态栏

...的页面布局会限制在这些Bar之间。IOS的界面分为状态栏和导航栏，状态栏是指显示电池、时间的最顶部的一个窄条，高度为20个点；而导航栏是紧接着状态栏的44个点高度的横条，一般用于显示app标题，返回按钮等操作按钮。在io... 查看详情

iOS：状态栏和导航栏：空格或底层

】iOS：状态栏和导航栏：空格或底层【英文标题】：iOS:StatusbarandNavigationbar:SpaceorUnderlaying【发布时间】：2013-08-0513:26:57【问题描述】：如何以规范的方式操作状态栏和导航？所以，我的目标是同时隐藏和显示状态栏和导航栏。我... 查看详情

导航栏和内容之间的空间

】导航栏和内容之间的空间【英文标题】：Spacebetweennavbarandthecontent【发布时间】：2016-08-1620:20:23【问题描述】：我想摆脱内容和导航栏之间的空间，我该怎么做？请告诉我如何做到这一点，我是CSS和html的新手。我还尝试了图像... 查看详情

iOS 8 启动图像文件 - 导航栏和状态栏

...像文件。我想要的启动图像非常简单（我认为与设置应用程序相同）-顶部的导航栏带有一个空的、分组的TableView.没有标题等。注意，我通常不使用InterfaceBu 查看详情

使用搜索栏和大标题导航栏拉刷新问题

】使用搜索栏和大标题导航栏拉刷新问题【英文标题】：Pulltorefreshissueusingsearchbarandlargetitlenavigationbar【发布时间】：2018-06-1208:19:08【问题描述】：在导航控制器中使用大标题导航栏和搜索栏时出现问题，当我尝试拉动刷新时，ta... 查看详情