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

发布于 1周前 作者 htzhanglong 来自 Uni-App

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

获取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 可能没有涉及到，欢迎大家继续补充相关信息。

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


Harmonyos Next教程
1 回复

在uni-app中集成微信小程序的第三方SDK及资源，可以通过条件编译的方式实现。这种方式允许你在不同的平台上使用特定的代码或资源，从而在uni-app项目中兼容微信小程序的SDK。以下是一个简要的代码案例，展示如何在uni-app中集成微信小程序的第三方SDK。

1. 配置条件编译

首先，在pages.json、manifest.json等配置文件中，为微信小程序添加条件编译标识。例如：

// pages.json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      },
      "condition": { // 条件编译标识
        "miniprogram-wx": true
      }
    }
    // ...其他页面
  ]
}

2. 引入微信小程序的第三方SDK

在你的uni-app项目中，创建一个专门用于微信小程序的目录，比如wx-sdk，将第三方SDK文件放入其中。然后，在需要使用SDK的页面或组件中，通过条件编译引入SDK。

// 在wx-sdk目录下的third-party-sdk.js（假设这是第三方SDK文件）
// 这里放置第三方SDK的实际代码

// 在需要使用SDK的页面中，比如pages/index/index.vue
<script>
export default {
  onLoad() {
    // #ifdef MP-WEIXIN
    // 引入微信小程序的第三方SDK
    const thirdPartySDK = require('../../wx-sdk/third-party-sdk.js');
    
    // 使用SDK，例如初始化
    thirdPartySDK.init({
      // 初始化参数
    });
    // #endif
  }
}
</script>

3. 使用微信小程序的特定资源

类似地，你可以通过条件编译来使用微信小程序的特定资源，比如图片、样式文件等。

<!-- 在pages/index/index.vue中使用条件编译引入微信小程序的图片资源 -->
<template>
  <view>
    #ifdef MP-WEIXIN
    <image src="/static/wx-images/logo.png"></image>
    #else
    <image src="/static/common-images/logo.png"></image>
    #endif
  </view>
</template>

4. 注意事项

  • 确保第三方SDK与uni-app及微信小程序的兼容性。
  • 在条件编译中，使用#ifdef MP-WEIXIN、#ifndef MP-WEIXIN、#endif等指令来控制代码的编译范围。
  • 对于复杂的SDK集成，可能需要查阅SDK的官方文档，了解如何在uni-app中正确初始化和使用。

通过上述方法，你可以在uni-app项目中有效地集成微信小程序的第三方SDK及资源，实现跨平台的兼容与功能扩展。

回到顶部