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

open

什么是快应用

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

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

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

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

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

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

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

开始编写代码

1、准备工作

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

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

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

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

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

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

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

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

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

下载好后如图：

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

配置路由！配置路由！配置路由！

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

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

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

（2）pages：配置快应用所有的页面，如果不在这里配置打开快应用之后是不能正常跳转到正确的页面。

（3）Tabbar：填页面文件所在文件夹的名称

（4）component：页面文件夹内页面文件的文件名，当一个页面文件夹内有多个页面文件时，App只能访问到这里配置了的页面。

2、开始写代码

话不多说，直接上代码。

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

(1)Tabbar/tabbar.ux

1. <!--引入自定义的模版-->
2. <!--引入首页-->
3. <import name='index' src="../Index/index.ux"></import>
4. <!--引入“分类”页面-->
5. <import name='type' src="../Type/type.ux"></import>
6. <!--引入“我的”页面-->
7. <import name='my' src="../My/my.ux"></import>
8. <template>
9. <!--注意：template里只能有一个根节点 -->
10. <div class="container">
11. <!--根据不同的flag显示不同的页面-->
12. <block if="{{flag==0}}">
13. <!--显示"首页"-->
14. <index></index>
15. </block>
16. <block elif="{{flag==1}}">
17. <!--显示"分类"页面-->
18. <type></type>
19. </block>
20. <block elif="{{flag==2}}">
21. <!--显示"我的"页面-->
22. <my></my>
23. </block>
25. <!--底部导航栏-->
26. <tabs>
27. <tab-bar class="footer-container">
28. <!--遍历tabBar.list，生成导航栏-->
29. <block for='tabBar.list'>
30. <div class="footer-item" onclick="setIndex($idx)">
31. <!--$idx为tabBar.list当前的索引值，以0开始-->
32. <!--如果当前页面被选中-->
33. <block if='{{$idx==flag}}'>
34. <!--icon-->
35. <image src="{{tabBar.list[$idx].selected_icon}}" class="footer-item-img"></image>
36. <!--页面标签值-->
37. <text class="tab-text" style="color: {{tabBar.list[$idx].selected_color}}">{{tabBar.list[$idx].name}}</text>
38. </block>
39. <!--当前页面未被选中-->
40. <block else>
41. <image src="{{tabBar.list[$idx].icon}}" class="footer-item-img"></image>
42. <text class="tab-text" style="color: {{tabBar.list[$idx].color}}">{{tabBar.list[$idx].name}}</text>
43. </block>
44. </div>
45. </block>
46. </tab-bar>
47. </tabs>
48. </div>
49. </template>
50. <style src="./tabbar.css"></style>
51. <script>
52. module.exports = {
53. data: {
54. flag: 0,//默认为 0 首页，1 分类，2 我的
55. tabBar: {
56. list: [{
57. name: '首页',//当前页面标签值
58. icon: '../Common/home.png',//未选中icon地址
59. color: '#666666',//未选中时文本颜色
60. selected_color: '#1296db',//选中时文本颜色
61. selected_icon: '../Common/home_selected.png'//选中是icon地址
62. }, {
63. name: '分类',
64. icon: '../Common/type.png',
65. color: '#666666',
66. selected_color: '#1296db',
67. selected_icon: '../Common/type_selected.png'
68. }, {
69. name: '我的',
70. icon: '../Common/my.png',
71. color: '#666666',
72. selected_color: '#1296db',
73. selected_icon: '../Common/my_selected.png'
74. }]
75. }
76. },
77. //初始化，进入界面加载的事件
78. onInit() {
79. //设置页面title
80. this.$page.setTitleBar({ text: this.tabBar.list[this.flag].name})
81. },
82. //修改flag实现点击导航栏显示不同的页面，pos为传入的参数
83. setIndex: function (pos) {
84. //设置flag，flag改变后显示的页面也会对应的改变
85. this.flag = pos
86. //设置页面标题
87. this.$page.setTitleBar({ text: this.tabBar.list[pos].name })
88. }
89. }
90. </script>

复制代码

导航栏的样式

(2)Tabbar/tabbar.css

1. .container {
2. flex-direction: column;
3. justify-content: center;
4. align-content: center;
5. align-items: center;
6. height: 500px;
7. }
9. .footer-container {
10. width: 100%;
11. height: 65px;
12. position: fixed;
13. bottom: 0;
14. margin-bottom: 0;
15. background-color: #FFFFFF;
16. border-top-width: 1px;
17. border-top-color: #CCCCCC;
18. z-index: 999;
19. }
21. .footer-item {
22. width: 25%;
23. display: flex;
24. flex-direction: column;
25. }
27. .footer-item-img {
28. margin-left: 32px;
29. width: 30px;
30. height: 30px;
31. }
33. .tab-text {
34. text-align: center;
35. font-size: 12px;
36. }

复制代码

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

(1)Index/index.ux

1. <template>
2. <div>
3. <text>首页</text>
4. </div>
5. </template>

复制代码

(2)Type/type.ux

1. <template>
2. <div>
3. <text>分类</text>
4. </div>
5. </template>

复制代码

(3)My/my.ux

1. <template>
2. <div>
3. <text>我的</text>
4. </div>
5. </template>

复制代码

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

界面全都乱了。。。。。

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

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

最终的效果：

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

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

1. <!--根据不同的flag显示不同的页面-->
2. <block if="{{flag==0}}">
3. <!--显示"首页"-->
4. <index></index>
5. </block>
6. <block elif="{{flag==1}}">
7. <!--显示"分类"页面-->
8. <type></type>
9. </block>
10. <block elif="{{flag==2}}">
11. <!--显示"我的"页面-->
12. <my></my>
13. </block>

复制代码

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

quwang

我测试过，js部分报错，无法运行，还有，css不支持 z-index属性