Trust
Trust
  • 发布:2018-10-07 12:01
  • 更新:2024-03-25 09:56
  • 阅读:148714

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

分类:uni-app

本文以高德微信小程序 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

微信小程序

仅适用于微信小程序

这些 SDK 因为当前 uni-app 还未统一app和小程序的直播api而暂时只能在小程序中使用。

补充完善

以上列出来的只是一部分资源信息,还有一些其它的 SDK 可能没有涉及到,欢迎大家继续补充相关信息。

再次强调,因为uni-app的app端其实是一个强化版的小程序引擎,所以支持小程序sdk在app端使用。但这些sdk在h5端、支付宝百度等小程序平台无法使用。

32 关注 分享
9***@qq.com 3***@qq.com ilijiayin l***@qq.com b***@foxmail.com w***@163.com 言会咸 LuxSun 中旭信息 呵呵打 1***@qq.com 90后菜鸟 9***@qq.com 没得好名字 s***@qq.com 9***@qq.com END丶YunFeng 1***@qq.com 思想1113 1***@qq.com 3***@qq.com 昨夜悟空 z***@gmail.com 来自007的凝视 奋斗的小乌龟 link_007 刘先生啊 sonicsunsky 2***@qq.com 湛泸煮酒 1***@qq.com DCloud_UNI_HRK

要回复文章请先登录注册

big黑钦

big黑钦

自顶!已解决微信小程序调取高德地图SDK,为什么在真机预览下报错 errCode: 0 , errMsg: request:fail url not in domain list
【原因是安全请求域名的问题】
请在开发者工具 【详情 - 本地设置 - 不检验域名...https证书】 勾去掉,重新编译查看console信息,将提示的请求的域名列表添加到 微信公众号/小程序 - 服务器域名 - request合法域名
2019-12-21 21:37
big黑钦

big黑钦

回复 1***@qq.com :
你好,请问你解决了么?我的也是同样问题,使用高德地图微信小程序SDK,定位,在真机上失败!报错 errCode: 0
2019-12-21 13:42
1***@qq.com

1***@qq.com

不行啊,你这是薛定谔的定位吗,我真机使用测试版小程序调试的时候,打开小程序调试模式就能获取到定位,关闭调试就获取不到,这是为啥
2019-12-13 11:44
1***@qq.com

1***@qq.com

回复 7***@qq.com :
请问你有解决吗
2019-12-09 15:21
1***@qq.com

1***@qq.com

回复 6***@qq.com :
你解决了吗请问,这个报错
2019-12-08 23:11
1***@qq.com

1***@qq.com

回复 5***@qq.com :
请问你解决了吗
2019-12-08 22:41
1***@qq.com

1***@qq.com

回复 5***@qq.com :
请问你解决了吗
2019-12-08 22:41
7***@qq.com

7***@qq.com

回复 7***@qq.com :
已解决,更新了最新版的hbuilder后,自定义基座是公共测试证书,对应的sh1码要在高德key那里的androidkey填对,实例中的key用的是小程序的key。
2019-11-25 17:43
5***@qq.com

5***@qq.com

回复 7***@qq.com :
私聊吧
2019-11-25 16:46
指尖上的代码

指尖上的代码

回复 8***@qq.com :
调试模式可以运行,其他的不行,一直报错,建议不要使用nvue,如果非要weex 建议用rn 我记得网易的有rn的sdk
2019-11-25 12:46