uni-app集成第三方服务代码案例：地图、支付与网络请求

Uni-app 作为跨平台开发框架，其插件市场可能在某些方面存在不足，但通过技术手段和自定义开发，我们仍然可以集成第三方服务以增强应用功能。以下是一些代码案例，展示如何在 uni-app 项目中集成和使用常见服务，提升应用实用性。

1. 集成第三方地图服务（如高德地图）

首先，在高德地图开放平台申请 API Key，然后在 uni-app 项目中配置。以微信小程序为例，在 manifest.json 中配置高德地图插件：

// 在manifest.json中配置高德地图的API Key
"mp-weixin": {
    "appid": "your-appid",
    "setting": {
        "urlCheck": false
    },
    "usingComponents": true,
    "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序地图功能"
        }
    },
    "plugins": {
        "amap-wx": {
            "version": "1.4.15",
            "provider": "wxa9a7a1408e5b1169"
        }
    }
}

在页面中使用地图组件，通过设置经度、纬度和缩放级别来显示地图：

<template>
    <view>
        <map id="map" style="width: 100%; height: 300px;" :longitude="longitude" :latitude="latitude" :scale="scale"></map>
    </view>
</template>

<script>
export default {
    data() {
        return {
            longitude: 116.397428,
            latitude: 39.90923,
            scale: 15
        };
    }
}
</script>

注意，其他平台（如支付宝小程序或 H5）的配置可能有所不同，需参考相应文档。

2. 集成支付功能（如微信支付）

支付功能涉及敏感信息，需在微信开放平台申请支付权限，获取商户号和 API 密钥。在 uni-app 项目中，通过调用微信支付 SDK 实现支付。由于安全性考虑，这里不展示完整代码，但可参考 uni-app 官方文档和微信支付开发文档进行集成，确保正确处理请求和回调。

3. 自定义封装网络请求

为了增强网络请求能力，可以自定义封装一个网络请求库，支持拦截器和错误处理。例如，使用 axios 创建实例：

// network.js
import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 10000
});

// 请求拦截器
instance.interceptors.request.use(config => {
    // 在发送请求前添加令牌或参数
    return config;
}, error => {
    return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
    // 处理响应数据
    return response.data;
}, error => {
    // 处理错误
    return Promise.reject(error);
});

export default instance;

在页面中导入并使用这个封装库，进行 GET 或 POST 请求：

import axios from '@/utils/network.js';

axios.get('/path/to/resource')
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.error(error);
    });

通过以上方式，可以在 uni-app 项目中灵活集成第三方服务，提升应用的功能性和用户体验。