uniapp implements location check-in

With the popularization of mobile Internet, many companies have their own mobile applications. One of the very practical functions is location check-in. Through location check-in, companies can manage employees, such as attendance, task assignment, etc. This article introduces how to use uniapp to develop a mobile application for location check-in.

1. Preparation

Before starting development, you need to prepare the following:

1. uniapp development environment
2. 小program development tools
3. Amap Developer Account

If you have no relevant experience, you can first learn the basics of uniapp and mini programs. Next, let’s get to the point.

2. Integrate Amap

1. Register a developer account for Amap

Register a developer account on the Amap open platform and create The application obtains the Key. Key is the identity authentication for API calls and can be used in applications.

2. Integrate Amap SDK

Introduce Amap SDK into the uniapp project, the method is as follows:

1) Open the uniapp project in HBuilderX
2) Right-click the "uni_modules" folder and select "Install npm dependency"
3) Enter "@jv-uni/amap" in the search box, select "uni-app amap positioning plug-in", and click " Install”

3. Achieve authorization and positioning

Implement authorization and positioning in the uniapp project. The specific steps are as follows:

1) Use the following on the page The code introduces the Amap plug-in

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

2) Add the AMap.plugin method

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: '获取地址失败' 
          }); 
        } 
      }); 
    }); 
  } 
}

to the page that needs to be positioned through AMap.plugin Method, we introduced the Amap positioning plug-in and obtained the longitude, latitude and address information of the current device.

3. Implement the sign-in function

Through the above steps, we have been able to obtain the current location information, and then we can implement the sign-in function based on the obtained location information.

1. Save check-in location information

After obtaining the location information, we need to save the information to the database. The storage function can be implemented by calling the data storage API in uniapp. The specific steps are as follows:

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

2. Display the check-in status

After the check-in location information is successfully stored, the check-in status is displayed . We can set a check-in button on the current page, and after the user clicks the button, the check-in results will be displayed.

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

Use the v-if command to achieve the display effect after successful sign-in.

3. Sign-in rules

The implementation of the sign-in function also needs to consider the sign-in rules. The company's check-in rules generally include check-in time, check-in address, etc. Check-in rules can be easily implemented through the following steps:

1) Record the current time

We can add a method to get the current time in the check-in button.

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) Define check-in rules

The check-in rules need to include check-in time, check-in address, etc. We can set a JSON object in the uniapp project to store the check-in rules.

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

Among them, "2021-11-01" represents the check-in rules for a certain day, and its value is an array. The array stores the longitude, latitude, address and other information of the check-in location in the form of JSON objects.

3) Implement check-in rule verification

Check-in rule verification requires comparing the current time with the sign-in rule, and verifying whether the current location is within the sign-in rule. We can add the rule verification function in the check-in method.

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

This function needs to pass in parameters such as check-in rules, check-in date, and current location. The return value is a Boolean type, indicating whether the current location is within the scope of the check-in rules.

4) Improve the sign-in method

The sign-in method needs to complete the check-in rule verification, display the sign-in status and save the sign-in record and other functions.

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

Through the above steps, we can already implement a simple location check-in function. Enterprises can further improve and expand this function according to their own needs.

Summary

This article introduces how to use uniapp to develop a mobile application for location check-in. By integrating the Amap SDK and implementing authorization and positioning, we can obtain the location information of the current device. By saving the check-in location information, implementing check-in rule verification, and improving the check-in method, we can already implement a basic location-based check-in application. In the practice process, readers can further improve and expand this function according to their own needs to achieve better enterprise management.

The above is the detailed content of uniapp implements location check-in. For more information, please follow other related articles on the PHP Chinese website!