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

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

微信小程序

仅适用于微信小程序

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

补充完善

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

7 分享 关注
916879598@qq.com 369551081@qq.com ilijiayin llbin@qq.com bjsundan@foxmail.com weliff@163.com 709615106@qq.com
709615106@qq.com

709615106@qq.com

华为mete pro 10手机定位失败,荣耀v8手机可以定位
0 赞 2019-02-15 15:11
DCloud_UNI_Trust

DCloud_UNI_Trust 回复 1397267811@qq.com

必须是 https 的环境,这个是浏览器本身的限制。http://ask.dcloud.net.cn/article/35232
0 赞 2019-02-13 11:38
1397267811@qq.com

1397267811@qq.com 回复 1397267811@qq.com

自己写的有这个提示:getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.
0 赞 2019-02-13 11:22
淘淘公子

淘淘公子

不错,学习了。
0 赞 2019-02-12 13:37
1397267811@qq.com

1397267811@qq.com

下载了uni-amap.zip,填入申请的key 结果还是报错TypeError: a.fail is not a function,有没有解决成功的?谢谢
0 赞 2019-02-11 16:17
weliff@163.com

weliff@163.com

厉害啊,学习啦~
0 赞 2019-02-04 23:37
小肆开发

小肆开发

https://ask.dcloud.net.cn/question/64626?item_id=77527&rf=false
0 赞 2019-01-19 17:57
1445569471@qq.com

1445569471@qq.com 回复 1445569471@qq.com

解决了
0 赞 2018-12-21 19:47
1445569471@qq.com

1445569471@qq.com 回复 拜仁已伤

我的勾选了小程序还是报同样的错误是为什么呢
0 赞 2018-12-21 14:00
拜仁已伤

拜仁已伤 回复 windys

已经解决,是因为你的高德地图创建应用没有勾选小程序sdk导致的
0 赞 2018-12-07 15:31
windys

windys 回复 lshl124@163.com

同样的问题,请问怎么解决
0 赞 2018-12-04 15:17
windys

windys 回复 拜仁已伤

同样的问题,请问怎么解决
0 赞 2018-12-04 15:16
DCloud_UNI_Trust

DCloud_UNI_Trust 回复 拜仁已伤

请单独发帖,描述清楚问题的场景以及重现步骤,并提供可以重现问题的项目。
0 赞 2018-12-04 10:41
拜仁已伤

拜仁已伤

报错 [ERROR] : thirdScriptError
09:37:01.488 a.fail is not a function. (In 'a.fail({ errCode: "0", errMsg: c.errMsg || "" })', 'a.fail' is undefined);at pages/index/index handleProxy function;at api getLocation fail callback function
1 赞 2018-12-04 09:59
DCloud_UNI_Trust

DCloud_UNI_Trust 回复 wangsongbai1231@163.com

参考 hello uni-app 模板中的 ECharts 示例
0 赞 2018-12-03 10:49
wangsongbai1231@163.com

wangsongbai1231@163.com

echarts怎么用?
0 赞 2018-11-30 20:34
chuxinone

chuxinone

0 赞 2018-11-29 01:51
lshl124@163.com

lshl124@163.com 回复 lshl124@163.com

我已经设置了key:

return {
hasLocation: false,
location: {},
amapPlugin: null,
key: 'b85fe518e8d1a58ef86a644032754bce',
addressName: '',
weather: {
hasData: false,
data: []
}
}
0 赞 2018-11-28 22:01
lshl124@163.com

lshl124@163.com

你好,我使用附件中的包,通过联调的方式启动iphone中程序,没法获取当前地址信息,请帮忙看一下,错误信息如下:

[LOG] : App Show
21:57:50.215 [ERROR] : thirdScriptError
21:57:50.215 a.fail is not a function. (In 'a.fail({ errCode: b.data.infocode, errMsg: b.data.info })', 'a.fail' is undefined);at pages/index/index handleProxy function;at api request success callback function
21:57:50.215 success
21:57:50.215 __uniappservice.html:1:195673
21:57:50.215 __uniappservice.html:1:462574
21:57:50.215 __uniappservice.html:1:251836
21:57:50.215 __uniappservice.html:1:464267
21:57:50.215 __uniappservice.html:1:229338
21:57:50.215 A0w@__uniappservice.html:1:89683
21:57:50.215 i9@__uniappservice.html:1:3043
21:57:50.215 S1@__uniappservice.html:1:75177
21:57:50.216 __uniappservice.html:1:27043
0 赞 2018-11-28 22:01
1826815765@qq.com

1826815765@qq.com

uni-app mp-vue 小程序分享 如何带入参数的? 需要写真实的业务逻辑
0 赞 2018-11-06 23:28
369551081@qq.com

369551081@qq.com 回复 DCloud_UNI_Trust

好的,谢谢
0 赞 2018-10-17 17:30
1322806298@qq.com

1322806298@qq.com 回复 369551081@qq.com

引入mqtt.js 就可以连接mqtt 发布 订阅了
0 赞 2018-10-17 11:30
DCloud_UNI_Trust

DCloud_UNI_Trust 回复 369551081@qq.com

搜下小程序上的相关方案,引入下试试。
0 赞 2018-10-16 17:18
大苏

大苏

牛逼了
0 赞 2018-10-14 21:16

要回复文章请先登录注册