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。

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

五、更多 SDK 资源

5.1 通用 SDK

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

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

5.2 微信小程序

🎯仅适用于微信小程序

• 七牛云直播
• 声网互动

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

---