前言:在小程序的开发初期,很多开发者希望小程序能打开h5,所以webview组件应运而生。
后来,开发者想跳出小程序打开h5页面,所以支付宝提供了my.ap.navigateToAlipayPage,用于打开支付宝运营的页面,存在部分限制。
在大家的强烈要求下,支付宝小程序新开放my.ap.openURL方法,用于打开任意h5页面,在初期只开放给部分类目(政府、线下公共事业),而今天更新了,除(金融、工具)类目都可使用该API打开外部h5,接下来就给大家简单介绍下如何使用。
简介:
my.ap.openURL是用于打开 URL 的 API。URL 为第三方 H5 页面或者支付宝官方给出的链接(以 https:// 或者 alipays:// 开头),且必须在小程序后台配置的白名单内。目前除(金融、工具)类目外所有企业小程序(个人不支持)都可使用。打开小程序控制台找到开发设置 > openURL配置,添加一条新的配置如下图:
https://render.alipay.com为默认配置可打开的域名,所以这里不用配置,下图只是做个申请演示。
点击添加后 填写打开的h5域名进行审核,添加地址处只需要添加域名即可,参数无需填写,通过后可打开该域名下的所有h5链接,其他信息据实填写即可。
提交审核后等待1-10分钟左右会收到审核结果,当申请状态为通过后,可在小程序里代码里进行尝试了:
链接的转换地址如下:https://apitools.alipay.com/tools/open-url,但是转换后的链接依然存在部分问题,可在文章结尾查看问题。
handleClick() { my.ap.openURL({ url: 'https://render.alipay.com/p/h5/life_public/www/index.html?publicId=2021001165600178&msgId=2021001165600178ed1b3dc9-d444-4841-af90-891775ad462b' }) },
尝试后发现个小问题:生活号的文章地址依然需要转换类型,转换工具及该API都不会做处理:
参考之前的文章进行转换(https://open.alipay.com/portal/forum/post/90501018)
JavaScript
复制代码
1
let path = `https://render.alipay.com/p/s/i/?appId=20000909&url=${encodeURIComponent('/www/msg.html?publicId=2015111300783988&msgId=2015111300783988059d1e5c-ff08-4e40-b5ca-73f2ba2f1d05')}`
算是一个支付宝端的小缺陷吧,当然其他大部分链接是正常的,大家可以体验起来了~
有个小小的建议,支付宝小程序内打开的所有外部h5,能否做成半屏拉起这个h5,官方出一个支付宝App的小程序,这个小程序只做半屏的展开,同时加载h5地址。