uniappは位置チェックインを実装します

モバイル インターネットの普及に伴い、多くの企業が独自のモバイル アプリケーションを用意していますが、その非常に実用的な機能の 1 つが位置チェックインです。企業はロケーション チェックインを通じて、勤怠管理やタスクの割り当てなどの従業員を管理できます。この記事では、uniapp を使用して位置情報チェックイン用のモバイル アプリケーションを開発する方法を紹介します。

1. 準備

開発を開始する前に、以下を準備する必要があります:

1. uniapp開発環境
2. 小プログラム開発ツール
3. Amap 開発者アカウント

関連する経験がない場合は、まず uniapp およびミニ プログラムの基本を学ぶことができます。次に、本題に入ります。

2. Amap の統合

1. Amap の開発者アカウントの登録

Amap オープン プラットフォームに開発者アカウントを登録し、アプリケーションがキーを取得します。キーは API 呼び出しの ID 認証であり、アプリケーションで使用できます。

2. Amap SDK の統合

Amap SDK を uniapp プロジェクトに導入します。方法は次のとおりです:

1) HBuilderX で uniapp プロジェクトを開きます
2) 「uni_modules」フォルダーを右クリックし、「npm 依存関係のインストール」を選択します。
3) 検索ボックスに「@jv-uni/amap」と入力し、「uni-app amap 位置決めプラグイン」を選択します。 「インストール」をクリックします。

3. 承認と位置付けの実現

uniapp プロジェクトに承認と位置付けを実装します。具体的な手順は次のとおりです:

1 ) ページで次のコードを使用します。このコードでは、Amap プラグイン

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

が導入されています。2) 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 メソッドで位置を確認するには、Amap 測位プラグインを導入し、現在のデバイスの経度、緯度、住所情報を取得しました。

3. サインイン機能の実装

上記の手順で現在位置情報を取得できたので、取得した位置情報をもとにサインイン機能を実装します。位置情報。

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 コマンドを使用して、サインイン成功後の表示効果を実現します。

3. サインイン ルール

サインイン機能の実装では、サインイン ルールも考慮する必要があります。会社のチェックイン規則には通常、チェックイン時間、チェックイン住所などが含まれます。チェックイン ルールは、次の手順で簡単に実装できます。

1) 現在時刻を記録する

チェックイン ボタンに現在時刻を取得するメソッドを追加できます。

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) チェックイン ルールを定義する

チェックイン ルールには、チェックイン時間、チェックイン住所などを含める必要があります。uniapp プロジェクトで JSON オブジェクトを設定できます。チェックインルールを保存します。

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

このうち、「2021-11-01」は、特定の日のチェックインルールを表しており、その値は配列です。配列には、チェックイン場所の経度、緯度、住所、その他の情報が JSON オブジェクトの形式で保存されます。

3) チェックイン ルールの検証を実装する

チェックイン ルールの検証では、現在時刻とサインイン ルールを比較し、現在の場所がサインイン ルールの範囲内であるかどうかを確認する必要があります。 。チェックインメソッドにルール検証機能を追加できます。

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

この関数は、チェックイン ルール、チェックイン日、現在の場所などのパラメータを渡す必要があります。戻り値はブール型で、現在の場所がチェックの範囲内かどうかを示します。 -ルール内。

4) サインイン メソッドを改善する

サインイン メソッドは、チェックイン ルールの検証を完了し、サインイン ステータスを表示し、サインイン レコードなどを保存する必要があります。機能。

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

上記の手順により、簡単な位置チェックイン機能を実装することができます。企業は、自社のニーズに応じてこの機能をさらに改善および拡張できます。

概要

この記事では、uniapp を使用して位置情報チェックイン用のモバイル アプリケーションを開発する方法を紹介します。 Amap SDKを統合し、認証と測位を実装することで、現在のデバイスの位置情報を取得できます。チェックインの位置情報を保存し、チェックイン ルールの検証を実装し、チェックイン方法を改善することで、基本的な位置ベースのチェックイン アプリケーションをすでに実装できます。実践の過程で、読者は自分のニーズに応じてこの機能をさらに改善および拡張し、より良い企業管理を達成することができます。

以上がuniappは位置チェックインを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。