創建專案已經完成了
qq交流群 535620886
最終效果體驗
http://dadandmother.cn/stt/

這節課我們來講下頁面跳轉以及底部選項
開發工具: Hbuilder X
完整代碼已上傳github https://github.com/dmhsq/image-recognition-flask-uniapp
bilibili教程視頻 https://www.bilibili.com/video/BV1R5411H7r2/
底部有視頻教程

頁面跳轉以及底部選項

新建頁面
底部選項卡
- 選項圖示獲取
- 選項卡
頁面跳轉傳參
接收引數
本節課視頻
專案體驗
- 大學之道亦在自身，努力學習，熱血青春

新建頁面

右鍵你的專案點擊新建頁面
自己命名即可這里為mine
在這里插入圖片描述建好后在 pages.json能看到已被自動添加頁面

底部選項卡

官方檔案地址 https://uniapp.dcloud.io/collocation/pages?id=tabbar
參考檔案給出屬性按照自己需求即可

選項圖示獲取

阿里矢量圖 https://www.iconfont.cn/
大家可以根據自己的喜歡去下載
比如我們要下載主頁選項圖示
在這里插入圖片描述下載兩個顏色一個亮色一個暗色
重新命名檔案亮色為 home 暗色為 no-home

在static 目錄下新建image目錄將圖片拷貝進去
在這里插入圖片描述

同理可得 mine

這里我們一共兩個頁面一個當主頁一個當我的

選項卡

在pages.json 根目錄下添加 tabBar
官方檔案地址 https://uniapp.dcloud.io/collocation/pages?id=tabbar
有H5基礎或者英文基礎應該都能看懂看不懂去看檔案

在這里插入圖片描述

"tabBar": {
	    "color": "#7A7E83",
	    "selectedColor": "#3cc51f",
	    "borderStyle": "black",
	    "backgroundColor": "#ffffff",
	    "list": [{
	        "pagePath": "pages/index/index",
	        "iconPath": "static/image/no-home.png",
	        "selectedIconPath": "static/image/home.png",
	        "text": "首頁"
	    }, {
	        "pagePath": "pages/mine/mine",
	        "iconPath": "static/image/no-mine.png",
	        "selectedIconPath": "static/image/mine.png",
	        "text": "我的"
	    }]
	}

效果如下
在這里插入圖片描述

頁面跳轉傳參

uni.navigateTo(OBJECT)
官方檔案 https://uniapp.dcloud.io/api/router?id=navigateto

這里我們新建一個頁面 test
在這里插入圖片描述
在主頁也就是 pages/index/index.vue中撰寫函式

我們給圖片添加了點擊事件 goTest()

goTest()中我們要跳轉 test頁面 (注意tarBar頁面不能用這個而要用uni.switchTab(OBJECT))

goTest(){
uni.navigateTo({
url:’…/test/test?name=哈士奇’ 跳轉test頁面并且傳參?后是傳參格式 ?key1=value1$key2=value2…
})
}

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" @click="goTest()"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			goTest(){
				uni.navigateTo({
					url:'../test/test?name=哈士奇'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

接收引數

在我們跳轉的頁面 test中
在onLoad生命頁面生命周期中接收引數
onl oad(xxxx){
console.log(xxx.key1) // value1
console.log(xxx.key2) // value2
this,name = xxxx.name //賦值給頁面data的name
}

<template>
	<view>
		<text>{{name}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:""
			}
		},
		onLoad(option) {
			this.name = option.name
		},
		methods: {
			
		}
	}
</script>

<style>

</style>