uniapp app与mini program相互跳转

app跳微信小程序

方法1：通过URL Schema跳转

参考文档获取 URL Scheme | 微信开放文档

方法2: 通过URL Link跳转

参考文档获取加密 URL Link | 微信开放文档

注意点：

上述两个方法生成的url，需要先通过浏览器打开链接，再自动跳转小程序，内嵌webview方法不可行，uniapp唤起浏览器打开链接方法如下：

// #ifdef APP
plus.runtime.openURL(url, callback)
// #endif

方法3: 通过app分享跳转

步骤1: 配置manifest.json

参数说明

• appid
  微信开放平台申请的应用ID（appid）微信开放平台
• iOS平台通用链接（Universal Link）

可理解为通过打开一个Https链接来直接启动您的客户端应用，
在iOS平台微信支付使用的通用链接，必须与微信开放平台 “管理中心” > “应用详情” > “开发信息” 中的“Universal Links”项中配置一致

注意点：

android app跳转小程序只需要配置appid， iOS app跳转小程序需要配置Universal Link。

关于如何配置Universal links, 可参考uniapp参考文档uni-app官网

上述文档中步骤2开通uniapp的云服务空间和前端托管不是必要操作，可自行配置apple-app-site-association文件上传到项目服务器规定路径中，参考文档

iOS微信分享配置universal links步骤解析_IOS_脚本之家

uniapp ios平台通用链接 Universal Link 设置_ios_孤山剑客扫秋风-华为云开发者联盟

步骤2：获取微信小程序原始id

微信公众平台（微信公众平台）-设置-基本设置-原始ID

步骤3: 代码实现

  plus.share.getServices((res) => {
    let sweixin = null;
    for (let i in res) {
      if (res[i].id == "weixin") {
        sweixin = res[i];
      }
    }
    //唤醒微信小程序
    if (sweixin) {
      sweixin.launchMiniProgram({
        id: "xxxxx", //微信公众平台 --- 绑定的微信小程序的 --- 原始iD
        type: 1, // app跳微信小程序版本  0-正式版； 1-测试版； 2-体验版
        path: "pages/xxxxxxx", // 小程序路径
      });
    } 
  });

参考文档：HTML5+ API Reference

app跳转支付宝小程序

适用于外部APP、H5页面等手机端页面访问直接跳转小程序。

1. 直接scheme唤起小程序：scheme格式：alipays://platformapi/startapp?appId=[appId]&page=[page]&query=[query]，详见 小程序scheme链接介绍 。
2. http链接唤起小程序：加上 https://ds.alipay.com/?scheme= 前缀，后面拼接 alipays://platformapi/startapp?appId=xxx&page=x/y/z&query=xx%3dxx，详见小程序scheme转换https链接。

代码实现

const alipay_mini_appid = "xxxx"; // 支付宝小程序appid

// 小程序路径+参数
const path = `pages/order/index?${encodeURIComponent(`orderNo=123&from=app`)}`;

plus.runtime.openURL(
    `alipays://platformapi/startapp?appId=${alipay_mini_appid}&page=${path}`
);

注意点

如果支付宝小程序未上线，不支持跳转测试和体验版。已经上线过一版本的，可以打开测试或体验版，右上角三点打开，开启扫码联调版本，下一次扫码或schema跳转会跳到当前这个版本

小程序跳app

微信小程序

限制：

不能主动跳转app，需要app先跳转小程序和用户点击button，这两个前提下才能返回app。

button组件文档参考：button | 微信开放文档

代码实现

<button open-type="launchApp" app-parameter="参数">
        返回APP
</button>

注意点

open-type="launchApp"为必要属性，app-parameter参数只支持string类型，app在app.vue的onShow中接收返回的参数

支付宝小程序

不支持跳转App、H5页面

https://opensupport.alipay.com/support/FAQ/7063d116-7b1b-4b86-b559-e90e36086fa8

跳转小程序支付的vue组件

该组件可以在app中选择支付方式，并跳转小程序支付的场景中使用

安装uni-ui扩展组件

uni-app官网

代码实现

App-pay-select.vue

<template>
  <uni-popup ref="payType" type="share" safeArea backgroundColor="#fff">
    <uni-popup-share
      title="请选择支付方式"
      @select="payTypeSel"
    ></uni-popup-share>
  </uni-popup>
</template>

<script>
export default {
  props: {
    appPayParams: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    open() {
      this.$refs.payType.open();
    },
    payTypeSel({ index }) {
      const { orderNo } = this.appPayParams;
      if (index === 0) {
        // 微信
        const path = `/pages/detailsHt/index?orderNo=${orderNo}&from=app`;

        this.$utils.appJumpToWxMini(path);
      } else if (index === 1) {
        // 支付宝
        const path = `pages/detailsHt/index?${encodeURIComponent(
          `orderNo=${orderNo}&from=app`
        )}`;

        this.$utils.appJumpToAlipayMini(path);
      }
    },
  },
};
</script>

utils/index.js

import { wx_mini_origin_id, alipay_mini_appid, wx_mini_env } from "@/constant";

/** app跳微信小程序 */
export const appJumpToWxMini = (path) => {
  plus.share.getServices((res) => {
    let sweixin = null;
    for (let i in res) {
      if (res[i].id == "weixin") {
        sweixin = res[i];
      }
    }
    //唤醒微信小程序
    if (sweixin) {
      sweixin.launchMiniProgram({
        id: wx_mini_origin_id, //微信公众平台 --- 绑定的微信小程序的 --- 原始id
        type: wx_mini_env,
        path,
      });
    } else {
    }
  });
};

/**
 * app跳支付宝小程序
 */
export const appJumpToAlipayMini = (path) => {
  console.log(
    "alipayjump: " +
      `alipays://platformapi/startapp?appId=${alipay_mini_appid}&page=${path}`
  );
  plus.runtime.openURL(
    `alipays://platformapi/startapp?appId=${alipay_mini_appid}&page=${path}`
  );
};