uniapp登录跳转页面

1. Uniapp登录跳转页面的实现

Uniapp是一款使用 Vue.js 构建跨平台应用的前端框架,可以方便地实现跨平台开发。在 Uniapp 中,实现登录跳转页面需要用到以下三个步骤:

1.1. 创建登陆页面

在页面文件夹下,新建 login.vue 文件。在 login.vue 文件中,使用 uni-form 组件 实现登录表单,同时使用 uni-button 组件 实现登录按钮。代码如下所示:


<template>
  <view class="login">
    <uni-form>
      <uni-form-item>
        <uni-input v-model="username" type="text" placeholder="用户名"></uni-input>
      </uni-form-item>
      <uni-form-item>
        <uni-input v-model="password" type="password" placeholder="密码"></uni-input>
      </uni-form-item>
      <uni-button type="primary" @click="login">登录</uni-button>
    </uni-form>
  </view>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 登录接口的调用
    }
  }
};
</script>
<style scoped>
.login {
  padding: 20px;
}
</style>

1.2. 配置路由跳转

在 pages.json 文件中,配置路由跳转 信息。其中,配置登录页 login.vue 的路径和 app.vue 中的首页路径,代码如下所示:


{
  "pages": [
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登录"
      }
    },
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "redirect": {
    "index": "pages/index/index"
  }
}

1.3. 调用登录接口

在 login.vue 中,实现用户 登录接口 的调用。在调用接口成功之后,使用 uni.redirectTo() 方法 跳转到 app.vue 中的首页页面。代码如下所示:


{
  ...,
  methods: {
    login() {
      uni.request({
        url: 'http://example.com/login',
        method: 'POST',
        data: {
          username: this.username,
          password: this.password
        },
        success: res => {
          if (res.statusCode === 200) {
            uni.setStorageSync('token', res.data.token);
            uni.redirectTo({
              url: '/pages/index/index'
            });
          }
        }
      });
    }
  }
}

2. 跳转页面的注意事项

在实现跳转页面的过程中,有一些需要注意的事项:

2.1. 保持统一的页面跳转方式

我们应该在项目开发的过程中,保持页面跳转的方式统一,比如使用 uni.redirectTo()、uni.navigateTo()、uni.reLaunch() 三种方法中的一种。这样可以使我们的代码更加规范,也可以避免出现一些奇怪的错误。

2.2. 不要在 onReady 函数中直接进行页面跳转

在小程序开发中,在 onReady 函数中直接进行页面跳转是一个很常见的错误。直接在 onReady 函数中进行页面跳转,可能会导致各种奇怪的问题,比如数据显示不正确,页面崩溃等等。因此,在开发过程中,应该尽量避免在 onReady 函数中直接进行页面跳转。

2.3. 页面之间传递数据

在实现页面跳转时,有时需要在页面之间传递数据。在 uniapp 中,可以使用 uni.setStorageSync() 和 uni.getStorageSync() 方法来实现页面之间的数据传递。

比如,在实现登录跳转到首页时,我们需要将登录接口返回的 token 存储在本地,并在跳转到首页时获取这个 token,以便后续的接口请求。代码如下所示:


uni.setStorageSync('token', res.data.token);
uni.redirectTo({
  url: '/pages/index/index'
});
// 在首页中获取存储的 token
let token = uni.getStorageSync('token');
if (!token) {
  // 没有登陆,跳转到登陆页面
}

3. 总结

通过上面的介绍,我们学习了在 uniapp 中实现登录跳转的方法,并且总结了在实现页面跳转时需要遵守的一些注意事项。希望本篇文章对大家在实际的项目开发中有所帮助。