专栏首页前端全栈开发者实战:在小程序中获取用户所在城市信息

实战:在小程序中获取用户所在城市信息

最近在做自己的小程序《看啥好呢》,这个小程序是使用云开发的方式开发的,功能特别简单,就是获取豆瓣、大麦网的数据展示,虽然功能简单,但还是记录下开发过程和一些技术点,大约会有两篇博文产出,这是第一篇。GitHub地址

扫码体验

背景

在《看啥好呢》中有个本地好看 Tab,进去后会获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上。

微信小程序中,我们可以通过调用 wx.getLocation() 获取到设备当前的地理位置信息,这个信息是当前位置的经纬度。如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢?

微信小程序中并没有提供这样的API,但是没关系,有 wx.getLocation() 得到的经纬度作为基础就够了,其他的,我们可以使用其他第三方地图服务可以来实现,比如腾讯地图或百度地图的API。

所以整个步骤就是:

  1. 在小程序中获取当前的地理位置,涉及小程序API为wx.getLocation
  2. 把第1步中获得的经纬度信息通过腾讯地图的接口逆地址解析,涉及腾讯地图接口为 reverseGeocoder(options:Object)

在小程序中获取当前的地理位置

在小程序中,调用 wx.getLocation,使用前需要用户授权 scope.userLocation,代码如下

checkAuth(callback) {
  wx.getSetting({
    success(res) {
      if (!res.authSetting['scope.userLocation']) {
        wx.authorize({
          scope: 'scope.userLocation',
          success() {
            wx.getLocation({
              type: 'wgs84', 
              success(res) {
                callback(res.latitude, res.longitude)
              }
            })
          }
        })
      }
    }
  })
}

其中 type 的取值可以为:

  • wgs84 意思返回 gps 坐标
  • gcj02 返回可用于 wx.openLocation 的坐标。

运行后会提示如下信息,还需要在 app.json 中配置 permission 字段

查询文档后得知,得知需要如下配置

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
}

desc 用于在弹出的授权提示框中展示,如下

允许后即可获取接口返回的信息,此过程会在右上角胶囊按钮上显示箭头图标

{
    accuracy: 65
    errMsg: "getLocation:ok"
    horizontalAccuracy: 65
    latitude: 30.25961    // 纬度,范围为 -90~90,负数表示南纬
    longitude: 120.13026    // 经度,范围为 -180~180,负数表示西经
    speed: -1
    verticalAccuracy: 65
}

latitudelongitude 即是我们需要的两个字段

腾讯地图接口逆地址解析

以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key),以及进行KEY设置,按照微信小程序JavaScript SDK入门及使用限制文档

在 KEY设置的启用产品中,勾选 WebServiceAPI,选择签名校验方式,因为我是使用云开发的方式,所以没有什么域名也没有授权IP。

这部分代码逻辑如下

import QQMapWX from '../../scripts/qqmap-wx-jssdk.min.js'
let qqmapsdk
Page({
    onLoad: function (options) {
      // 实例化API核心类
      qqmapsdk = new QQMapWX({
         key: '开发密钥(key)'    // 必填
      });
      this.checkAuth((latitude, longitude) => {
         // https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
         qqmapsdk.reverseGeocoder({
           sig: 'KEY设置中生成的SK字符串',    // 必填
            location: {latitude, longitude},
            success(res) {
                wx.setStorageSync('loca_city', res.result.ad_info.city)
            },
            fail(err) {
               console.log(err)
               wx.showToast('获取城市失败')
            },
            complete() {
               // 做点什么
            }
         })
      })
    }
})

reverseGeocoder 接口返回的结果,这里面的字段比较多,详细可以看接口文档,里面好几个字段可以取到城市,其中 ad_info 是行政区划信息,我就取这里面的 city 了。

【 全 文 完 】

本文代表个人观点,内容仅供参考。若有不恰当之处,望不吝赐教!

原文链接https://zhangbing.site/2019/12/08/实战:在小程序中获取用户所在城市信息/

作者简介:做工程不做码农(微信公众号同名),Web前端工程师,7年开发经验,坐标杭州,聚焦大前端技术的公众号,分享我的原创或精选文章,欢迎关注。我的个人微信(dunizb),欢迎添加好友进一步交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

相关文章

  • 【实战】在小程序中获取用户所在城市信息(附源码)

    最近在做自己的小程序《看啥好呢》,这个小程序是使用云开发的方式开发的,功能特别简单,就是获取豆瓣、大麦网的数据展示,虽然功能简单,但还是记录下开发过程和一些技术...

    Dunizb
  • Webpack 的 Tree Shaking 概念详解

    webpack 2.0 开始引入 tree shaking 技术,翻译过来的中文意思就是摇树,它可以在打包时忽略没有用到的代码。

    Dunizb
  • 小程序组件开发之时间轴组件及组件关系

    先简单介绍一下公司业务和前端项目情况吧。公司是做金融行业财富管理的业务,涉及主要是做基金、保险这一块。前端项目目前涉及B端后台管理系统、C端小程序、Node服务...

    Dunizb
  • 【实战】在小程序中获取用户所在城市信息(附源码)

    最近在做自己的小程序《看啥好呢》,这个小程序是使用云开发的方式开发的,功能特别简单,就是获取豆瓣、大麦网的数据展示,虽然功能简单,但还是记录下开发过程和一些技术...

    Dunizb
  • 微信小程序版本自动更新

    当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

    一觉睡到小时候
  • 小程序分类知多少,八大分类你来找

    小程序现在已经成为了互联网圈的热门讨论对象。从 2017 年 1 月登场,到之后被称为鸡肋,再到现在反叛逆袭称为互联网圈的大热点,小程序经历了不小的高低起伏。现...

    微宝阁
  • 发现违规小程序,该如何举报它?| 小程序问答 #43

    其中,我们可能会发现一些「违规」的小程序。虽然微信有完善的小程序审核机制,但人工审核总是会存在纰漏;或是开发者在小程序过审后,通过技术手段修改小程序内容等。

    知晓君
  • 一篇文章看懂小程序的六大分类

    小程序现在已经成为了互联网圈的热门讨论对象。从 2017 年 1 月登场,到之后被称为鸡肋,再到现在反叛逆袭称为互联网圈的大热点,小程序经历了不小的高低起伏。 ...

    企鹅号小编
  • VisualStudio 通过外部调试方法快速调试库代码

    在开发的时候,我有一个很大的项目,里面包含了 1000 个项目,但是我需要调试里面的一个库,如果直接修改这个库,会让 VisualStudio 重新编译 90 ...

    林德熙
  • 单一职责原则

    尽量让每个类只负责软件中的一个功能, 并将该功能完全封装 (你也可称之为隐藏) 在该类中。

    硬核编程

扫码关注云+社区

领取腾讯云代金券