快捷導(dǎo)航

uniapp微信小程序打卡功能的詳細(xì)實(shí)現(xiàn)流程

更新時(shí)間：2022年12月15日 10:14:32 作者：爆竹

最近因?yàn)楣ぷ餍枰?搭建了一個(gè)加班打卡的小程序,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序打卡功能的詳細(xì)實(shí)現(xiàn)流程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、vue后臺(tái)地圖選地點(diǎn)

step1|? 注冊(cè)賬號(hào)并申請(qǐng)Key

請(qǐng)參考鏈接注冊(cè)賬號(hào)并申請(qǐng)Key 部分

step2|? 設(shè)置 JSAPI 安全密鑰的腳本標(biāo)簽

注意事項(xiàng): 必須在vue項(xiàng)目index.html中插入該script標(biāo)簽

<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode:'「您申請(qǐng)的安全密鑰」'//「您申請(qǐng)的安全密鑰」
  }
</script>

step3|? 地圖選點(diǎn)頁面demo

npm包依賴: npm install --save @amap/amap-jsapi-loader

demo描述主要實(shí)現(xiàn)的地點(diǎn)搜索和地點(diǎn)選取兩個(gè)功能點(diǎn)，請(qǐng)結(jié)合自己項(xiàng)目修改。

<template>
  <div class="map-demo-container">
    <div id="container" />
    
    <div class="search-bar">
      <el-input id="tipinput" v-model="kw" placeholder="請(qǐng)輸入關(guān)鍵字搜索" clearable />
    </div>

    <div style="margin-top: 10px">
      <el-tag type="primary">地址：{{ location.address }}</el-tag>
      <el-tag type="primary">經(jīng)緯度：{{ location.lnglat }}</el-tag>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

let mapIns = null;// 地圖實(shí)例
let marker = null;// 標(biāo)記點(diǎn)
let geocoder = null;// 地理編碼與逆地理編碼
let infoWindowIns = null;// 信息窗體實(shí)例

export default {
  name: 'map-demo',

  data() {
    return {
      kw: '',
      // 當(dāng)前選擇的地址
      location: {
        address: '',
        lnglat: [],
      }
    }
  },

  mounted() {
    this.initMap();
  },

  methods: {
    // 初始化地圖
    initMap() {
      let that = this;

      AMapLoader.load({
        "key": "申請(qǐng)好的Web端開發(fā)者Key",// 申請(qǐng)好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填
        "version": "2.0",// 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
        "plugins": ['AMap.ToolBar', 'AMap.Scale', 'AMap.Geocoder', 'AMap.PlaceSearch','AMap.AutoComplete'],// 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
        // 實(shí)例化地圖
        mapIns = new AMap.Map('container', {
          viewMode: '2D', // 默認(rèn)使用 2D 模式，如果希望使用帶有俯仰角的 3D 模式，請(qǐng)?jiān)O(shè)置 viewMode: '3D',
          zoom: 11, //初始化地圖層級(jí)
          // center: [116.397428, 39.90923], //初始化地圖中心點(diǎn)
        });

        // 添加地圖控件
        mapIns.addControl(new AMap.ToolBar({
          position: {
            top: '40px',
            right: '40px'
          }
        }));
        mapIns.addControl(new AMap.Scale());
      
        // 信息窗體
        infoWindowIns = new AMap.InfoWindow({
          anchor: 'top-center',
          content: '',
        });
        mapIns.on('complete', () => {
          console.log('地圖圖塊加載完成后觸發(fā)');
        })
        mapIns.on('click', (e) => {
          this.kw = '';
          console.log('點(diǎn)擊地圖觸發(fā)e', e);

          let lnglat = [e.lnglat.lng, e.lnglat.lat];

          geocoder.getAddress(lnglat, function(status, result) {
            console.log('status-result', status, result)

            if (status === 'complete' && result.info === 'OK') {
              // result為對(duì)應(yīng)的地理位置詳細(xì)信息

              that.setMarker({
                address: result.regeocode.formattedAddress,
                lnglat,
              })
            }
          })
        })

        // 地理編碼與逆地理編碼 插件
        geocoder = new AMap.Geocoder({});
        // 輸入提示與POI搜索
        var auto = new AMap.AutoComplete({
          input: "tipinput"
        });
        var placeSearch = new AMap.PlaceSearch({
          map: mapIns
        });//構(gòu)造地點(diǎn)查詢類
        auto.on("select", function(e) {
          console.log('select', e);
          // placeSearch.setCity(e.poi.adcode);
          // placeSearch.search(e.poi.name);  //關(guān)鍵字查詢查詢
          geocoder.getLocation(e.poi.name, function(status, result) {
            console.log('status-result', status, result)
            if (status === 'complete' && result.info === 'OK') {
              // result中對(duì)應(yīng)詳細(xì)地理坐標(biāo)信息
              that.setMarker({
                address: e.poi.name,
                lnglat: [result.geocodes[0].location.lng, result.geocodes[0].location.lat],
              })
            }
          })
        });//注冊(cè)監(jiān)聽，當(dāng)選中某條記錄時(shí)會(huì)觸發(fā)
      }).catch(e => {
        throw e;
      })
    },
    // 設(shè)置標(biāo)記
    setMarker({
      address,
      lnglat
    }) {
      // 保存用戶當(dāng)前選擇地址信息
      this.location = {
        address,
        lnglat
      }

      // 地圖標(biāo)記和信息窗體
      marker && mapIns.remove(marker);
      marker = new AMap.Marker({
        position: lnglat,
        title: address
      });
      mapIns.add(marker);

      infoWindowIns.setContent(address);
      infoWindowIns.open(mapIns, lnglat);
    }
  }
}
</script>

