Trust
Trust
  • 发布:2018-10-07 12:01
  • 更新:2021-03-23 19:42
  • 阅读:77802

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端、支付宝百度等小程序平台无法使用。

26 关注 分享
916879598@qq.com 369551081@qq.com ilijiayin llbin@qq.com bjsundan@foxmail.com weliff@163.com 言会咸 LuxSun 中旭信息 呵呵打 1016996978@qq.com 不掉发的程序员 982975290@qq.com 没得好名字 shihao1016@qq.com 948720366@qq.com END丶YunFeng 10082146@qq.com 思想1113 113476114@qq.com 327020150@qq.com 昨夜悟空 zzoo19920905@gmail.com 来自007的凝视 奋斗的小乌龟 link_007

要回复文章请先登录注册

2238415778@qq.com

2238415778@qq.com

获取当前地理位置是不正确的,这是怎么回事。。。
2021-03-23 19:42
小源很6

小源很6

承接H5、小程序、APP等外包:
1. 经验丰富,做过多种类型项目,有案例可看;
2. 整个项目外包可以找我(小团队接单,面向客户、产品);
3. 只需要前端部分也可以找我(个人接单,面向服务端合作伙伴);
4. wechat(1025004826),备注:Dcloud论坛;
2021-03-23 13:06
蓝月亮

蓝月亮

a.fail is not a function 这是什么情况
2021-03-15 14:18
小兲

小兲

回复 1243008916@qq.com :
兄弟解决没有
2021-02-25 14:42
cydida

cydida

回复 往昔yy :
没问题,App都已上线了。
2021-02-20 11:19
1243008916@qq.com

1243008916@qq.com

配置好后,小程序端引入,发布测试版必须在打开调试情况下才可以获取到位置权限,关闭调试模式就获取不到,是什么原因?
2021-02-06 09:29
1243008916@qq.com

1243008916@qq.com

配置好后,小程序端引入,发布测试版必须在打开调试情况下才可以获取到位置权限,关闭调试模式就获取不到,是什么原因?
2021-02-06 09:29
1243008916@qq.com

1243008916@qq.com

配置好后,小程序端引入,发布测试版必须在打开调试情况下才可以获取到位置权限,关闭调试模式就获取不到,是什么原因?
2021-02-06 09:29
七彩虹

七彩虹

app基座调试没有问题,打包后,在真机安装就获取不到了,也不知道是啥原因,是不是只兼容 微信小程序呢
2021-02-03 20:12
软件开发林胜武

软件开发林胜武

承接H5、小程序、APP等外包:
1. 经验丰富,做过多种类型项目,有案例可看;
2. 整个项目外包可以找我(小团队接单,面向客户、产品);
3. 只需要前端部分也可以找我(个人接单,面向服务端合作伙伴);
4. wechat(13070273424);
2021-01-07 10:08