Bagaimanakah uniapp melaksanakan fungsi log masuk dan pendaftaran tempatan?

Dengan perkembangan pesat Internet mudah alih, sejumlah besar aplikasi sentiasa muncul. Semua aplikasi ini memerlukan pengguna untuk log masuk dan mendaftar, dan cara untuk pengguna log masuk dan mendaftar pada peranti mudah alih semakin banyak. Antara kaedah ini, pendaftaran log masuk tempatan digunakan secara meluas Pelaksanaannya bukan sahaja memudahkan pengguna, tetapi juga melindungi privasi dan keselamatan pengguna dengan berkesan.

Artikel ini akan menerangkan secara ringkas cara uniapp melaksanakan log masuk dan pendaftaran setempat. uniapp ialah rangka kerja aplikasi merentas platform yang hanya perlu dibangunkan sekali dan boleh diterbitkan ke berbilang platform (Android, iOS, H5, dll.). Dengan versi terbaru uniapp, pembangun boleh melengkapkan fungsi log masuk dan pendaftaran tempatan dengan mudah.

1. Persediaan prapengetahuan

Sebelum melaksanakan pendaftaran log masuk tempatan uniapp, anda perlu memahami uniapp dan istilah teknikal yang berkaitan.

1. uniapp: uniapp ialah rangka kerja aplikasi merentas platform berdasarkan Vue.js, yang boleh mencapai pembangunan satu kali dan keluaran berbilang hujung. uniapp menyediakan model pembangunan berasaskan komponen dan menyokong sintaks dan kitaran hayat Vue.js. Butiran lanjut boleh didapati dalam dokumentasi rasmi uni-app.
2. Vuex: Vuex ialah perpustakaan pengurusan negeri yang direka khusus untuk Vue.js, yang boleh berkongsi keadaan antara komponen. Melalui Vuex, kami boleh menguruskan aliran data semua komponen dalam aplikasi, dengan itu merealisasikan perkongsian data antara komponen. Dalam pelaksanaan seterusnya, kami akan menggunakan pengetahuan Vuex.
3. pemalam uni-apl: Pemalam uni-apl boleh meningkatkan fungsi apl uni, dan secara amnya dilaksanakan melalui enkapsulasi pemalam Vue.js. Terdapat banyak pemalam untuk uni-app, seperti: uni-login, uni-verify, dsb. Kami akan memilih pemalam yang sesuai semasa proses pelaksanaan untuk melaksanakan fungsi log masuk dan pendaftaran tempatan.

2. Langkah pelaksanaan

1. Cipta projek uniapp: Gunakan HBuilderX untuk mencipta projek uniapp dan konfigurasikan persekitaran pembangunan.
2. Pasang pemalam log masuk uni: Masukkan baris arahan dalam direktori akar projek dan jalankan npm install @dcloudio/uni-login untuk memasang pemalam log masuk uni.
3. Gunakan pemalam log masuk uni untuk melaksanakan pendaftaran log masuk: Dalam antara muka log masuk dan antara muka pendaftaran, perkenalkan templat dan kaedah yang disediakan oleh pemalam log masuk uni. Menghuraikan panggilan balik kejayaan atau kegagalan yang dikembalikan oleh pemalam log masuk uni untuk melaksanakan fungsi pendaftaran log masuk.
4. Simpan berjaya memperoleh maklumat pengguna dalam Vuex: Gunakan Vuex untuk mengurus status log masuk setempat, dan simpan maklumat pengguna yang berjaya diperoleh dalam Vuex untuk kegunaan seterusnya.
5. Log Keluar: Laksanakan fungsi log keluar, kosongkan maklumat pengguna yang disimpan dalam Vuex, dan kembali ke antara muka log masuk.
6. Tingkatkan reka letak antara muka log masuk dan pendaftaran: Tingkatkan reka letak antara muka log masuk dan pendaftaran dengan mengubah suai gaya tema, ikon, butang, dsb.

3. Kaedah pelaksanaan

1. Buat projek uniapp

Buat projek uniapp dalam HBuilderX, yang tidak akan diterangkan di sini.

2. Pasang pemalam uni-login

