hbuilderx 底部_如何在Hbuilder中制作app底部导航栏

。

1 问题描述

最近在使用Hbuilder进行移动app前端开发中，我通常搭建首页框架的常规方法是在index.html主文件中使用多种框架组件模块，再通过css叠层样式表对相应模块加以修饰。但在分析Hbuilder提供的移动app底部选项卡模板的代码时，我却在index.html文件中找不到底部选项卡区域的相应代码，这很让我伤脑筋。通过查询多方面的资料并与学长交流后，我大概了解了后者搭建框架所用到的原理。因此接下来我将分享一些干货来帮助大家理解，并且能在两种方式上进行选择。

2 问题分析

在Hbuilder中，一个移动app有着以下的几个目录：css目录、fonts目录、js目录、images目录以及html目录；还有着以下几个文件：index.html、manifest.json。

①目录篇

css目录存放html中内容的修饰样式表；

fonts目录提供整个app中的字体样式；

html目录存放app中的子页面html文件；

images目录存放前端页面中所需要的图片内容(不包括数据库提供的那部分)；

js目录存放整个app所需javascript脚本语言修饰、搭建内容(具体js的作用在此就不再声明，有兴趣可自行了解学习)。

②文件篇

index.html文件：主要作用是对app首页面进行设计、架构以及与其他页面建立联系。在相对功能简单的app中，通常能在index.html中直接看到底部栏，内容栏、顶部栏及与跳转子页面的相应代码。

Manifest.json文件：(重点)关于这个文件，我们也可以