uni-app腾讯地图签名计算

原创已于 2022-11-16 19:56:12 修改 · 544 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #uniapp #腾讯地图

于 2022-11-16 18:38:05 首次发布

这篇博客主要介绍了在Vue.js项目中如何利用vue-jsonp库进行JSONP请求来解决H5跨域问题。文章详细展示了如何生成签名、构造请求参数，并针对H5环境调用jsonp库进行数据获取，同时也提供了非H5环境下uni.request的使用方法。

h5中调用使用jsonp，注意参数中会带上callback，需要额外处理这个参数的逻辑。

这里jsop是用的库为 vue-jsonp


/**
 * 生成签名
 * @param {*} path
 * @param {*} params
 */
const getSig = function (path, params) {
  const paramsStr = Object.keys(params)
    .sort()
    .reduce((res, key) => {
      const value = params[key]
      return [...res, key + '=' + value]
    }, [])
    .join('&')
  return md5(path + '?' + paramsStr + SECRET_KEY)
}

/**
 * 地图专用API请求（主要是为了处理跨域问题）
 * @param {Object} path
 * @param {Object} param
 */
const mapRequest = function (path, params) {
  return new Promise((resolve, reject) => {
    const callbackName = 'jsonp_' + guid()
    params = {
      key: MAP_KEY,
      output: 'json',
      ...params,
    }
    // #ifdef H5
    params.output = 'jsonp'
    params.callback = callbackName
    // #endif

    params.sig = getSig(path, params)
    const url = 'https://apis.map.qq.com' + path

    // #ifdef H5
    jsonp(url, { ...params, callbackName })
      .then((data) => {
        resolve(data)
      })
      .catch((error) => {
        reject(error)
      })
    // #endif
    // #ifndef H5
    uni.request({
      url: url,
      method: 'GET',
      data: params,
      success: (data) => {
        resolve(data.data)
      },
      fail: (error) => {
        reject(error)
      },
    })
    // #endif
  })
}