ホームページ > 記事 > ウェブフロントエンド > uniappは位置チェックインを実装します
モバイル インターネットの普及に伴い、多くの企業が独自のモバイル アプリケーションを用意していますが、その非常に実用的な機能の 1 つが位置チェックインです。企業はロケーション チェックインを通じて、勤怠管理やタスクの割り当てなどの従業員を管理できます。この記事では、uniapp を使用して位置情報チェックイン用のモバイル アプリケーションを開発する方法を紹介します。
1. 準備
開発を開始する前に、以下を準備する必要があります:
関連する経験がない場合は、まず uniapp およびミニ プログラムの基本を学ぶことができます。次に、本題に入ります。
2. Amap の統合
Amap オープン プラットフォームに開発者アカウントを登録し、アプリケーションがキーを取得します。キーは API 呼び出しの ID 認証であり、アプリケーションで使用できます。
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 サイトの他の関連記事を参照してください。