uni-app 中使用微信小程序第三方 SDK 及资源汇总
本文以高德微信小程序 SDK 为例，简述如何在 uni-app 中利用微信小程序第三方 SDK，实现 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();
}
});
}
}
}其它 SDK
高德小程序 SDK 类似辅助工具库，使用时在需要的页面中引入即可。
还有一种 SDK 比如阿拉丁、诸葛IO等统计类的 SDK 需要全局引入。小程序是在 app.js 中 引入。在 uni-app 中，则是在 main.js 中引入。
示例
附件中有完整的示例，下载后解压拖进 HBuilderX，填写申请的高德 key 后即可运行体验。
如果大家在使用微信小程序的第三方 SDK 时遇到问题，请在社区单独发帖描述清楚问题，并一定附上项目源码，方便我们测试，感谢配合。
更多 SDK 资源
通用 SDK
App 端和微信小程序均可使用小程序版 SDK
- 个推统计
- 又拍云存储
- 七牛云存储
- 腾讯地图
- 百度地图
- 高德地图
- 网易云信 IM
- 环信 IM
- 融云 IM
- 极光 IM
- 腾讯云会话
- 阿拉丁
- 神策数据
- 诸葛IO
- GrowingIO
- 讯飞 AI
- leancloud serverless开发
- bomb serverless开发
微信小程序
仅适用于微信小程序
- 七牛云直播
- 声网互动
这些 SDK 因为当前 uni-app 还未统一app和小程序的直播api而暂时只能在小程序中使用。
补充完善
以上列出来的只是一部分资源信息，还有一些其它的 SDK 可能没有涉及到，欢迎大家继续补充相关信息。
再次强调，因为uni-app的app端其实是一个强化版的小程序引擎，所以支持小程序sdk在app端使用。但这些sdk在h5端、支付宝百度等小程序平台无法使用。