快應用底部導航欄的原生實現
什麼是快應用?
快應用和微信小程式一樣,也是一種不需要安裝即可使用的類似於原生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