Uni-app极速入门(二) - 登录demo
<h1 id="需求">需求</h1><h2 id="背景">背景</h2>
<p>1、进入小程序，默认页面判断用户是否已经登录，已经登录则进入首页，没有登录则进入登录页面<br>
2、首页为tabbar，包括首页和设置页，设置页可以退出登录，回到登录页面</p>
<h2 id="页面流转">页面流转</h2>
<div class="mermaid">graph TD
A --> C{isLogin}
C -->|true| D
C -->|false| E
D --> |logout| A
E --> |login| D
</div><h1 id="技术实现">技术实现</h1>
<h2 id="vue页面">Vue页面</h2>
<h3 id="目录结构">目录结构</h3>
<p><img src="https://img2022.cnblogs.com/blog/602164/202204/602164-20220407181627605-1499663114.png" alt="" loading="lazy"></p>
<h3 id="页面截图">页面截图</h3>
<h5 id="登录页">登录页</h5>
<p><img src="https://img2022.cnblogs.com/blog/602164/202204/602164-20220407181637840-478814720.png" alt="" loading="lazy"></p>
<h5 id="设置页">设置页</h5>
<p><img src="https://img2022.cnblogs.com/blog/602164/202204/602164-20220407181706047-793577368.png" alt="" loading="lazy"></p>
<h2 id="路由配置">路由配置</h2>
<h3 id="pagesjson">pages.json</h3>
<pre><code class="language-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"
}
}
</code></pre>
<h2 id="关键代码">关键代码</h2>
<h3 id="indexvue">index.vue</h3>
<p>判断是否已经登录:</p>
<pre><code class="language-js"><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>
</code></pre>
<h3 id="loginvue">Login.vue</h3>
<p>提交以后，重新进入启动页，并传入已经登录成功的参数</p>
<pre><code class="language-js"> onSubmit() {
uni.reLaunch({
url:'../../index/index?isLogin=true' // 提交后，isLogin为true
})
}
</code></pre>
<h3 id="homevue">Home.vue</h3>
<p>空页面，代码略</p>
<h3 id="settingvue">Setting.vue</h3>
<p>退出登录</p>
<pre><code class="language-js"> logout() {
uni.reLaunch({
url:'../../index/index'
})
}
</code></pre>
<h1 id="方法说明">方法说明</h1>
<blockquote>
<p><code>uni.reLaunch</code>: 关闭所有页面，打开到应用内的某个页面</p>
</blockquote>
<blockquote>
<p><code>uni.switchTab</code>: 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/anywherego/p/16113649.html
頁:
[1]