uni-app 中使用微信小程序第三方 SDK 及资源汇总

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

然后下载它的微信小程序版 SDK:微信小程序 SDK

然后填写app包名,申请原生sdk的appkey信息,但不需要下载原生sdk。注意:App侧在Android中使用定位,或者Android、iOS使用地图,仍然需要同时向高德申请原生sdk的key信息,填写在manifest的app sdk配置中。

新建一个 uni-app 项目,新建一个 common 目录,然后将前面下载得到的 amap-wx.js 的文件复制进去。

Tip:这个 common 目录只是举例,并非强制约定。但是,不要放在 static 目录下。

引入SDK

新建的 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  
        });  
    }  
}

使用API

利用高德小程序 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();  
                }  
            });  
        }  
    }  
}
相关推荐
getyefang7 小时前
uniapp如何接入星火大模型
ai·uni-app
@PHARAOH7 小时前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_19 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙11 小时前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
2305_7978820911 小时前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
goto_w12 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
小宝小白12 小时前
【vue3】黑马小兔鲜儿项目uniapp navigationStyle
uni-app
暮雨哀尘13 小时前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理14 小时前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
Json____1 天前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位