在跨端开发中，UniApp 提供了一个统一的开发框架，通过一套代码适配多种平台（如 H5、小程序、App 等），显著提升了开发效率。然而，各个平台的特性和功能差异较大，适配这些差异是开发中的关键环节。本篇博客将详细讲解如何在 UniApp 中适配不同平台的特性，并具体说明小程序特性（如支付、分享）和 App 特性（如权限管理、原生插件）的实现。

1. 平台适配概述

UniApp 支持多个平台，包括：

• H5：适合在浏览器中运行的网页应用。
• 小程序：如微信小程序、支付宝小程序、百度小程序等，特定平台的轻量级应用。
• App：可以直接打包成 iOS 和 Android 应用，支持原生功能调用。

为了在多个平台上运行，UniApp 提供了跨平台 API 和能力，但是不同平台仍有一些独有的特性。UniApp 提供了条件编译功能，可以针对不同平台进行适配代码编写。

条件编译的基本语法

条件编译用于编写特定平台的代码，避免在不支持该功能的平台上运行。常见的条件编译方式如下：

// #ifdef MP-WEIXIN
// 仅在微信小程序中执行的代码
console.log('当前是微信小程序环境');
// #endif

// #ifdef APP-PLUS
// 仅在 App 中执行的代码
console.log('当前是 App 环境');
// #endif

// #ifdef H5
// 仅在 H5 环境中执行的代码
console.log('当前是 H5 环境');
// #endif

通过这种方式，我们可以为不同平台编写不同的逻辑和功能实现。

2. 小程序特性：支付与分享

微信小程序支付功能

微信小程序中常用的功能之一是支付。开发者可以利用微信支付 API 实现微信内的支付功能。以下是如何在 UniApp 中实现微信小程序支付的示例：

示例：微信小程序支付

methods: {
  async initiatePayment(orderId) {
    // 1. 调用后台接口获取支付参数
    const res = await uni.request({
      url: 'https://api.example.com/wechat/pay', // 后台接口，返回支付参数
      method: 'POST',
      data: { orderId },
    });
    const { timeStamp, nonceStr, package, paySign } = res.data;

    // 2. 调用微信支付 API
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: timeStamp.toString(),
      nonceStr: nonceStr,
      package,
      signType: 'MD5',
      paySign,
      success: (res) => {
        console.log('支付成功', res);
      },
      fail: (err) => {
        console.error('支付失败', err);
      }
    });
  }
}

微信小程序分享功能

微信小程序允许用户分享页面或自定义信息到聊天或朋友圈。分享功能可以通过在页面配置中声明 onShareAppMessage 来实现。

示例：微信小程序分享

export default {
  onShareAppMessage() {
    return {
      title: '分享标题',
      path: '/pages/home/home', // 分享后用户打开的路径
      imageUrl: '/static/share-image.png' // 自定义分享图片
    };
  }
};

在 onShareAppMessage 中，我们可以定义分享的标题、分享路径以及自定义的分享图片，用户可以在小程序中直接分享给朋友或朋友圈。

3. App 特性：权限管理与原生插件

App 中的权限管理

在开发 App 时，通常需要获取用户的权限，比如相机、地理位置、通知等。在 UniApp 中，权限管理主要通过 plus.runtime 和 plus.android API 实现。开发者可以根据需要申请相关权限。

示例：申请相机权限

methods: {
  checkCameraPermission() {
    // 获取平台信息
    if (plus.os.name === 'Android') {
      const main = plus.android.runtimeMainActivity();
      const PERMISSION = plus.android.importClass('android.Manifest').permission;
      const PackageManager = plus.android.importClass(main).getPackageManager();
    
      // 检查是否已经有相机权限
      const hasPermission = PackageManager.checkPermission(PERMISSION.CAMERA, main.getPackageName());
      if (hasPermission !== PackageManager.PERMISSION_GRANTED) {
        // 请求相机权限
        plus.android.requestPermissions([PERMISSION.CAMERA], (result) => {
          if (result.grantResults[0] === PackageManager.PERMISSION_GRANTED) {
            console.log('相机权限已获取');
          } else {
            console.log('相机权限被拒绝');
          }
        });
      }
    }
  }
}

在 Android 上，需要通过 plus.android 和 Manifest 来检查和申请权限，而 iOS 上的权限管理则通过 plus.runtime 直接处理。

使用原生插件

如果项目中需要用到 UniApp 未提供的原生功能，可以通过 UniApp 提供的原生插件机制来扩展。开发者可以编写自己的原生插件，并通过 plus 对象调用它们。

示例：调用自定义原生插件

1. 在项目中引入自定义的原生插件，例如二维码扫描插件。
2. 使用 plus 对象调用该插件：

methods: {
  scanQRCode() {
    plus.barcode.scan((result) => {
      console.log('二维码扫描结果:', result);
    }, (error) => {
      console.error('二维码扫描失败:', error);
    });
  }
}

这个示例展示了如何在 UniApp 中调用原生插件，完成二维码扫描的功能。

4. 跨平台开发的最佳实践

为了确保应用在不同平台上能够正常运行并充分利用每个平台的特性，开发者需要注意以下几点：

1. 条件编译：合理使用条件编译，将各平台的特定代码隔离开来，避免在不支持的环境下执行不必要的逻辑。
2. API 兼容性：UniApp 提供了很多跨平台 API，但部分功能可能在某些平台上不可用（如微信支付），因此需要进行平台特性检测。
3. 原生插件与扩展：对于 App 端，如果需要使用复杂的原生功能（如系统级别的通知、蓝牙通信等），可以编写或引入原生插件，保证功能的完备性。

总结

UniApp 在适配多平台开发时提供了大量的跨平台 API 和功能，同时通过条件编译允许开发者根据不同平台编写特定逻辑。对于小程序平台，如微信小程序，开发者可以轻松实现支付和分享功能；而在 App 端，UniApp 通过权限管理和原生插件扩展了移动设备的能力。掌握这些平台特性的适配方法，将帮助开发者在多个终端上构建出一致且优秀的应用体验。