博客站

UniApp 提供了多种方式与原生代码进行交互，以满足需要调用原生功能或实现高度定制化的需求。以下是 UniApp 与原生代码交互的几种主要方式：

一、使用 UniApp 原生插件

UniApp 支持通过原生插件扩展功能，开发者可以使用官方提供的插件或开发自定义插件。

1. 使用官方插件

• UniApp 提供了丰富的官方原生插件（如支付、地图、推送等），可以直接在插件市场中查找并使用。
• 示例：使用 uni.requestPayment 调用原生支付功能。

  uni.requestPayment({
    provider: 'wxpay',
    orderInfo: '订单信息',
    success: (res) => {
      console.log('支付成功', res);
    },
    fail: (err) => {
      console.log('支付失败', err);
    }
  });
  

2. 使用自定义插件

• 如果需要调用原生功能，可以开发自定义插件。
• 开发步骤：
  1. 使用原生语言（如 Java、Objective-C）编写插件代码。
  2. 将插件打包并集成到 UniApp 项目中。
  3. 在 UniApp 中通过 uni.requireNativePlugin 调用插件。
• 示例：

  const myPlugin = uni.requireNativePlugin('MyNativePlugin');
  myPlugin.doSomething({ param: 'value' });
  

二、使用 Native.js

Native.js 是 UniApp 提供的一种技术，允许开发者直接调用原生 API，而无需编写原生插件。

1. Native.js 的特点

• 直接调用原生 API，适合简单的原生功能调用。
• 支持 Android 和 iOS 平台。
• 需要熟悉原生 API 的使用。

2. 示例：调用原生 Toast

// Android
const Context = plus.android.importClass('android.content.Context');
const Toast = plus.android.importClass('android.widget.Toast');
const main = plus.android.runtimeMainActivity();
Toast.makeText(main, 'Hello Native.js', Toast.LENGTH_SHORT).show();

// iOS
const UIViewController = plus.ios.importClass('UIViewController');
const viewController = UIViewController.new();
plus.ios.invoke(viewController, 'showToast:', 'Hello Native.js');

三、使用 WebView 与原生交互

UniApp 支持在 App 端使用 WebView 组件，并通过 postMessage 与原生代码进行通信。

1. WebView 与原生交互的步骤

• 在原生代码中监听 WebView 的消息。
• 在 UniApp 中通过 postMessage 发送消息。
• 在原生代码中处理消息并返回结果。

2. 示例

• UniApp 代码：

  const webView = uni.createWebViewContext('myWebView');
  webView.postMessage({ data: 'Hello Native' });
  

• 原生代码（Android）：

  webView.setWebViewClient(new WebViewClient() {
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
          // 处理 UniApp 发送的消息
          return super.shouldOverrideUrlLoading(view, url);
      }
  });
  

四、使用 uni-app 原生渲染模式（nvue）

UniApp 支持使用 nvue 页面，这是一种基于原生渲染的技术，可以直接调用原生组件和 API。

1. nvue 的特点

• 使用原生渲染，性能更高。
• 支持调用原生组件和 API。
• 适合需要高性能的场景。

2. 示例：使用 nvue 调用原生组件

• 在 nvue 页面中使用原生组件：

  <template>
    <view>
      <native-component></native-component>
    </view>
  </template>
  

五、使用 uniCloud 云函数

如果需要与服务器端原生代码交互，可以使用 uniCloud 云函数。

1. uniCloud 的特点

• 支持 Node.js 编写云函数。
• 可以与原生代码（如数据库、第三方服务）进行交互。

2. 示例：调用云函数

• 云函数代码：

  exports.main = async (event, context) => {
    return { data: 'Hello from uniCloud' };
  };
  

• UniApp 调用云函数：

  uniCloud.callFunction({
    name: 'myCloudFunction',
    success: (res) => {
      console.log(res.result.data);
    }
  });
  

六、总结

UniApp 提供了多种与原生代码交互的方式，开发者可以根据需求选择合适的方式：

• 原生插件：适合功能扩展和复杂场景。
• Native.js：适合简单的原生 API 调用。
• WebView 交互：适合与原生页面混合开发。
• nvue：适合高性能场景。
• uniCloud：适合与服务器端原生代码交互。

通过合理使用这些方式，可以充分发挥 UniApp 的跨平台能力，同时满足原生功能的需求。