支付宝跳转

基础API跳转
web-view
支付宝小程序想要跳转H5页面,之前只用过 web-view,内嵌H5,这种方式需要配置域名白名单,并且在外链域名的根目录放置校验文件,H5不是自有页面的话,就不能这样去实现。

<web-view
    src="https://render.alipay.com/p/s/web-view/index"
    onMessage="onmessage">
 </web-view>

my.ap.openURL
相对于 web-view,还有一种跳转H5的方式, my.ap.openURL,不需要配置域名,但是非支付宝官网页面只有部分符合开放类目的小程序可以使用,且需要到开放平台配置 openURL 白名单。已知目标页面的 URL 或 scheme,可以使用 my.ap.openURL。
跳转到支付宝官方 H5 页面是不需要配置白名单的。

https://render.alipay.com/p/ 开头的 URL。
https://ds.alipay.com/?scheme= 开头的 URL。
my.ap.openURL({
  // 请将 url 替换为后台加白过的跳转地址
  url: 'https://please.replace.me/page',
  success: (res) => console.log('openURL success'),
  fail: (err) => my.alert({ title: 'openURL fail: ' + JSON.stringify(err) })
});

web-view 和 my.ap.openURL 两者比较
两者都有不同的权限要求,下面是从文档拷过来的优劣对比表格,可以对照着选用合适的方式。

跳转方式 优势 劣势
内嵌H5页面,使用 web-view 内嵌H5 流量归属于小程序本身。不限行业,无需审批。可以在H5页面上调用部分小程序的接口能力。 需要完成 H5域名配置
外跳H5页面,使用 my.ap.openURL 外跳H5 无需H5域名配置。可以免审跳转支付宝官方H5运营页面。 流量不再归属于小程序本身。跳转到非支付宝官方页面只针对部分行业开放,并且需要完成平台侧审批流程(官方H5运营页面无此限制)。
my.ap.navigateToAlipayPage
my.ap.navigateToAlipayPage 是用于跳转到支付宝官方业务或运营活动页面的 API。这里利用不需要配置白名单的域名和scheme语法可以实现跳转。

// 支付宝客户端的标准scheme为:alipays://platformapi/startapp?appId=H5App自身的appId
// 但如果是某些运营页之类的单独页面,没有自己的appId,
// 可以使用Nebula容器的通用浏览器模式appId=20000067 来启动,
// 同时将需要打开的H5页面url经过encode编码后设置到url参数内
const url = 'https://www.baidu.com';
// https://render.alipay.com/p/ 不需要配置白名单
// 开了个后门,在不需要配置白名单的链接后面拼上自己的链接
const link = 'https://render.alipay.com/p/s/i/?scheme=' + encodeURIComponent('alipays://platformapi/startapp?appId=20000067&url=' + encodeURIComponent(url));
my.ap.navigateToAlipayPage({
  path: link
});

JSAPI跳转
JSAPI 是支付宝钱包提供的丰富的原生API功能,开发者可以使用它们方便调用支付宝提供的各种能力,达到媲美原生应用的体验,如页面跳转,支付功能等。
其中有一个跳转页面的API,pushWindow,用来打开一个新的页面,系统自带转场动画。

注意点
scheme 跳转请尽量使用 location.href 而不是 pushWindow。用 schema 的方式打开页面已经禁止使用,仅用于向下兼容老业务。
与 location.href 的区别,pushWindow 类同于 PC 浏览器的新开标签页,每个 window 都是一个新的标签页,因此原页面仅仅是被压到后台,状态始终保持,JS 也会继续运行。location.href 则是在当前标签页直接跳转。
JSAPI是给H5使用的,而不是支付宝小程序。
现有的功能代码这样使用,应该是因为白名单限制,基础API中的前两种方式都不适合,才被迫使用JSAPI和禁止使用的scheme的。navigateToAlipayPage 是最近新发的文章里才看到可以支持支付宝小程序跳转H5连接(无需添加白名单) 。但是 navigateToAlipayPage 也已经不维护,而是用 openURL 替代。

my.call('pushWindow', {
  url: `alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(
   'https://xxxx')}`
});

