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

🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀

一、uni-app 组成和跨端原理
 二、uni-app 各端差异注意事项
 三、uni-app 离线本地存储方案
 四、uni-app UI库、框架、组件选型指南
 五、uni-app 蓝牙开发
 六、uni-app 导航栏开发指南
 七、uni-app 原生控件层级过高无法覆盖的解决方案
 八、uni-app 设置缓存过期时间
 九、uni-app H5端使用注意事项
 十、uni-app之web-view组件 postMessage 通信【跨端开发系列】
十一、uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置【跨端开发系列】
十二、uni-app Android平台上架要求的隐私政策提示配置方法【跨端开发系列】
十三、uni-app 跨端开发精美开源UI框架推荐

文章目录

[🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀](#🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀)
前言📖
一、获取SDK
二、引入SDK
三、使用API
[四、其它 SDK](#四、其它 SDK)
[五、更多 SDK 资源](#五、更多 SDK 资源)
- [5.1 通用 SDK](#5.1 通用 SDK)
- [5.2 微信小程序](#5.2 微信小程序)

前言📖

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app 在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

从下面 uni-app 功能框架图可看出， uni-app 在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

🎯今日探讨主题 ：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。

javascript 复制代码

import amap from '../../common/amap-wx.js';  
export default {  
}

在 onLoad 中初始化一个高德小程序 SDK 的实例对象。

javascript 复制代码

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，获取当前位置地址信息，以及当前位置的天气情况。

javascript 复制代码

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 中引入。

五、更多 SDK 资源

5.1 通用 SDK

App 端和 微信小程序 均可使用小程序版 SDK

个推统计
又拍云存储
七牛云存储
腾讯地图
百度地图
高德地图
网易云信 IM
环信 IM
融云 IM
极光 IM
腾讯云会话
阿拉丁
神策数据
诸葛IO
GrowingIO
讯飞 AI
leancloud serverless开发
bomb serverless开发

5.2 微信小程序

🎯仅适用于微信小程序

七牛云直播
声网互动

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