微信小程序 基础 - 13 (获取当前设备位置信息、接入腾讯位置服务)

news/2024/7/20 1:46:28 标签: 微信小程序, 小程序, 微信

在首页获取当前设备位置信息

  1. onLoad时获取当前定位信息.

    1. app.json中配置permission字段注册位置权限.

    2. 调用wx.getLocation获取经纬度信息.

  2. 根据当前经纬度, 解析为城市名称, 显示在首页左上角.(需要借助腾讯位置服务)

接入腾讯位置服务

http://lbs.qq.com

  1. 申请开发者密钥(key):申请密钥

  2. 开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存

    (小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)

  3. 下载微信小程序>微信小程序JavaScriptSDK,微信小程序>微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2

  4. 安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com

  5. 小程序示例

let QQMapWX = require('../../libs/qqmap-wx-jssdk.js')
let qqmapsdk = new QQMapWX({ key : '申请的key' })
qqmapsdk.search({...})
qqmapsdk.reverseGeocoder({...})


http://www.niftyadmin.cn/n/508700.html

相关文章

微信小程序 基础 - 14 (小程序云开发:云数据库、云存储、云函数)

概述 开发者可以使用腾讯提供的云服务来开发微信小程序/小游戏的后端接口, 而无需自己搭建服务器. 云开发提供的基础能力有: 云数据库 是一个可以在小程序前端操作, 也可以在云函数中操作的json类型数据库. 云存储 是一个可以在小程序前端操作的云盘.(云存储空间)…

微信小程序 基础 - 15 (小程序云开发:云数据库Collection对象)

Collection对象用于操作集合. 通过db.collection(集合名称)获取. 它提供了很多的方法对集合进行处理: 方法名作用collection.add()向集合中添加数据collection.doc()通过id查询一条记录, 返回Recordcollection.where()添加查询筛选条件collection.skip(n)跳过结果集的前n条记录…

微信小程序 基础 - 16 (自定义组件Component)

如何自定义组件? 1.新建Component. 与Page类似,包含四件套. 2.在.json中编写组件声明: {"component": true } 3.编写组件基础的wxml / wxss 4.在普通页面中,引入该组件,使用该组件. {"usingComponents": {…

微信小程序 基础 - 17 (vant组件库的使用)

安装vant组件库 步骤一 通过 npm 安装 进入项目根目录, 执行以下命令,初始化npm, 安装vant: cd xxxx #进入文件夹目录 cloudnpm init # 一路回车 初始化npm 将会生成package.json npm i vant/weapp -S --production #…

微信小程序 基础 - 18 (微信登录业务:登录、注册)

微信登录 1、点击 "登录" 文本, 调用微信开放的API接口,获取当前用户的微信公开信息:昵称/头像等. 2、更新界面. 注意: 虽然wx.getUserProfile方法可以获取用户微信的基本信息用户显示, 但是一个完整的登录业务还远远没有写完. 因为不仅需要…

微信小程序 基础 - 19 (登录后用户头像的更新)

上传更新头像的业务流程: 1.客户端点击头像选择头像图片 wx.chooseImage() 2.将头像图片上传到服务器, 并且获取访问该头像图片的网络路径. 3.将该网络路径, 与当前用户绑定在一起存入数据库 4.在下次登录时, 获取到最新的头像路径, 就可以看到新头像了 云开发-云存…

HTML5 新特性 - WebStorage 数据存储

webstorage提供了localStorage与sessionStorage用于在客户端持久化存储键值对数据. localStorage提供了一个独立的数据存储区域,这部分数据将会永久存储在客户端本地. sessionStorage提供了一个独立的数据存储区域,这部分数据只会在当前会话中生效.(浏…

HTML5 新特性 - audio、video 音频与视频标签

音频与视频 HTML5提供了音频与视频相关的新标准(标签)可以使浏览器支持音视频播放. 音频标签 浏览器支持的音频格式: mp3 wav ogg . 简写方式&#xff1a; <audio src"音频文件路径" controls></audio> 标准方式&#xff1a; <audio controls&…