uniapp app与mini program相互跳转

news2024/11/8 12:18:00

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}`
);

注意点

实践后发现,如果小程序未上线,不支持跳转测试和体验版。可能需要先上线一版(待验证)

小程序跳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}`
  );
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1794319.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

5-Django项目--分页与搜索(资产页面)

目录 views/asset_data.py asset_data/asset_data.html 搜索与分页笔记: 搜索 整数搜索 字符串搜索 分页 views/asset_data.py # -*- coding:utf-8 -*- from django.shortcuts import render, redirect, HttpResponse from django.utils.safestring import mark_safe f…

如何使自己写的代码易读易懂?

〓● 如果代码可读性不佳、不容易理解&#xff0c;可能造成如下问题&#xff1a; 〓❏ 其他工程师浪费时间解读它&#xff1b; 〓❏ 误解导致引入缺陷&#xff1b; 〓❏ 其他工程师修改时破坏代码。 〓● 提高代码可读性&#xff0c;有时候可能使其变得更为冗长、占用更多的…

nesting in wrf

Choices for Nesting are:0 no nesting (only available for serial and smpar) 0. no nesting (only available for serial and smpar)1. basic2. preset moves preset moves3. vortex following • default is option 0 for serial/smpar, 1 for dmpar • smpar Shared Mem…

应对800G以太网挑战:数据中心迁移

在过去几年中&#xff0c;云基础设施和服务的大规模使用推动了对更多带宽、更快速度和更低延迟性能的需求。交换机和服务器技术的改进要求布线和架构随之调整。因此&#xff0c;800G以太网对数据中心迁移的需求&#xff0c;特别是对速率&#xff08;包括带宽、光纤密度和通道速…

YOLOv10(1):初探,训练自己的数据

目录 1. 写在前面 2. 值得关注的点 3. 训练自己的数据集 4. 阅读代码的小建议 1. 写在前面 很多人YOLOv9还没有完全研究透&#xff0c;YOLOv10出来了。 惊不惊喜&#xff0c;意不意外&#xff01; 据论文里提到&#xff0c;YOLOv10就是为了加速推理&#xff0c;在保证精度的…

C# NX二次开发-设置背景颜色

