uniapp melaksanakan daftar masuk lokasi

Dengan populariti Internet mudah alih, banyak syarikat mempunyai aplikasi mudah alih mereka sendiri Salah satu fungsi yang sangat praktikal ialah daftar masuk lokasi. Melalui daftar masuk lokasi, syarikat boleh menguruskan pekerja, seperti kehadiran, penugasan tugas, dsb. Artikel ini memperkenalkan cara menggunakan uniapp untuk membangunkan aplikasi mudah alih untuk daftar masuk lokasi.

1. Persediaan

Sebelum memulakan pembangunan, anda perlu menyediakan perkara berikut:

1. persekitaran pembangunan uniapp
2. Alat pembangunan program mini
3. Akaun Pembangun Amap

Jika anda tidak mempunyai pengalaman yang berkaitan, anda boleh mempelajari asas program uniapp dan mini dahulu. Seterusnya, mari kita ke intinya.

2. Integrasikan Amap

1. Daftar akaun pembangun Amap

Daftar akaun pembangun pada platform terbuka Amap dan buat Aplikasi memperoleh Kunci. Kunci ialah pengesahan identiti untuk panggilan API dan boleh digunakan dalam aplikasi.

2. Sepadukan Amap SDK

Perkenalkan Amap SDK ke dalam projek uniapp seperti berikut:

1) Buka projek uniapp dalam HBuilderX
2) Klik kanan folder "uni_modules" dan pilih "Install npm dependency"
3) Masukkan "@jv-uni/amap" dalam kotak carian, pilih "uni-app amap positioning plug-in", dan klik " Install "

3. Mencapai kebenaran dan kedudukan

Mencapai kebenaran dan kedudukan dalam projek uniapp. Langkah-langkah khusus adalah seperti berikut:

1) Gunakan yang berikut pada halaman Kod memperkenalkan pemalam peta Gaode

import amap from '@jv-uni/amap';

2) Tambahkan kaedah AMap.plugin

mounted() { 
  this.getLocation(); 
},
methods: { 
  getLocation() { 
    AMap.plugin('AMap.Geolocation', () => { 
      let geolocation = new AMap.Geolocation({ 
        enableHighAccuracy: true, 
        timeout: 10000, 
        buttonOffset: new AMap.Pixel(10, 10), 
        zoomToAccuracy: true, 
        buttonPosition: 'RB' 
      }); 
      geolocation.getCurrentPosition((status, result) => { 
        if (status === 'complete') { 
          this.longitude = result.position.lng; 
          this.latitude = result.position.lat; 
          this.address = result.formattedAddress; 
        } else { 
          uni.showToast({ 
            icon: 'none', 
            title: '获取地址失败' 
          }); 
        } 
      }); 
    }); 
  } 
}

ke halaman yang perlu diletakkan melalui kaedah AMap.plugin, kami memperkenalkan pemalam kedudukan peta Gaode, dan pada masa yang sama Mendapatkan maklumat latitud, longitud dan alamat peranti semasa.

3. Laksanakan fungsi log masuk

Melalui langkah di atas, kami sudah boleh mendapatkan maklumat lokasi semasa, dan kemudian kami boleh melaksanakan fungsi log masuk berdasarkan maklumat lokasi yang diperolehi .

1. Simpan maklumat lokasi daftar masuk

Selepas mendapatkan maklumat lokasi, kami perlu menyimpan maklumat tersebut ke pangkalan data. Fungsi storan boleh dilaksanakan dengan memanggil API storan data dalam uniapp Langkah-langkah khusus adalah seperti berikut:

uni.setStorageSync('longitude', this.longitude); 
uni.setStorageSync('latitude', this.latitude); 
uni.setStorageSync('address', this.address); 

2. Paparkan status daftar masuk

Selepas semakan. maklumat lokasi -masuk berjaya disimpan, status daftar masuk dipaparkan . Kami boleh menetapkan butang daftar masuk pada halaman semasa, dan selepas pengguna mengklik butang tersebut, keputusan daftar masuk akan dipaparkan.

<button type="default" @click="signIn()">签到</button> 
<view v-if="signInSuccess">签到成功</view> 
<view v-else>未签到</view> 

Gunakan perintah v-if untuk merealisasikan kesan paparan selepas berjaya log masuk.

3. Peraturan log masuk

Pelaksanaan fungsi log masuk juga perlu mengambil kira peraturan log masuk. Peraturan daftar masuk syarikat biasanya termasuk masa daftar masuk, alamat daftar masuk, dsb. Peraturan daftar masuk boleh dilaksanakan dengan mudah melalui langkah berikut:

1) Catatkan masa semasa

Kita boleh menambah kaedah untuk mendapatkan masa semasa dalam butang daftar masuk.

getNowFormatDate() { 
  let date = new Date(); 
  let seperator1 = "-"; 
  let year = date.getFullYear(); 
  let month = date.getMonth() + 1; 
  let strDate = date.getDate(); 
  if (month >= 1 && month <= 9) { 
    month = "0" + month; 
  } 
  if (strDate >= 0 && strDate <= 9) { 
    strDate = "0" + strDate; 
  } 
  let currentdate = year + seperator1 + month + seperator1 + strDate; 
  return currentdate; 
}

2) Tentukan peraturan daftar masuk

Peraturan daftar masuk perlu memasukkan masa daftar masuk, alamat daftar masuk, dsb. Kami boleh menetapkan objek JSON dalam projek uniapp kepada menyimpan peraturan daftar masuk.

signs: { 
  "2021-11-01": [ 
    { 
      longitude: 116.397428, 
      latitude: 39.90923, 
      address: "北京市东城区正义路5号" 
    }, 
    ... 
  ], 
  ... 
} 

Antaranya, "2021-11-01" mewakili peraturan daftar masuk untuk hari tertentu dan nilainya ialah tatasusunan. Tatasusunan menyimpan longitud, latitud, alamat dan maklumat lain lokasi daftar masuk dalam bentuk objek JSON.

3) Laksanakan pengesahan peraturan daftar masuk

Pengesahan peraturan daftar masuk memerlukan membandingkan masa semasa dengan peraturan log masuk dan mengesahkan sama ada lokasi semasa berada dalam peraturan log masuk . Kita boleh menambah fungsi pengesahan peraturan dalam kaedah daftar masuk.

isSigned(signs, signDate, longitude, latitude) { 
  return ( 
    signs.hasOwnProperty(signDate) && 
    Array.isArray(signs[signDate]) && 
    signs[signDate].some(sign => { 
      let distance = AMap.GeometryUtil.distance( 
        [longitude, latitude], 
        [sign.longitude, sign.latitude]
      ); 
      return distance <= 500; 
    }) 
  ); 
}

Fungsi ini perlu memasukkan parameter seperti peraturan daftar masuk, tarikh daftar masuk dan lokasi semasa Nilai pulangan ialah jenis Boolean, menunjukkan sama ada lokasi semasa berada dalam skop semakan -dalam peraturan.

4) Tingkatkan kaedah log masuk

Kaedah log masuk perlu melengkapkan pengesahan peraturan daftar masuk, memaparkan status log masuk dan menyimpan rekod log masuk dan lain-lain fungsi.

signIn() { 
  let signDate = this.getNowFormatDate(); 
  let signs = uni.getStorageSync('signs') || {}; 
  if (this.isSigned(signs, signDate, this.longitude, this.latitude)) { 
    this.signInSuccess = true; 
    uni.showToast({ 
      icon: 'none', 
      title: '您已签到' 
    }); 
  } else { 
    this.signInSuccess = false; 
    uni.showToast({ 
      icon: 'none', 
      title: '您未签到' 
    }); 
  } 
  signs[signDate] = signs[signDate] || []; 
  signs[signDate].push({ 
    longitude: this.longitude, 
    latitude: this.latitude, 
    address: this.address 
  }); 
  uni.setStorageSync('signs', signs); 
}

Melalui langkah di atas, kita sudah boleh melaksanakan fungsi daftar masuk lokasi yang mudah. Perusahaan boleh menambah baik dan mengembangkan lagi fungsi ini mengikut keperluan mereka sendiri.

Ringkasan

Artikel ini memperkenalkan cara menggunakan uniapp untuk membangunkan aplikasi mudah alih untuk daftar masuk lokasi. Dengan menyepadukan SDK Amap dan melaksanakan keizinan serta kedudukan, kami boleh mendapatkan maklumat lokasi peranti semasa. Dengan menyimpan maklumat lokasi daftar masuk, melaksanakan pengesahan peraturan daftar masuk dan memperbaik kaedah daftar masuk, kami sudah boleh melaksanakan aplikasi daftar masuk berasaskan lokasi asas. Dalam proses amalan, pembaca boleh menambah baik dan mengembangkan lagi fungsi ini mengikut keperluan mereka sendiri untuk mencapai pengurusan perusahaan yang lebih baik.

Atas ialah kandungan terperinci uniapp melaksanakan daftar masuk lokasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!