Masukkan baris arahan dalam direktori akar projek dan jalankan npm install @dcloudio/uni-login. Selepas pemasangan berjaya, anda boleh melihat pemalam log masuk uni dalam package.json projek.

3. Gunakan pemalam log masuk uni untuk melaksanakan log masuk dan pendaftaran

Dalam halaman log masuk dan halaman pendaftaran, tambah templat log masuk uni:

<template>
  <view>
    <login
      @login="login"
      passwordStyleType="password"
      :register-show-stop-propagation="false"
      :register-primary-text="&#39;注册（或通过以下方式登录）&#39;"
    />
  </view>
</template>

Dalam Skrip, daftarkan templat log masuk uni:

import login from '@/components/uni-login/uni-login.vue' // 引入uni-login模板

export default {
  components: {
    login
  },
  methods: {
    // 登录方法
    login(userinfo) {
      console.log(userinfo)
      // 这里可以将获取到的用户信息保存到Vuex中
    }
  }
}

Sama seperti halaman pendaftaran.

Dalam Skrip, kami dapati bahawa selepas log masuk berjaya, maklumat pengguna yang boleh kami gunakan dihantar ke fungsi log masuk. Oleh itu, kita perlu menyimpan maklumat yang diperolehi ke dalam Vuex supaya mudah diperoleh dan digunakan dalam aplikasi seterusnya.

Buat dan urus maklumat pengguna dalam Vuex:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
    user:{
      name:'匿名',
      age:0
    }
  },
  mutations:{
    setUser(state, payload) {
      state.user = payload.user
    },
    // 清除用户信息
    clearUser(state) {
      state.user = {}
    }
  }
})

export default store

Dalam kaedah log masuk, kami boleh menyimpan maklumat pengguna melalui Vuex:

// 登录方法
login(userinfo) {
  console.log(userinfo)
  // 将获取到的用户信息保存到Vuex中，便于后续应用
  this.$store.commit('setUser',{user:userinfo})
  // 登录成功后，进行路由跳转
  $uni.navigateTo({
    url: '/pages/home/home'
  });
}

Pada halaman utama Dalam antara muka, kita boleh menggunakan Vuex untuk mendapatkan maklumat pengguna yang disimpan untuk mencapai pengasingan data antara pengguna yang berbeza.

export default {
  data() {
    return {
      user: {},
    }
  },
  mounted() {
    this.user = this.$store.state.user
  },
  methods: {},
}

4. Log keluar

Untuk melaksanakan fungsi log keluar dalam antara muka halaman utama, cuma tambahkan acara yang sepadan pada butang log keluar dan lakukan operasi pengguna dalam Vuex Hanya kosongkan maklumat.

// 退出登录方法
logout() {
  // 清除Vuex中保存的用户信息
  this.$store.commit('clearUser')
  // 退出登录后，回到登录界面
  $uni.navigateTo({
    url: '/pages/login/login'
  });
}

5. Tingkatkan reka letak antara muka log masuk dan pendaftaran

Menggunakan komponen, templat, dsb. yang disediakan oleh uniapp, anda boleh membina log masuk yang menarik dan antara muka pendaftaran melalui CSS Gaya, logo, bar tab, dll. boleh meningkatkan pengalaman pengguna.

4. Ringkasan

Sehingga ke tahap ini kami telah menyelesaikan pelaksanaan fungsi log masuk dan pendaftaran tempatan uniapp Pemalam log masuk uni merealisasikan fungsi teras log masuk mudah alih kami proses pendaftaran, dan ia sangat mudah digunakan. Melalui pengenalan artikel ini, kami telah mempelajari tentang pengetahuan asas tentang uniapp, penggunaan Vuex, penggunaan uni-login, dll. Kami berharap ia akan membantu semua orang.

Dalam proses permohonan sebenar, disebabkan keperluan dan seni bina teknikal yang berbeza, kaedah pelaksanaan juga berbeza. Walau bagaimanapun, kami boleh memahami situasi sebenar, mencapai kesan log masuk dan pendaftaran tempatan dengan lebih baik, dan terus mengoptimumkan dan menambah baiknya untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah uniapp melaksanakan fungsi log masuk dan pendaftaran tempatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!