基础API跳转

web-view

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

 <web-viewsrc="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权限，很难

扩展: 小程序scheme链接介绍

支付宝小程序跳转第三方H5页面相关推荐

小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...
微信小程序跳转第三方H5的方法
使用web-view标签进行跳转首先建立一个新的页面,这个页面就是为了第三方H5页面准备的. 在index.wxml中,写以下代码 <web-view src="{{h5url}}& ...
uniapp微信支付宝小程序跳转视频号财富号直播间
项目背景:uniapp开发多端小程序,分别为微信和支付宝,要求在微信环境进入视频号直播间,在支付宝环境跳转到财富号直播间. 视频号直播 | 微信开放文档 (qq.com) // 注意需要在真机调试查看 ...
支付宝小程序财富号基金相关页面之间相关跳转
支付宝小程序跳转 %小程序跳转财富号 this.$global.urlHandler(`alipays://platformapi/startapp?appId=xxxx000020191017684 ...
在h5页面中调起支付宝小程序中的某一个页面以及URLScheme 之支付宝
在h5页面中调起支付宝小程序中的某一个页面直接上代码: window.location.href = 'alipays://platformapi/startapp?appId=2021001181 ...
微信小程序跳转第三方网页、第三方小程序。
微信小程序跳转第三方网页.第三方小程序. 微信小程序跳转第三方网页跳转第三方网页的问题微信小程序跳转第三方小程序微信小程序跳转第三方网页最近需要做一个小程序跳转携程的功能,首先考虑到的是跳转到 ...
关于微信小程序跳转到H5，然后从H5又跳回微信小程序问题的资料
关于微信小程序跳转到H5,然后从H5又跳回微信小程序问题的资料直接上答案 // javascript import wx from 'weixin-jsapi';// 判断h5页面是否是运行在小程序 ...
微信小程序跳转到H5网页
小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态.小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现 ...
微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...

支付宝小程序跳转第三方H5页面