H5定位終極解決方案

H5定位終極解決方案
背景
做一個H5的微商城，主要在微信內，但也要考慮到其他瀏覽器。其中，首頁需要根據當前用戶的經緯度找到距離最近的門店並展示。前端需要做的工作就是獲取用戶的經緯度然後查詢後臺接口並渲染頁面。

目標與分析
我們的目標是經過封裝之後，只需要調用一個方法就可以拿到返回的位置信息。
我們需要做的事情是，針對不同的端（微信H5和其他瀏覽器環境）封裝不同的類，再通過一個方法通過 UA 區分，調用不同環境對應的類獲取位置。
在微信內部，經過反覆的實踐之後，不論是通過原生的 HTML5 定位，還是通過第三方(如百度或騰訊地圖) jsapi 獲取位置，不僅定位時間長，甚至經常出現定位失敗的情況，嚴重影響用戶體驗，尤其對於大部分信息流都依賴於用於位置的商城首頁來說，是完全無法接受的。所以在微信內我們只有微信 sdk 這一種選擇；

而對於瀏覽器端，通過第三方的地圖 jsapi 或定位組件，可以穩定且較快速地獲取位置信息，爲了與微信內儘量保持一致，我們選擇的是騰訊地圖 jsapi。

解決方案
Talk is cheap, show me the code. 廢話不多說，直接上代碼：

1. 在瀏覽器中，通過騰訊地圖jsapi獲取位置
   1.1 在項目的 html 模版文件中引入騰訊地圖 jsapi
   <!-- index.html -->
   <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=騰訊地圖key&referer=應用名稱"></script&gt;
   說明：

使用騰訊地圖 jsapi, 需要先去騰訊地圖開放平臺申請自己的賬號，然後創建自己的應用，將騰訊地圖key 和創建的應用名稱替換上面的值。

1.2 調用獲取位置接口，獲取位置信息
爲了方便複用，我們單獨封裝一個騰訊地圖 jsapi 的類，命名爲 tMap.js

// tMap.js
const qq = window.qq
var geolocation = null
if (qq && qq.maps) {
// 初始化定位組件
geolocation = new qq.maps.Geolocation(
'QVLBZ-YUULR-OUMW7-WKXFD-4SUWS-UDBIA',
'mymap'
)
}

class TMap {
// 獲取定位計數器 用於定位失敗時累計次數 超過3次後不再繼續，拋出定位失敗錯誤
getPositionCount = 0

// 對外暴露的獲取位置接口
getLocation () {
return new Promise((resolve, reject) => {
// 定位成功回調
this.getTMapLocation(resolve, reject)
})
}

// 調用騰訊地圖獲取位置
getTMapLocation (success, fail) {
const _self = this

// 定位成功回調
const showPosition = position => {
  uni.setStorage({
    key: 'positionData',
    data: position
  })
  success(position)
}

// 定位失敗回調
const showErr = (err) => 
  // 如果獲取定位失敗超過3次 拋出錯誤 否則繼續獲取定位信息
  if (this.getPositionCount > 3) {
    fail('超過3次 獲取定位失敗')
  } else {
    // 定位失敗遞歸
    _self.getPositionCount = _self.getPositionCount + 1
    _self.getTMapLocation(success, fail)
  }
}

// 調用騰訊web定位組件獲取位置信息
if (geolocation) {
  geolocation.getIpLocation(showPosition, showErr, {
    timeout: 6000,  // 定位超時時長 單位ms
    failTipFlag: true
  })
}

}
}

export default new TMap()

