uniapp implementiert den Standort-Check-in

Mit der Popularität des mobilen Internets verfügen viele Unternehmen über eigene mobile Anwendungen. Eine der sehr praktischen Funktionen ist der Standort-Check-in. Durch den Standort-Check-in können Unternehmen Mitarbeiter verwalten, z. B. Anwesenheit, Aufgabenzuweisung usw. In diesem Artikel wird erläutert, wie Sie mit uniapp eine mobile Anwendung für den Standort-Check-in entwickeln.

1. Vorbereitung

Bevor Sie mit der Entwicklung beginnen, müssen Sie Folgendes vorbereiten:

1. Uniapp-Entwicklungsumgebung
2. Miniprogramm-Entwicklungstools
3. Amap-Entwicklerkonto

Wenn Sie keine einschlägige Erfahrung haben, können Sie es lernen 1. Grundkenntnisse in Uniapp und Miniprogrammen. Kommen wir als nächstes zum Punkt.

2. Integrieren Sie Amap

1. Registrieren Sie ein Amap-Entwicklerkonto

Registrieren Sie ein Entwicklerkonto auf der offenen Amap-Plattform und erstellen Sie eine Anwendung, um den Schlüssel zu erhalten. Der Schlüssel ist die Identitätsauthentifizierung für API-Aufrufe und kann in Anwendungen verwendet werden.

2. Amap SDK integrieren

Führen Sie Amap SDK in das Uniapp-Projekt ein. Die Methode ist wie folgt:

1) Öffnen Sie das Uniapp-Projekt in HBuilderX
2) Klicken Sie mit der rechten Maustaste auf den Ordner „uni_modules“ und wählen Sie „Npm-Abhängigkeiten installieren“. "
3) Geben Sie „@jv-uni/amap“ in das Suchfeld ein, wählen Sie „uni-app amap Positionierungs-Plug-in“ und klicken Sie auf „Installieren“

3. Autorisierung und Positionierung erreichen

Autorisierung und Positionierung erreichen Im Uniapp-Projekt lauten die spezifischen Schritte wie folgt:

1) Verwenden Sie den folgenden Code, um das AMAP-Plug-in auf der Seite einzuführen

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

2) Fügen Sie die Methode AMap.plugin hinzu Seite, die positioniert werden muss 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: '获取地址失败' 
          }); 
        } 
      }); 
    }); 
  } 
}

通过AMap.plugin方法，我们引入了高德地图定位插件，同时获取了当前设备的经纬度和地址信息。

三、实现签到功能

通过上面的步骤，我们已经可以获取到当前位置信息，接下来就可以根据获取到的位置信息实现签到功能。

1. 保存签到位置信息

在获取到位置信息后，我们需要将这些信息保存到数据库中。可以通过调用uniapp中的数据存储API实现存储功能，具体步骤如下：

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

2. 显示签到状态

待签到位置信息存储成功后，显示签到状态。我们可以在当前页面上设置一个签到按钮，在用户点击该按钮后，显示签到结果。

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

通过v-if

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; 
}

über die AMap.plugin-Methode haben wir das Amap-Positionierungs-Plug-in eingeführt und die Längen-, Breiten- und Adressinformationen des aktuellen Geräts erhalten.

3. 3. Implementieren Sie die Anmeldefunktion

Durch die oben genannten Schritte können wir bereits die aktuellen Standortinformationen abrufen und dann die Anmeldefunktion basierend auf den erhaltenen Standortinformationen implementieren.

Informationen zum Check-in-Standort speichern

Nach Erhalt der Standortinformationen müssen wir die Informationen in der Datenbank speichern. Die Speicherfunktion kann durch Aufrufen der Datenspeicher-API in uniapp implementiert werden. Die spezifischen Schritte lauten wie folgt:

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

Anzeige des Check-in-Status

Nachdem die Check-in-Standortinformationen erfolgreich gespeichert wurden, erfolgt der Check-in Der Status wird angezeigt. Wir können auf der aktuellen Seite eine Check-in-Schaltfläche festlegen. Nachdem der Benutzer auf die Schaltfläche geklickt hat, werden die Check-in-Ergebnisse angezeigt.

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; 
    }) 
  ); 
}

Verwenden Sie den Befehl v-if, um den Anzeigeeffekt nach erfolgreicher Anmeldung zu realisieren.

Anmelderegeln

Bei der Implementierung der Anmeldefunktion müssen auch die Anmelderegeln berücksichtigt werden. Zu den Check-in-Regeln des Unternehmens gehören im Allgemeinen die Check-in-Zeit, die Check-in-Adresse usw. Check-in-Regeln können einfach durch die folgenden Schritte implementiert werden:

1) Notieren Sie die aktuelle Zeit

Wir können eine Methode hinzufügen, um die aktuelle Zeit in der Check-in-Schaltfläche abzurufen.

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); 
}

2) Check-in-Regeln definieren

Die Check-in-Regeln müssen Check-in-Zeit, Check-in-Adresse usw. enthalten. Wir können im Uniapp-Projekt ein JSON-Objekt festlegen, um die Check-in-Regeln zu speichern. 🎜rrreee🎜Unter diesen stellt „2021-11-01“ die Check-in-Regeln für einen bestimmten Tag dar und sein Wert ist ein Array. Das Array speichert Längengrad, Breitengrad, Adresse und andere Informationen des Check-in-Standorts in Form von JSON-Objekten. 🎜🎜3) Implementieren Sie die Überprüfung der Check-in-Regeln. 🎜🎜 Die Überprüfung der Check-in-Regeln erfordert den Vergleich der aktuellen Zeit mit den Anmelderegeln und die Überprüfung, ob der aktuelle Standort innerhalb der Anmelderegeln liegt. Wir können der Check-in-Methode die Regelüberprüfungsfunktion hinzufügen. 🎜rrreee🎜Diese Funktion muss die Check-in-Regeln, das Check-in-Datum, den aktuellen Standort und andere Parameter übergeben. Der Rückgabewert ist ein boolescher Typ, der angibt, ob der aktuelle Standort im Geltungsbereich der Check-in-Regeln liegt. 🎜🎜4) Verbessern Sie die Anmeldemethode🎜🎜Die Anmeldemethode muss die Überprüfung der Check-in-Regel abschließen, den Anmeldestatus anzeigen und den Anmeldedatensatz sowie andere Funktionen speichern. 🎜rrreee🎜Durch die oben genannten Schritte können wir bereits eine einfache Standort-Check-in-Funktion implementieren. Unternehmen können diese Funktion entsprechend ihren eigenen Bedürfnissen weiter verbessern und erweitern. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel wird erläutert, wie Sie mit uniapp eine mobile Anwendung für den Standort-Check-in entwickeln. Durch die Integration des Amap SDK und die Implementierung von Autorisierung und Positionierung können wir die Standortinformationen des aktuellen Geräts abrufen. Durch das Speichern der Informationen zum Check-in-Standort, die Implementierung der Überprüfung der Check-in-Regeln und die Verbesserung der Check-in-Methode können wir bereits eine grundlegende standortbasierte Check-in-Anwendung implementieren. Im Übungsprozess können Leser diese Funktion entsprechend ihren eigenen Bedürfnissen weiter verbessern und erweitern, um eine bessere Unternehmensführung zu erreichen. 🎜

Das obige ist der detaillierte Inhalt vonuniapp implementiert den Standort-Check-in. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!