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 中实现登录跳转的方法，并且总结了在实现页面跳转时需要遵守的一些注意事项。希望本篇文章对大家在实际的项目开发中有所帮助。