在小程序直接使用https链接会导致页面访问受限,无法打开,用scheme的方式可以跳过限制。但是不应该这么做,只是单纯的记录一下有这种操作。

startApp
需要申请startApp权限,可以跳转任意URL

my.call('startApp', {
  appId: '20000067',
  param: {
    url: 'https://xxx'
  }
});

总结
综上,跳转方式需具体情况具体分析,选择能力范围内最适合的方式,尽量不要选择禁用和停止维护的方法。这里不讨论支付宝官方页面,对自己人并没有太多限制。

跳转方式 适用范围
web-view 方便在H5根目录下放置校验文件
my.ap.openURL 在限制类目范围内
my.ap.navigateToAlipayPage 无限制,但是此API已停止维护
pushWindow 无限制,但是pushWindow 禁止使用scheme的方式打开页面
startApp 可以申请到支付宝的startApp权限,很难

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

初始React

一.React的诞生1.什么是React?React是一个讲数据渲染为HTML视图的来源Js库&#xff0c;用于构建用户界面的JS库。在以前的学习中构建用户界面的常用操作步骤&#xff1a;发送请求获取数据处理数据&#xff08;过滤&#xff0c;整理格式等&#xff09;操作DOM呈现页面2.React诞…

《SpringBoot》第02章 自动配置机制(一) 项目启动

前言 关于SpringBoot&#xff0c;最大的特点就是开箱即用&#xff0c;通过自动配置机制&#xff0c;遵守约定大于配置这个准则&#xff0c;那么这个是如何实现的呢&#xff1f; 本章首先会介绍SpringBoot的启动执行 一、启动第一步&#xff1a;初始化 1.本章概述 当启动Sp…

【论文精读(李沐老师)】Attention Is All You Need

Abstract 在主流的序列转录&#xff08;给你一个序列&#xff0c;生成另外一个序列&#xff09;模型中主要是依赖复杂的RNN和CNN&#xff0c;一般包括encoder和decoder两个结构。在性能最好的模型里&#xff0c;通常使用注意力机制连接encoder和decoder。 &#xff08;本文想做…

HTTP API接口设计规范

1. 所有请求使用POST方法 使用post&#xff0c;相对于get的query string&#xff0c;可以支持复杂类型的请求参数。例如日常项目中碰到get请求参数为数组类型的情况。 便于对请求和响应统一做签名、加密、日志等处理 2. URL规则 URL中只能含有英文&#xff0c;使用英文单词或…

爱玩飞飞加速实现与分析

一步一步找数据。然后根据游戏数据找游戏基址&#xff0c;游戏基址可以遍历所有数据。想学的可以看看。第一步找基础数据&#xff0c;我们用的ce7.1.当然你们也可以用其他版本。网上随便下一个就行。 第一步。打开ce7.1附加游戏进程。 然后看下自己的血量是多少。我们这里是5…

HTML5支持的视频文件格式和音频文件格式有哪些?

在 HTML5 标准中, 我们有了新的 和 标签, 分别可以引入视频和音频文件的标签 那么这些标签又可以支持哪些文件格式呢 ? 格式支持 视频文件格式 MP4&#xff1a;MPEG-4 Part 14&#xff0c;支持H.264编码。几乎所有的浏览器都支持该格式。 WebM&#xff1a;谷歌开发的格式&a…

【最短路算法】第三弹:一文学懂spfa 算法(队列优化的Bellman-Ford算法)

博主简介&#xff1a;努力学习的大一在校计算机专业学生&#xff0c;热爱学习和创作。目前在学习和分享&#xff1a;算法、数据结构、Java等相关知识。博主主页&#xff1a; 是瑶瑶子啦所属专栏: 算法 &#xff1b;该专栏专注于蓝桥杯和ACM等算法竞赛&#x1f525;近期目标&…

Java Script

