halaman lompat log masuk uniapp

Dengan pembangunan aplikasi mudah alih, ramai pembangun memilih untuk menggunakan uniapp untuk pembangunan aplikasi Satu ciri utama uniapp ialah ia menyokong platform merentas, yang bukan sahaja meningkatkan kecekapan pembangunan, tetapi juga menjadikan operasi dan penyelenggaraan aplikasi lebih mudah dan lebih mudah. . Dalam aplikasi uniapp, halaman lompat log masuk ialah fungsi biasa Mari kita bincangkan langkah khusus tentang cara melaksanakan halaman lompat log masuk uniapp.

1. Mula-mula buat halaman log masuk Anda boleh menggunakan templat yang disediakan oleh uniapp, atau anda boleh menulis kod anda sendiri untuk melaksanakannya.
2. Dalam halaman log masuk, anda perlu memperkenalkan komponen log masuk yang disediakan secara rasmi oleh uniapp Kod adalah seperti berikut:

<template>
  <view>
    <form>
      <input type="text" v-model="account" placeholder="请输入账号"/>
      <input type="password" v-model="password" placeholder="请输入密码"/>
      <button type="submit" @click="login">登录</button>
    </form>
  </view>
</template>

<script>
  import { login } from '@/api/user'

  export default {
    data() {
      return {
        account: '',
        password: ''
      }
    },
    methods: {
      async login() {
        // 调用登录接口，接口返回登录状态
        const res = await login({ account: this.account, password: this.password })

        // 如果登录成功，就跳转到主页
        if (res.code === 200) {
          uni.switchTab({ url: '/pages/index' })
        } else {
          uni.showToast({
            title: '登录失败',
            icon: 'none'
          })
        }
      }
    }
  }
</script>

Dalam kod di atas, kami menulis borang log masuk asas. dan menambahnya dalam Antara muka log masuk dipanggil apabila borang diserahkan. Jika log masuk berjaya, ia akan melompat ke halaman utama jika log masuk gagal, tetingkap pop timbul akan meminta log masuk gagal.

3. Dalam antara muka log masuk, kami perlu mengesahkan akaun dan kata laluan untuk menyemak sama ada akaun dan kata laluan yang dimasukkan oleh pengguna adalah betul, kembalikan kod status log masuk yang berjaya dan kembali dengan maklumat pengguna; sebaliknya Kembalikan kod status dan mesej ralat untuk log masuk yang gagal.

import request from '@/utils/request'

// 登录接口
export function login(data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

Dalam kod di atas, kami menggunakan permintaan perpustakaan permintaan rangkaian yang disyorkan secara rasmi oleh uniapp untuk menghantar permintaan Pada masa yang sama, kami perlu menghantar dan menyulitkan data mengikut keperluan antara muka belakang.

4. Di halaman utama, kami perlu menilai status log masuk pengguna Jika pengguna log masuk, maklumat pengguna akan dipaparkan jika pengguna tidak log masuk, lompat ke halaman log masuk untuk log masuk.

<template>
  <view>
    <text v-if="isLogin">欢迎你，{{ userInfo.name }}</text>
    <view v-else>
      <text>请先登录</text>
      <button @click="gotoLogin">去登录</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isLogin: false,
        userInfo: {}
      }
    },
    onLoad() {
      // 判断用户是否已登录
      this.checkLogin()
    },
    methods: {
      checkLogin() {
        // 检查本地存储中是否存在登录信息
        const loginInfo = uni.getStorageSync('loginInfo')
        if (loginInfo && loginInfo.isLogin) {
          this.isLogin = true
          this.userInfo = loginInfo.userInfo
        }
      },
      gotoLogin() {
        // 跳转到登录页面
        uni.navigateTo({ url: '/pages/login' })
      }
    }
  }
</script>

Dalam kod di atas, kami menyemak sama ada maklumat log masuk wujud dalam storan tempatan melalui kaedah checkLogin Jika wujud, tetapkan isLogin kepada benar dan tetapkan info pengguna kepada maklumat pengguna dalam storan setempat ; Jika tidak, tetapkan isLogin kepada false, menunjukkan bahawa pengguna tidak log masuk. Jika pengguna tidak log masuk, dia boleh menggunakan kaedah gotoLogin untuk melompat ke halaman log masuk untuk operasi log masuk.

5. Selepas log masuk berjaya, kami perlu menyimpan status log masuk dan maklumat pengguna ke storan setempat supaya kami boleh log masuk secara automatik pada kali seterusnya kami membuka apl.

async login() {
  // 调用登录接口，接口返回登录状态
  const res = await login({ account: this.account, password: this.password })

  // 如果登录成功，就跳转到主页
  if (res.code === 200) {
    // 保存登录状态和用户信息到本地存储中
    uni.setStorageSync('loginInfo', { isLogin: true, userInfo: res.data.userInfo })
    uni.switchTab({ url: '/pages/index' })
  } else {
    uni.showToast({
      title: '登录失败',
      icon: 'none'
    })
  }
}

Dalam kod di atas, kami menggunakan API storan tempatan yang disediakan oleh uniapp untuk menyimpan dan membaca keadaan, mengambil e'setStorageSync' dan 'getStorageSync' sebagai contoh. Dengan cara ini, kami dapat merealisasikan fungsi halaman lompat log masuk uniapp dan memberikan sokongan yang lebih baik untuk pembangunan aplikasi dan pengalaman pengguna.

Atas ialah kandungan terperinci halaman lompat log masuk uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!