快应用底部导航栏的原生实现

本文介绍了如何在快应用中实现原生底部导航栏。快应用是一种免安装的应用形态,依赖于手机厂商的加载器。由于快应用本身不自带底部导航,作者通过使用tabs和tab-bar组件,以及自定义组件,详细讲解了创建底部导航栏的步骤,包括项目结构、资源配置、路由配置和关键代码展示。最后提到了解决界面布局问题的方法和如何动态管理页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是快应用

快应用是一种不需要安装即可使用,类似于原生APP的新型应用形态,它是由手机厂商联合推出的一款产品。它不依赖于App,而是依赖于各大手机厂商自带的快应用加载器,使用极其方便。


快应用的官方网址为:https://www.quickapp.cn/,有兴趣的同学可以去官网查看其详细的介绍以及相关的开发文档。


好了,接下来进入正题,在最开始开发快应用的时候,我发现快应用没有自带的底部导航功能,即通过配置app.json就可以自动生成底部导航栏,这令我十分头疼,毕竟有导航栏的App看起来才高大上嘛。

                                                             

640?wx_fmt=jpeg


这两个页面,谁看起来更高大上一些呢?肯定是有导航栏的呀。


在查阅了快应用的文档之后,只有自己使用原生的组件来实现了。


要实现类底部导航栏,最关键的就是tabs和tab-bar这两个组件,另外还要知道怎样创建和引用自定义的组件,关于这tabs、tab-bar组件和自定义组件的使用请自行查看开发文档,这里就不做介绍。


下面我将一步一步地讲解如何使用它们来实现底部导航栏。

640?wx_fmt=jpeg

开始编写代码


1、准备工作


首先创建一个创建快应用项目:文件-新建快应用


640?wx_fmt=jpeg

之后在弹出的输入框内输入创建的快应用的信息


640?wx_fmt=jpeg

创建好后的项目的目录如下:

640?wx_fmt=jpeg


这里只需要看src目录下的内容。


其中src/Common下放置快应用项目的相关资源,如图片,音频等。


src下其它的文件夹每一个文件就代表了一个App的页面,其中以".ux"结尾的为页面文件,".js"结尾的为页面逻辑处理文件,".css"结尾的为页面样式文件。


这里为了方便实现导航栏,我们将初始创建的几个目录删除,之后创建成如下目录:


640?wx_fmt=jpeg


其中Index代表首页,My代表"我的"页面,Type代表"分类"页面。


之后去第三方图库下载几张适合做底部导航icon的图片到项目的Common文件夹下。


下载好后如图:


640?wx_fmt=jpeg


可以看到每一张图片都有一个对应的selected的图片,用于作为当前导航栏显示。注意这里的logo.png为项目自动生成的图片,用做App的logo,可在mianfest.josn文件下配置修改App的logo:


640?wx_fmt=jpeg


配置路由!配置路由!配置路由!


重要的事情说3遍,在一切准备好之后必须去mainfest.json文件内配置路由,将原来"router"内的内容修改为如下:


640?wx_fmt=jpeg


这里解释一下"router"内配置的含义:


   (1)entry:主界面,就是打开快应用后看到的第一个页面,注意这里用的"Tabbar"而不是"tabbar",即使用的是放置页面文件的文件夹名,而不是页面文件的文件名。


   (2)pages:配置快应用所有的页面,如果不在这里配置打开快应用之后是不能正常跳转到正确的页面。


   (3)Tabbar:填页面文件所在文件夹的名称


   (4)component:页面文件夹内页面文件的文件名,当一个页面文件夹内有多个页面文件时,App只能访问到这里配置了的页面。


2、开始写代码

话不多说,直接上代码。

以下是核心代码,用于生成底部的导航栏

(1)Tabbar/tabbar.ux

 
 
<!--引入自定义的模版-->	
<!--引入首页-->	
<import name='index' src="../Index/index.ux"></import>	
<!--引入“分类”页面-->	
<import name='type' src="../Type/type.ux"></import>	
<!--引入“我的”页面-->	
<import name='my' src="../My/my.ux"></import>	
<template>	
    <!--注意:template里只能有一个根节点 -->	
    <div class="container">	
        <!--根据不同的flag显示不同的页面-->	
        <block if="{{flag==0}}">	
            <!--显示"首页"-->	
            <index></index>	
        </block>	
        <block elif="{{flag==1}}">	
            <!--显示"分类"页面-->	
            <type></type>	
        </block>	
        <block elif="{{flag==2}}">	
            <!--显示"我的"页面-->	
            <my></my>	
        </block>	
 	
        <!--底部导航栏-->	
        <tabs>	
            <tab-bar class="footer-container">	
                <!--遍历tabBar.list,生成导航栏-->	
                <block for='tabBar.list'>	
                    <div class="footer-item" onclick="setIndex($idx)">	
                        <!--$idx为tabBar.list当前的索引值,以0开始-->	
                        <!--如果当前页面被选中-->	
                        <block if='{{$idx==flag}}'>	
                            <!--icon-->	
                            <image src="{{tabBar.list[$idx].selected_icon}}" class="footer-item-img"></image>	
                            <!--页面标签值-->	
                            <text class="tab-text" style="color: {{tabBar.list[$idx].selected_color}}">{{tabBar.list[$idx].name}}</text>	
                        </block>	
                        <!--当前页面未被选中-->	
                        <block else>	
                            <image src="{{tabBar.list[$idx].icon}}" class="footer-item-img"></image>	
                            <text class="tab-text" style="color: {{tabBar.list[$idx].color}}">{{tabBar.list[$idx].name}}</text>	
                        </block>	
                    </div>	
                </block>	
            </tab-bar>	
        </tabs>	
    </div>	