一.初识js 1.与css html的关系 HTML 网页的结构(骨CSS:网页的表现(皮JavaScript :网页的行为2.运行过程 编写的代码是保存在文件上,也就是存储到硬盘(外存zhong)双击以后,html文件浏览器(引用程序)就会读取文件,将文件内容加载到内存中,(数据流向:硬盘->内存)浏览器会解析用…

Linux——基本指令

目录 01. ls 指令 02. pwd命令 03. cd 指令 04. touch指令 05.mkdir指令&#xff08;重要&#xff09; 06.rmdir指令 && rm 指令&#xff08;重要&#xff09; 07.man指令&#xff08;重要&#xff09; 08.cp指令&#xff08;重要&#xff09; 09.mv指令&…

react使用craco.config.js完成rem移动端适配(sass)

环境&#xff1a; "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.2", "sass": "^1.58.3", yarn add craco/craco postcss-pxtorem lib-flexible 1、创建 craco.…

Java入门知识(超详细讲解)

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;老茶icon &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开兴好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;计…

REDIS19_zipList压缩列表详解、快递列表 - QuickList、跳表 - SkipList

文章目录①. 压缩列表 - zipList②. 快递列表 - QuickList③. 跳表 - SkipList①. 压缩列表 - zipList ①. ZipList是一种特殊的"双端链表",由一系列特殊编码的连续内存块组成。可以在任意一端进行压入/弹出操作,并且该操作的时间复杂度为O(1) (oxff:11111111) type…

BI界的ChatGPT,它有什么厉害之处

​ChatGPT火了&#xff0c;注册用户从0到1亿&#xff0c;仅用了2个月时间。ChatGPT的背后是大数据、大模型、大算力&#xff0c;是AI的能力集中化的典型场景。那么在BI界&#xff0c;是否也有一款像ChatGPT一样智能BI软件&#xff0c;只要告诉它我们想看啥数据&#xff0c;它噔…

使用 Jpom 自动构建和部署项目

比 Jenkins 简单的项目构建和部署工具。 前端项目自动构建部署 我有几个自用的前端项目&#xff0c;每次修改代码后都需要本地打包再上传到服务器进行部署&#xff0c;感觉有点麻烦&#xff0c;不够自动化&#xff0c;所以一直想找个能够实现自动构建和部署的工具。 这时候可…

智能灯泡灯一Homekit智能家居

传统的灯泡是通过手动打开和关闭开关来工作。有时&#xff0c;它们可以通过声控、触控、红外等方式进行控制&#xff0c;或者带有调光开关&#xff0c;让用户调暗或调亮灯光。 智能灯泡内置有芯片和通信模块&#xff0c;可与手机、家庭智能助手、或其他智能硬件进行通信&#…

Camtasia Studio2023非常好用的电脑录屏软件

如果你需要制作视频教程、游戏直播或其他视频内容&#xff0c;那么一个好的录屏软件就是必不可少的。Camtasia Studio是非常好用的录屏软件&#xff0c;它们可以记录计算机屏幕上发生的所有活动&#xff0c;并可捕捉声音。这些软件还提供了一些视频编辑功能&#xff0c;如裁剪、…

【Python学习笔记(七)】queue队列模块的使用

queue队列模块的使用 前言 为了解决多线程之间共享数据的问题&#xff0c;需要对线程进行加锁或者是线程等待&#xff1b; 更简单的解决这一问题&#xff0c;就需要引入队列的概念&#xff1a; 队列是一种特殊的线性表&#xff0c;是一种先进先出 (FIFO) 的数据结构&#xff…

代码随想录第二十七天(669、108、538、回溯算法介绍)

669. 修剪二叉搜索树 不能简单地通过递归实现代码&#xff0c;比如&#xff1a; class Solution { public:TreeNode* trimBST(TreeNode* root, int low, int high) {if (root nullptr || root->val < low || root->val > high) return nullptr;root->left t…

Altium Designer 2023版本安装过程

1、解压下载好的文件。 2、双击打开Setup文件夹。 3、找到installer文件&#xff0c;右键点击&#xff0c;并且以管理员身份运行。 4、点解next。 5、选择语言位&#xff1a;Chinese&#xff0c;点击我同意&#xff0c;接着next。 6、勾选前面两个&#xff0c;点击next。 7、选…

View绘制流程分析

View绘制流程分析 目录介绍 01.addView的流程分析 1.1 wm.addView()流程 02.requestLayout绘制 2.1 源码流程分析2.2 View绘制流程简析 03.performMeasure测量 3.1 performMeasure源码3.2 measure设计思路3.3 measure测量流程 04.performLayout布局 4.1 performLayout源码4.2…