uniapp开发APP和微信小程序

您所在的位置:网站首页 微信上的腾讯地图改为高德地图了怎么办 uniapp开发APP和微信小程序

uniapp开发APP和微信小程序

2024-07-12 05:45| 来源: 网络整理| 查看: 265

在uniapp官网中明确说了可以使用高德地图来实现APP和微信小程序的定位。

在dcloud社区里大佬已经给出了实现方法(链接:uni-app 中使用微信小程序第三方 SDK 及资源汇总 - DCloud问答),

百度的其他博客也是照搬的这里面的内容,可是,如果对于一个新手来说,具体的步骤还是不会操作,所以我来一步步的操作一下。

首先在高德开放平台,注册账号并且申请相关的 key 等信息;

首先在高德开放平台注册账号,如图创建应用。

然后分别申请安卓和微信小程序的key

安卓key:key名称可以随便填,服务平台选择Android平台,安全码SHA1我这里使用的是uniapp的公共测试证书(SHA1:BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7),PackageName填程序打包的包名

,申请完安卓key后,再申请微信小程序的key

然后下载它的微信小程序版 SDK:微信小程序 SDK。 新建一个 uni-app 项目,新建一个 common 目录,然后将前面下载得到的 amap-wx.js 的文件复制进去。 Tip:这个 common 目录只是举例,并非强制约定。但是,不要放在 static 目录下。 新建的 uni-app 默认会有一个 index 页,在 index.vue 中,引入高德小程序 SDK。 import amap from '../../common/amap-wx.js'; export default { } 在 onLoad 中初始化一个高德小程序 SDK 的实例对象。 import amap from '../../common/amap-wx.js'; export default { data() { return { amapPlugin: null, key: '这里填写高德开放平台上申请的key' } }, onLoad() { this.amapPlugin = new amap.AMapWX({ key: this.key }); } } 利用高德小程序 SDK,获取当前位置地址信息。 import amap from '../../common/amap-wx.js'; export default { data() { return { amapPlugin: null, key: '高德key', addressName: '', weather: { hasData: false, data: [] } } }, onLoad() { this.amapPlugin = new amap.AMapWX({ key: this.key }); }, methods: { getRegeo() { uni.showLoading({ title: '获取信息中' }); this.amapPlugin.getRegeo({ success: (data) => { console.log(data) this.addressName = data[0].name; uni.hideLoading(); } }); } } }

到此,微信小程序就可以获得位置了。

APP还需要在manifest.json中配置key

在这里可能还需要ios的key,就再去申请一个ios的key

安全码Bundle ID就填打包时的(下图所示)

打包后在APP上也可以获得位置信息了。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3