pembangunan hibrid uniapp melaksanakan fungsi log masuk

Dengan populariti peranti mudah alih, aplikasi mudah alih telah menjadi bahagian yang amat diperlukan dalam kehidupan seharian orang ramai. Melaksanakan fungsi log masuk adalah salah satu fungsi asas mana-mana aplikasi. Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja pembangunan hibrid uniapp untuk melaksanakan fungsi log masuk.

1. Pengenalan kepada uniapp

Uniapp ialah rangka kerja pembangunan hibrid berdasarkan Vue.js. Ia boleh menggunakan set kod yang sama untuk membangunkan aplikasi untuk berbilang platform seperti iOS, Android, H5 , dan program kecil. Lebih penting lagi, ia turut menyokong pembungkusan tempatan dan fungsi pembungkusan awan, yang boleh meningkatkan kecekapan pembangunan aplikasi dan pengalaman pengguna dengan banyak.

2. Proses pelaksanaan

Proses melaksanakan fungsi log masuk adalah secara kasar seperti berikut:

1. Tulis antara muka log masuk, termasuk kotak input nama pengguna dan kata laluan, dan butang log masuk.
2. Urus status log masuk pengguna dalam vuex uniapp (pengurus status Vue.js).
3. Hantar maklumat log masuk pengguna ke pelayan untuk pengesahan melalui permintaan rangkaian.
4. Selepas pengesahan berjaya, maklumat berkaitan pengguna disimpan dalam cache setempat dan status pengguna dalam vuex dikemas kini pada masa yang sama.
5. Tentukan sama ada pengguna log masuk dalam aplikasi untuk melaksanakan fungsi berkaitan.

Seterusnya, kami akan melaksanakan proses di atas langkah demi langkah.

2.1 Menulis antara muka log masuk

Dalam projek uniapp, antara muka dilaksanakan dengan menulis komponen Vue. Kami mencipta fail Login.vue dalam folder halaman, dan menulis kod untuk antara muka log masuk seperti berikut:

<!-- Login.vue -->
<template>
  <view class="container">
    <view class="input-box">
      <input v-model="username" type="text" placeholder="用户名">
    </view>
    <view class="input-box">
      <input v-model="password" type="password" placeholder="密码">
    </view>
    <view class="btn-wrapper">
      <button @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      /* 登录验证 */
    }
  }
}
</script>

<style>
/* 样式 */
</style>

Dalam kod di atas, kami menggunakan komponen Vue yang disediakan oleh uniapp dan beberapa gaya mudah untuk membina antara muka log masuk. Kami mentakrifkan kotak input dan butang log masuk, dan memanggil kaedah handleLogin apabila butang log masuk diklik.

2.2 Mengurus status pengguna

Dalam uniapp, alat untuk mengurus status aplikasi ialah vuex. Anda perlu membuat folder kedai dahulu dalam projek (jika ia tidak wujud) dan mencipta fail index.js di bawah folder kedai. Seterusnya, kami mentakrifkan status dan operasi pengguna dalam index.js:

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userInfo: null, // 用户信息
    isLogin: false // 是否登录
  },
  mutations: {
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    setIsLogin(state, isLogin) {
      state.isLogin = isLogin
    }
  },
  actions: {
    login({ commit }, userInfo) {
      /* 登录验证 */
    },
    logout({ commit }) {
      /* 退出登录 */
    }
  }
})

export default store

Dalam kod di atas, kami mula-mula menggunakan pemalam Vuex melalui kaedah Vue.use() dan kemudian menentukan objek kedai. Dalam objek kedai, kami menggunakan konsep asas Vue.js seperti keadaan, mutasi dan tindakan. Keadaan digunakan untuk menyimpan keadaan aplikasi, mutasi digunakan untuk mengubah suai keadaan, dan tindakan digunakan untuk menyerahkan mutasi. Kami telah menentukan dua keadaan: userInfo dan isLogin, yang digunakan untuk menyimpan maklumat pengguna dan sama ada pengguna log masuk masing-masing. Seterusnya, kami mentakrifkan dua operasi: log masuk dan log keluar. Operasi ini adalah pengubahsuaian dan penyerahan kepada negeri.

2.3 Lakukan pengesahan log masuk

