参考文章:http://ask.dcloud.net.cn/article/35070
本文以高德微信小程序 SDK 为例,简述如何在 uni-app 中利用微信小程序第三方 SDK,实现 App 端和微信小程序的代码通用。
获取SDK
首先在高德开放平台,注册账号并且申请相关的 key 等信息,然后下载它的微信小程序版 SDK:微信小程序 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开发