</template>	
<style src="./tabbar.css"></style>	
<script>	
    module.exports = {	
        data: {	
            flag: 0,//默认为 0 首页,1 分类,2 我的	
            tabBar: {	
                list: [{	
                    name: '首页',//当前页面标签值	
                    icon: '../Common/home.png',//未选中icon地址	
                    color: '#666666',//未选中时文本颜色	
                    selected_color: '#1296db',//选中时文本颜色	
                    selected_icon: '../Common/home_selected.png'//选中是icon地址	
                }, {	
                    name: '分类',	
                    icon: '../Common/type.png',	
                    color: '#666666',	
                    selected_color: '#1296db',	
                    selected_icon: '../Common/type_selected.png'	
                }, {	
                    name: '我的',	
                    icon: '../Common/my.png',	
                    color: '#666666',	
                    selected_color: '#1296db',	
                    selected_icon: '../Common/my_selected.png'	
                }]	
            }	
        },	
        //初始化,进入界面加载的事件	
        onInit() {	
            //设置页面title	
            this.$page.setTitleBar({ text:  this.tabBar.list[this.flag].name})	
        },	
        //修改flag实现点击导航栏显示不同的页面,pos为传入的参数	
        setIndex: function (pos) {	
            //设置flag,flag改变后显示的页面也会对应的改变	
            this.flag = pos	
            //设置页面标题	
            this.$page.setTitleBar({ text: this.tabBar.list[pos].name })	
        }	
    }    	
</script>

导航栏的样式

(2)Tabbar/tabbar.css

 
 
.container {	
    flex-direction: column;	
    justify-content: center;	
    align-content: center;	
    align-items: center;	
    height: 500px;	
}	
 	
.footer-container {	
    width: 100%;	
    height: 65px;	
    position: fixed;	
    bottom: 0;	
    margin-bottom: 0;	
    background-color: #FFFFFF;	
    border-top-width: 1px;	
    border-top-color: #CCCCCC;	
    z-index: 999;	
}	
 	
.footer-item {	
    width: 25%;	
    display: flex;	
    flex-direction: column;	
}	
 	
.footer-item-img {	
    margin-left: 32px;	
    width: 30px;	
    height: 30px;	
}	
 	
.tab-text {	
    text-align: center;	
    font-size: 12px;	
}

以下是各页面的内容,需在/Tabbar/tabbar.ux中引入

(1)Index/index.ux

 
 
<template>	
  <div>	
    <text>首页</text>	
  </div>	
</template>

(2)Type/type.ux

 
 
<template>	
  <div>	
    <text>分类</text>	
  </div>	
</template>

(3)My/my.ux

 
 
<template>	
  <div>	
    <text>我的</text>	
  </div>	
</template>

一切都做好之后本以为可以正常运行,可是快应用运行之后的界面却是这样的:


640?wx_fmt=jpeg


界面全都乱了。。。。。

肯定是css出了问题,于是乎我便查阅资料,最后发现快应用的mainfest.json配置文件里有一个“config.designWidth”的选项,其说明如:

640?wx_fmt=jpeg

原来快应用可以设置页面的基准宽度,将基准宽度设置为375之后就正常啦!!!

640?wx_fmt=jpeg


最终的效果:


640?wx_fmt=jpeg


如果需要添加或删除页面,只需要修改Tabbar/tabbar.ux内tabBar.list的内容就可以啦^_^


不过一定要记得修改后必须要在Tabbar/tabbar.ux内引入相应的页面,并且在显示页面时做判断哦,如Tabbar/tabbar.ux内的:

 
 
 <!--根据不同的flag显示不同的页面-->	
        <block if="{{flag==0}}">	
            <!--显示"首页"-->	
            <index></index>	
        </block>	
        <block elif="{{flag==1}}">	
            <!--显示"分类"页面-->	
            <type></type>	
        </block>	
        <block elif="{{flag==2}}">	
            <!--显示"我的"页面-->	
            <my></my>	
        </block>

最后,我将我的代码上传到github上了,有兴趣的同学可以git clone学习一下:https://github.com/RickyHal/quickApp_tabbar.git


相关阅读:

网页与快应用之间构造可靠通信通道

一个前端攻城狮的快应用开发之路

快应用的用法和常见问题解答

快应用开发漫谈-部署与调试

快应用开发新手入门指南

快应用list组件的那些事儿


写在最后

在去年的开发者大赛征文中,我们通过多个社区联合活动收集了很多优质文章,有入坑指南、开源项目、开发模板、常见问题总结等多个方面,这些内容为很多开发者提供了参考,感谢大家的支持和参与,今年的我们的征文活动还在继续,感兴趣的开发者可以点阅读原文查看详情哦!


快应用生态平台

赋能开发者 

拓展场景未来

640?wx_fmt=jpeg

快来关注我们吧




评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值