快應用底部導航欄的原生實現
什麼是快應用？
快應用和微信小程式一樣，也是一種不需要安裝即可使用的類似於原生App的一種新的手機應用形態，它是由十大手機廠商聯合推出的一款產品。和微信小程式不同，它不依賴於微信，而是依賴於各大手機廠商自帶的快應用載入器，使用極其方便。
快應用的官方網址為：https://www.quickapp.cn/，有興趣的同學可以去官網檢視其詳細的介紹以及相關的開發文件。
但是快應用相比於微信小程式又有一些缺點，例如只能在安卓手機上使用，相關文件沒有微信小程式的豐富等等問題。不過我相信這些問題最終都會的到解決的，畢竟十大手機廠商的實力還是有的。
好的快應用開發文件
這裡我要推薦幾個寫得比較詳細的快應用文件，畢竟官方文件寫得還不是很詳細。。。
1.W3C快應用開發文件：https://www.w3cschool.cn/quickapp/
有啥不會的多看看文件，多查查資料自然就會了。
令人頭疼的問題
在最開始開發快應用的時候，我發現快應用竟然沒有類似於微信小程式自帶的底部導航功能，即通過配置app.json就可以自動生成底部導航欄，這令我十分頭疼，畢竟有導航欄的App看起來才高大上嘛。
這兩個頁面，誰看起來更高大上一些呢？肯定是有導航欄的呀。
沒辦法，在查閱了快應用的文件之後，只有自己使用原生的元件來實現了。
要實現類似於微信小程式的底部導航欄，最關鍵的就是tabs和tab-bar這兩個元件，另外還要知道怎樣建立和引用引用自定義的元件，關於這tabs、tab-bar元件和自定義元件的使用請自行檢視開發文件，這裡就不做介紹。下面我將一步一步地講解如何使用它們來實現底部導航欄。
開始編寫程式碼
1、準備工作
首先建立一個建立快應用專案：檔案-新建快應用
之後在彈出的輸入框內輸入建立的快應用的資訊
建立好後的專案的目錄如下：
這裡只需要看src目錄下的內容。
其中src/Common下放置快應用專案的相關資源，如圖片，音訊等。
src下其它的資料夾每一個檔案就代表了一個App的頁面，其中以".ux"結尾的為頁面檔案，".js"結尾的為頁面邏輯處理檔案，".css"結尾的為頁面樣式檔案。
這裡為了方便實現導航欄，我們將初始建立的幾個目錄刪除，之後建立成如下目錄：
其中Index代表首頁，My代表"我的"頁面，Type代表"分類"頁面。
之後去阿里巴巴向量相簿下載幾張適合做底部導航icon的圖片到專案的Common資料夾下，地址：https://www.iconfont.cn/
下載好後如圖：
可以看到每一張圖片都有一個對應的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
<!--引入自定義的模版-->
<!--引入首頁-->
<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>一切都做好之後本以為可以正常執行，可是App執行之後的介面卻是這樣的：
介面全都亂了。。。。。
肯定是css出了問題，於是乎我便查閱資料，最後發現快應用的mainfest.json配置檔案裡有一個“config.designWidth”的選項，其說明如：
原來快應用可以設定頁面的基準寬度，看起來感覺比微信小程式好像更靈活些唉。
將基準寬度設定為375之後就正常啦！！！
最終的效果：
感覺效果還可以，哈哈。
3.關於怎樣增添導航欄的頁面
如果需要新增或刪除頁面，只需要修改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