Uni-app極速入門(二) - 登錄demo

需求

背景

1、進入小程序，默認頁面判斷用戶是否已經登錄，已經登錄則進入首頁，沒有登錄則進入登錄頁面
2、首頁為tabbar，包括首頁和設置頁，設置頁可以退出登錄，回到登錄頁面

頁面流轉

graph TD A[Index Page] --> C{isLogin} C -->|true| D[HomePage] C -->|false| E[LoginPage] D --> |logout| A E --> |login| D

技術實現

Vue頁面

目錄結構

頁面截圖

登錄頁

設置頁

路由配置

pages.json

{
	"pages": [ 
		//pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle":"custom",
                "enablePullDownRefresh": false
			}
		}
	    ,{
            "path" : "pages/main/HomePage",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/setting/Setting/Setting",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/login/Login/Login",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
				"navigationStyle":"custom" // 隱藏導航欄，防止出現回退按鈕和首頁按鈕
            }
            
        }
    ],
	"tabBar": {
		"list": [{
			"pagePath":"pages/main/HomePage",
			"text":"首頁"
		}, {
			"pagePath":"pages/setting/Setting/Setting",
			"text":"設置頁"
		}]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

關鍵代碼

index.vue

判斷是否已經登錄:

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad: function(param) {
			console.log(param.isLogin)
			// 判斷用戶是否已經登錄成功,isLogin參數由其他的頁面傳入
			if (param.isLogin) {
				uni.switchTab({
					url: '/pages/main/HomePage' //url前面需要加/，否則不會跳轉
				})
			} else {
				console.log('進入登錄頁')
				uni.reLaunch({
					url: '../login/Login/Login'
				})
			}

		},
		methods: {}
	};
</script>

Login.vue

提交以后，重新進入啟動頁，並傳入已經登錄成功的參數

    onSubmit() {
	  uni.reLaunch({
	  	url:'../../index/index?isLogin=true' // 提交后，isLogin為true
	  })
    }

Home.vue

空頁面，代碼略

Setting.vue

退出登錄

    logout() {
        uni.reLaunch({
            url:'../../index/index'
        })
    }

方法說明

uni.reLaunch: 關閉所有頁面，打開到應用內的某個頁面

uni.switchTab: 跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面