2. 在微信 webview 中, 通過微信sdk獲取位置信息
   2.1 微信 js-sdk 相關的準備工作
   2.1.1 引入js文件
   /**
   • 微信sdk異步加載
   • @param {*} src
   • @param {} callback api接口
     /
     export const handlerLoadScript = callback => {
     const src = https://res.wx.qq.com/open/js/jweixin-1.4.0.js
     if (!(typeof callback === 'function')) {
     callback = function() {}
     }
     var check = document.querySelectorAll(script[src="${src}"])
     if (check.length > 0) {
     check[0].addEventListener('load', function() {
     callback()
     })
     callback()
     return
     }
     var script = document.createElement('script')
     var head = document.getElementsByTagName('head')[0]
     script.type = 'text/javascript'
     script.charset = 'UTF-8'
     script.src = src
     if (script.addEventListener) {
     script.addEventListener(
     'load',
     function() {
     callback()
     },
     false
     )
     } else if (script.attachEvent) {
     script.attachEvent('onreadystatechange', function() {
     var target = window.event.srcElement
     if (target.readyState === 'loaded') {
     callback()
     }
     })
     }
     head.appendChild(script)
     }
     2.1.2 注入權限驗證配置
     所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用。通常是通過後臺接口獲取配置信息。

/**

• 注入權限驗證配置
• @param {object} 微信 js-sdk 權限驗證配置
  */
  export const wxconfigInfo = config => {
  wx.config({
  debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
  appId: config.appId,
  timestamp: parseInt(config.timestamp),
  nonceStr: config.nonceStr,
  signature: config.signature,
  jsApiList: [ // 需要使用的 jsapi 列表
  ...,
  'getLocation' // 獲取地理位置
  ]
  })
  }
  2.2 調用 api 獲取位置信息
  /**
• 微信獲取位置
  */
  export const handleGetLocation = (config) => {
  return new Promise((resolve, reject)=>{
  wxconfigInfo(config)
  wx.ready(function () {
  wx.getLocation({
  type: 'wgs84', // 默認爲wgs84的gps座標，如果要返回直接給openLocation用的火星座標，可傳入'gcj02'
  success: function (res) {
  console.warn('微信sdk定位成功', res)
  resolve({
  lat: res.latitude, // 緯度
  lng: res.longitude, // 經度
  speed: res.speed, // 速度，以米/每秒計
  accuracy: res.accuracy // 位置精度
  })
  },
  fail: function (err) {
  console.error('微信sdk定位失敗', err)
  reject(err)
  }
  })
  })
  wx.error(function(err) {
  // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裏更新簽名。
  console.log('wxjsapi-error=', err)
  reject(wxjsapi-error: ${err})
  })
  })
  2.3 根據不同運行環境調用不同的定位方法
  // public.js

/**

• UA枚舉
  */
  const UA = {
  /**
  • 微信h5
    */
    WECHAT: 'WECHAT',
    /**
  • 支付寶h5
    */
    ALIPAY: 'ALIPAY',
    /**
  • 其他
    */
    OTHERS: 'OTHERS'
    }

/**

• 判斷客戶端運行環境 這裏只判斷微信和瀏覽器h5
  */
  export const getUserAgent = () => {
  var userAgent = navigator.userAgent.toLowerCase()

  if (userAgent.match(/Alipay/i) == 'alipay') {
  return UA.ALIPAY
  } else if (userAgent.match(/MicroMessenger/i) == 'micromessenger') {
  return UA.WECHAT
  } else {
  return UA.OTHERS
  }
  }
  // js-sdk.js
  /**

• 喚起微信api
• @param {*} _href 當前頁面url
• @param {*} options 分享信息
• @param {} apiType 調用api類型
  /
  export const handleWXSDKCall = (_href, apiType, options) => {
  return new Promise((resolve, reject)=>{
  // 通過後臺接口獲取配置信息
  WeChatServivce.sign(_href)
  .then(res => {
  if (res) {
  if ( apiType === 'location' ) {
  handleGetLocation(res).then((res)=>{
  resolve(res)
  }).catch(err=>{
  reject(err)
  })
  }
  }
  })
  .catch(err => {
  reject(err-sign: ${err})
  uni.showToast({
  title: err.data.code + err.data.msg,
  mask: true,
  icon: 'none'
  })
  })
  })
  }
  // getLocation.js
  import { getUserAgent, handlerLoadScript } from '@/module/utils'
  import { handleWXSDKCall } from '@/module/utils/wechat/wxJsApiSdk'
  import UA from '@/module/enums/userAgent'
  import TMap from '@/module/utils/tMap'

/**

• 對外暴露的獲取位置方法
• @return Promise resolve一個 positionData 對象 lat-緯度 lng-經度
  */
  const getLocation = () => {
  return new Promise((resolve, reject) => {
  console.log('進入全局獲取用戶位置方法')
  const storageData = uni.getStorageSync('positionData')
  const userAgent = getUserAgent()
  if (storageData) {
  resolve(storageData)
  } else {
  // 根據環境判斷 如果在微信內使用微信sdk 其他使用騰訊地圖定位組件
  if (userAgent === UA.WECHAT) {
  handlerLoadScript(() => {
  handleWXSDKCall(window.location.href, 'location').then((res) => {
  uni.setStorageSync('positionData', res)
  resolve(res)
  }).catch(err => {
  reject(err)
  })
  })
  } else {
  TMap.getLocation().then(res => {
  uni.setStorageSync('positionData', res)
  resolve(res)
  }).catch((err) => {
  reject(err)
  })
  }
  }
  })
  }

export default getLocation

3. 頁面調用
   3.1 綁定方法到 Vue 原型上
   import getLocation from '@/module/utils/getLocation'
   Vue.prototype.$getLocation = getLocation
   3.2 在頁面組件中調用
   onShow() {
   // 獲取位置信息後請求後臺接口
   this.$getLocation()
   .then(res => {
   console.warn('首頁獲取位置成功', res)
   this.latitude = res.lat
   this.longitude = res.lng
   // 這裏根據獲取到的經緯度請求後臺接口...
   })
   .catch(err => {
   console.error('首頁獲取位置失敗', err)
   // 錯誤處理
   })
   }

總結
遇到的坑以及需要注意的點：

使用微信sdk獲取位置信息需要按順序完成以下步驟：
異步加載微信sdk
通過接口獲取配置信息，配置微信sdk
在wx.ready回調中調用方法
必須嚴格按順序完成以上的三個步驟，否則是無法調用微信sdk的功能的。

總之，通過這篇文章，可以解決 H5 定位 99% 以上的應用場景。