Seterusnya, kita perlu melaksanakan logik pengesahan log masuk. Dalam tindakan, kami menentukan kaedah log masuk. Dalam kaedah ini kita boleh melakukan operasi tak segerak untuk meminta pelayan untuk pengesahan.

// store/index.js
actions: {
  async login({ commit }, userInfo) {
    const res = await uni.request({
      url: 'http://api.example.com/login',
      method: 'POST',
      data: userInfo
    })

    if(res.data.code === 0) {
      // 登录成功
      const userInfo = res.data.userInfo

      // 更新本地存储信息
      uni.setStorageSync('userInfo', userInfo)

      // 更新Vuex状态
      commit('setUserInfo', userInfo) // 存储用户信息
      commit('setIsLogin', true) // 修改登录状态
    } else {
      // 登录失败
      uni.showToast({
        title: '登录失败',
        icon: 'none'
      })
    }
  }
}

Dalam kaedah log masuk, kami mula-mula menghantar permintaan POST ke pelayan melalui kaedah uni.request dan menghantar maklumat pengguna di sana. Selepas menerima maklum balas daripada pelayan, kami membuat pertimbangan yang mudah. Jika pengesahan log masuk lulus, maklumat pengguna yang dikembalikan oleh pelayan disimpan dalam cache tempatan, dan maklumat pengguna dan status log masuk dalam vuex dikemas kini. Jika pengesahan gagal, mesej gesaan akan muncul.

2.4 Log keluar

Dalam fail store/index.js, kami juga mentakrifkan kaedah log keluar untuk mengendalikan tingkah laku log keluar pengguna:

// store/index.js
actions: {
  // ...省略上文中的代码
  async logout({ commit }) {
    // 清除本地缓存信息
    uni.removeStorageSync('userInfo')

    // 清除App Store
    commit('setUserInfo', null)
    commit('setIsLogin', false)
  }
}

Dalam kaedah log keluar, Kami boleh menggunakan kaedah uni.removeStorageSync untuk mengosongkan maklumat cache setempat. Pada masa yang sama, maklumat pengguna dan status log masuk dalam vuex juga perlu dikemas kini.

2.5 Menentukan status log masuk pengguna dalam aplikasi

Dalam aplikasi, adalah perlu untuk menentukan sama ada pengguna telah log masuk. Jika anda tidak log masuk, anda perlu melompat ke halaman log masuk. Kami menggunakan cangkuk penghalaan global beforeEach dalam Vue.js untuk menentukan sama ada untuk log masuk. Kod adalah seperti berikut:

// main.js
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  store,
  ...App
})

app.$mount()

// 全局路由钩子
uni.$on('routeUpdate', function() {
  uni.getStorage({
    key: 'userInfo',
    success: function(res) {
      // 用户已登录，更新Vuex状态
      store.commit('setIsLogin', true)
      store.commit('setUserInfo', res.data)
    },
    fail: function() {
      // 用户未登录，跳转到登录页
      if(uni.getStorageSync('isLogin') !== 'true' && uni.getStorageSync('isLogin') !== true) {
        uni.navigateTo({
          url: '/pages/Login'
        })
      }
    }
  })
})

Dalam kod di atas, kami menggunakan kaedah uni.$on untuk mendengar acara kemas kini laluan apabila laluan berubah, pertimbangan pada masa itu. Pertama, kami mendapatkan maklumat pengguna dalam cache tempatan melalui kaedah uni.getStorage. Jika maklumat pengguna berjaya diperoleh, bermakna pengguna telah log masuk, dan kami boleh mengemas kini status pengguna dalam vuex. Jika tidak, ia akan melompat ke halaman log masuk.

3. Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan rangka kerja pembangunan hibrid uniapp untuk melaksanakan fungsi log masuk. Pertama, kami membina antara muka aplikasi dengan menulis antara muka log masuk kemudian, kami menggunakan vuex untuk mengurus status aplikasi dan merekod dan mengurus status log masuk pengguna kemudian, kami mengesahkan maklumat log masuk pengguna melalui permintaan rangkaian dalam aplikasi, dan menggunakan Tempatan; teknologi caching merekodkan status pengguna; akhirnya, kami menggunakan mekanisme cangkuk penghalaan untuk menentukan dan melompat ke status log masuk pengguna.

Atas ialah kandungan terperinci pembangunan hibrid uniapp melaksanakan fungsi log masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!