教您在Uniapp小程序中打开APP原生页面，玩转支付功能！

2023-11-12 23:47:52

Uniapp 打开原生页面：微信支付轻松搞定

微信支付对 Uniapp 小程序至关重要

微信支付是 Uniapp 小程序中必不可少的支付方式。但由于支付操作和完成页面由原生 APP 实现，小程序本身无法直接完成支付功能。因此，我们需要打开原生页面，以便用户在原生页面中支付。

实现步骤

创建原生支付完成页面： 在原生 APP 项目中创建新的页面，作为支付完成页面。
跳转到原生页面： 使用 navigator 组件跳转到原生页面的地址。
获取小程序参数并进行支付： 在原生页面的生命周期函数中，获取小程序传来的参数并进行支付操作。
支付完成后返回小程序： 支付完成后，在原生页面跳转回 Uniapp 小程序。

代码示例

// Uniapp 小程序代码
import { navigator } from '@tarojs/taro';

const goToNativePage = () => {
  navigator.navigateTo({
    url: 'myapp://path/to/native/page',
    success: () => {
      console.log('跳转到原生页面成功');
    },
    fail: (err) => {
      console.log('跳转到原生页面失败', err);
    },
  });
};

// 原生 APP 代码
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;

public class NativePageActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Intent intent = getIntent();
    String params = intent.getStringExtra("params");
    Log.d("NativePageActivity", "收到小程序参数：" + params);

    // 根据参数进行支付操作...

    // 支付完成后，跳转回小程序
    Intent backIntent = new Intent();
    backIntent.setAction("myapp://back/to/uniapp");
    startActivity(backIntent);
  }
}