uniappは位置チェックインを実装します-uni-app-php.cn

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

PHPz

リリース： 2023-05-22 10:42:37

オリジナル

1351 人が閲覧しました

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

1. 準備

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

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

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

2. Amap の統合

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

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

Amap SDK の統合

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

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

承認と位置付けの実現

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. サインイン機能の実装

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

チェックイン位置情報の保存

位置情報を取得したら、その情報をデータベースに保存する必要があります。ストレージ機能はuniappのデータストレージAPIを呼び出すことで実装できます具体的な手順は以下の通りです:

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

ログイン後にコピー

チェックイン状況の表示

チェックイン後-イン位置情報が正常に保存され、チェックイン状況が表示されます。現在のページにチェックインボタンを設定でき、ユーザーがボタンをクリックすると、チェックイン結果が表示されます。

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

ログイン後にコピー

v-if コマンドを使用して、サインイン成功後の表示効果を実現します。

サインインルール

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

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 サイトの他の関連記事を参照してください。