使用UF函数能直接设置UG背景颜色: 1.设置背景颜色选项为纯色: 2.编写更新背景颜色代码: var nxColor NXColor.Factory._Get(186);var rgb nxColor.GetRgb();double[] arr [rgb.R, rgb.G, rgb.B];theUf.Disp.SetColor(UFConstants.UF_DISP_BACKGROUND_COLOR, UFConstants.UF…

Java中连接Mongodb进行操作

文章目录 1.引入Java驱动依赖2.快速开始2.1 先在monsh连接建立collection2.2 java中快速开始2.3 Insert a Document2.4 Update a Document2.5 Find a Document2.6 Delete a Document 1.引入Java驱动依赖 注意&#xff1a;启动服务的时候需要加ip绑定 需要引入依赖 <dependen…

Qt无边框

最简单的可拖动对话框(大小不可改变) #ifndef DIALOG_H #define DIALOG_H/*** file dialog.h* author lpl* brief 无边框dialog类* date 2024/06/05*/ #include <QDialog> #include <QMouseEvent> namespace Ui { class Dialog; } /*** brief The Dialog class* 无…

Shopee本土店成本利润如何核算?EasyBoss ERP帮您精准掌控

这几年做跨境电商的老板们都在说东南亚市场广阔&#xff0c;在东南亚开本土店流量大&#xff0c;为了赚钱兴冲冲跑去东南亚开本土店&#xff0c;每天看着店铺不停出单。 心里乐呵呵&#xff1a;“本土店是真赚钱&#xff0c;马上要走上人生巅峰了&#xff01;” 但每月实际一对…

PbootCms微信小程序官网模版/企业官网/社交电商官网/网络工作室/软件公司官网

在数字化时代&#xff0c;企业网站已成为吸引潜在客户、提升企业形象、和扩大品牌影响力的必备工具。因此&#xff0c;一个优秀的企业网站模板显得尤为重要。 企业官网的内容框架通常都包含企业形象、产品或服务类型、信息展示等部分&#xff0c;设计师需要借助和企业形象契合…

图片改大小的3个步骤,快速在线处理图片的方法

图片改大小是现在使用图片时经常要使用的一个功能&#xff0c;因为在很多的网上平台都会有对图片尺寸和图片大小的要求&#xff0c;只有符合平台要求的图片才可以正常上传使用。想要快速调整图片大小&#xff0c;可以在网上使用在线改图工具来处理&#xff0c;只需要简单的几步…

快速上手 ngrok:将你的本地服务一键暴露到互联网,开发者必备技能!

想让外界轻松访问你本地电脑上的项目&#xff1f;试试 ngrok 吧&#xff01;无论是调试 Web 应用&#xff0c;还是进行跨网络测试&#xff0c;ngrok 都能帮你一键创建安全隧道&#xff0c;将本地服务映射到公共 URL&#xff0c;让全球任何地方都能访问。本文详细介绍 ngrok 的安…

2.1.3 采用接口方式使用MyBatis

实战概述&#xff1a;使用MyBatis的接口方式进行数据库操作 环境准备 确保项目中已经集成了MyBatis框架。 创建用户映射器接口 在net.huawei.mybatis.mapper包中创建UserMapper接口。定义方法findById(int id)用于按编号查询用户。定义方法findAll()用于查询全部用户。定义方法…

Python 识别图片形式pdf的尝试(未解决)

想识别出pdf页面右下角某处的编号。pdf是图片形式页面。查了下方法&#xff0c;有源码是先将页面提取成jpg&#xff0c;再用pytesseract提取图片文件中的内容。 直接用图片来识别。纯数字的图片&#xff0c;如条形码&#xff0c;可识别。带中文的不可以&#xff0c;很乱。 识别…

jupyter之plt 画图弹出窗口展示图片以及静态图片切换方法

1. jupyter出图的三种方式 在python的Jupyter Notebook中&#xff0c;使用matplotlib绘制动态图形时&#xff0c;可能出现只显示一张静态图像。 这是因为在notebook中使用plt绘图共有三种模式&#xff1a; %matplotlib inline&#xff1a;这是默认的模式&#xff0c;输出的图片…

vscode ctrl+鼠标左键无法跳转

打开设置&#xff0c;搜索intel…… 将这个智能感知改成default就可以了&#xff0c;我之前是在disable处。 分析了一下&#xff0c;其实跳转功能主要是根据上下文语法分析来实现的&#xff0c;并不是简单得全文匹配&#xff0c;因此需要相关得语法分析工具。 那么为什么默认式…

异步时序逻辑电路分析

270页异步时序逻辑电路例题分析 阎石数电-第六章时序逻辑电路-6.2.3异步时序逻辑电路分析方法-例题6.2.4

操作系统入门系列-MIT6.828(操作系统工程)学习笔记(三)---- xv6初探与实验一(Lab: Xv6 and Unix utilities)

系列文章目录 操作系统入门系列-MIT6.S081&#xff08;操作系统&#xff09;学习笔记&#xff08;一&#xff09;---- 操作系统介绍与接口示例 操作系统入门系列-MIT6.828&#xff08;操作系统工程&#xff09;学习笔记&#xff08;二&#xff09;----课程实验环境搭建&#x…

【文末附gpt升级秘笈】埃隆·马斯克芯片调配策略对特斯拉股价的影响分析

埃隆马斯克芯片调配策略对特斯拉股价的影响分析 一、引言 在现代商业环境中&#xff0c;企业间的资源调配与策略布局往往对其股价产生深远影响。据外媒CNBC报道&#xff0c;埃隆马斯克在芯片资源分配上的决策引起了业界的广泛关注。他秘密要求英伟达将原本预留给特斯拉的高端…

苹果Vision Pro 界面中英翻译

目录 菜单 &#x1f537;General&#x1f504;一般 AirDrop 隔空投送 Background App Refresh 后台应用刷新 Keyboards 键盘 VPN & Device Management VPN与设备管理​编辑Legal & Regulatory 法律法规 &#x1f537;Apps&#x1f504;应用程序 &#x1f537;Pe…