<style lang="scss" scoped>
#container {
  height: 700px;
}

.map-demo-container {
  position: relative;

  .search-bar {
    position: absolute;
    left: 20px;top: 20px;;
    display: flex;
    align-items: center;
    width: 500px;
  }
}
</style>

二、uniapp微信小程序打卡

step1|? 獲取key

請(qǐng)參考鏈接

step2|? manifest.json中配置權(quán)限

step3|? 獲取定位地址與經(jīng)緯度

amap-wx.130.js下載

<script>	
import amap from '@/static/js/amap-wx.130.js';

export default {
    // ...其他選項(xiàng)
    methods: {
        getAddress(){
            const _this = this;
            this.amapPlugin = new amap.AMapWX({
                key: '您申請(qǐng)的key'
            });
            uni.showLoading({
                title: '獲取信息中'
            });
            // 成功獲取位置
            _this.amapPlugin.getRegeo({
                success: (data) => {
                    console.log('當(dāng)前定位', data);
                    // data包含定位地址與經(jīng)緯度等信息,請(qǐng)根據(jù)自己項(xiàng)目需求寫對(duì)應(yīng)邏輯
                    uni.hideLoading();
                },
                // 獲取位置失敗
                fail: (err) => {
                    console.log(err)
                    uni.showToast({
                        title:"獲取位置失敗，請(qǐng)重啟小程序",
                        icon:"error"
                    })
                }
            });
        }
    }
}

三、核心流程描述

后臺(tái)打卡活動(dòng)選點(diǎn)，并保存地址和經(jīng)緯度，打卡活動(dòng)還存在一個(gè)打卡范圍參數(shù)
進(jìn)入小程序打卡頁面，獲取定位點(diǎn)地址和經(jīng)緯度
計(jì)算打卡點(diǎn) 和定位點(diǎn) 距離，比對(duì)打卡范圍

若距離 > 打卡范圍，則不能打卡
若距離 < 打卡范圍，則可打卡

該判斷結(jié)果，用于頁面展示那些內(nèi)容

/**計(jì)算兩個(gè)經(jīng)緯度距離
* @param lat1 第一個(gè)緯度
* @param log1 第一個(gè)經(jīng)度
* @param lat2 第二個(gè)維度
* @param log2 第二個(gè)經(jīng)度
* @return 兩點(diǎn)距離(單位: m)
*/
getDistance(lat1, lon1, lat2, lon2) {
   var radLat1 = (lat1 * Math.PI) / 180; //將角度換算為弧度
   var radLat2 = (lat2 * Math.PI) / 180; //將角度換算為弧度
   var a = radLat1 - radLat2;
   var b = (lon1 * Math.PI) / 180 - (lon2 * Math.PI) / 180;
   var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
   s = s * 6378137.0; // 取WGS84標(biāo)準(zhǔn)參考橢球中的地球長半徑(單位:m)
   // s = Math.round(s * 10000) / 10000; //兩點(diǎn)之間距離(保留四位)
   return s; //(單位:m)
},