【每周一个小技巧】支付宝小程序内如何跳转生活号文章

简介: 【每周一个小技巧】支付宝小程序内如何跳转生活号文章

前言

支付宝小程序内如何打开生活号文章?

开发过小程序的童鞋都知道,打开h5需要使用webview组件,同时需要配置h5域名,而官方的h5域名我们是无法配置在我们小程序后台的,那么我们如何打开生活号文章呢?

翻阅文档我们可以看到:官方提供了my.ap.navigateToAlipayPage方法用于跳转官方h5页面。但是文档也说了,只能跳转指定的某些页面。然后大部分需要申请添加白名单。


既然官方文档有说可以跳转官方的运营页面,查看到生活号文章地址是render.alipay.com开头说明也是运营页面,那么我们开始测试:


假如文章地址为: https://render.alipay.com/p/h5/life_public/www/index.html?publicId=2015111300783988&msgId=2015111300783988059d1e5c-ff08-4e40-b5ca-73f2ba2f1d05


通过该链接我们可以拿到以下信息(个人猜测):

index.html为指定消息类型,而这个index页面是个通用中转页。(相同的还有msg,即指定msg可以忽略中转,下面会详细说到)

publicId为生活号ID

msgId:为文章地址id


尝试1

let path = `https://render.alipay.com/p/h5/life_public/www/index.html?publicId=2015111300783988&msgId=2015111300783988059d1e5c-ff08-4e40-b5ca-73f2ba2f1d05`
my.ap.navigateToAlipayPage({
  path
})

表现为:跳转成功后会再次跳转一次

尝试2,使用20000909这个appId将index.html改为msg.html 同时将参数2次encode

let path = `https://render.alipay.com/p/s/i/?appId=20000909&url=${encodeURIComponent(encodeURIComponent('/www/msg.html?publicId=2015111300783988&msgId=2015111300783988059d1e5c-ff08-4e40-b5ca-73f2ba2f1d05'))}`
my.ap.navigateToAlipayPage({
  path
})

表现为:跳转后有个中转页(比上一个效果好很多,建议使用这种方案)

尝试3,使用my.call('pushWindow'),该方案因是历史遗留问题,不建议使用my.call的方式(不保证将来的某天官方下掉了该API)。

在日常使用支付宝小程序中发现,支付宝存在my.call方法,里面第一个字段为方法名,比如my.call('toast'), 表现同my.showToast。

使用20000909这个appId,同时将index.html改为msg.html(即指定跳转类型) 同时将参数1次encode,表现为直接跳转无中间页面。

let url = `alipays://platformapi/startapp?appId=20000909&url=${encodeURIComponent('/www/msg.html?publicId=2015111300783988&msgId=2015111300783988059d1e5c-ff08-4e40-b5ca-73f2ba2f1d05')}`
 my.call("pushWindow", {
   url
 })

看下效果图:


以上就是小程序跳转生活号文章的三种方式,小小的一个跳转却有这么多差异,希望以上内容能帮到大家。有问题欢迎评论区留言或钉钉私信。

目录
相关文章
|
2天前
|
小程序 Devops 开发工具
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
支付宝小程序入门学习之一:如何创建支付宝小程序并在手机上预览
33 0
|
2天前
|
移动开发 小程序 安全
使用阿里云短信+微信短链接跳转微信小程序
此内容是关于使用阿里云短信带传递参数的微信短链接跳转到微信小程序。首先,需要准备微信开发者工具和一个已认证的小程序。接着,开通云开发并配置云开发权限。然后,配置H5静态网页,包括设置云开发权限和处理不同设备的跳转方式。最后,上传云函数并修改其权限,获取微信短信链接,配置短链接参数,并开通阿里云短信服务以进行测试验证。整个过程涉及到了微信开发者工具、云开发、H5页面配置、云函数的创建和部署以及阿里云短信服务的开通和使用等步骤。
49 0
|
2天前
|
小程序 API 开发者
可以在钉钉小程序中直接跳转到审批单提交页面
【2月更文挑战第19天】可以在钉钉小程序中直接跳转到审批单提交页面
49 5
|
2天前
|
小程序 JavaScript 前端开发
【原力计划小程序】1、一篇文章深入了解小程序的学习路线(以项目驱动的方式带你学习微信小程序)
【原力计划小程序】1、一篇文章深入了解小程序的学习路线(以项目驱动的方式带你学习微信小程序)
65 1
|
2天前
|
小程序 API
小程序中用于跳转页面的5个api是什么?区别?
小程序中用于跳转页面的5个api是什么?区别?
|
2天前
|
缓存 小程序 IDE
【每周一个小技巧】支付宝小程序自定义tabbar效果
【每周一个小技巧】支付宝小程序自定义tabbar效果
59 0
|
2天前
|
小程序 JavaScript 前端开发
【经验分享】如何实现在支付宝小程序内的图片裁剪功能
【经验分享】如何实现在支付宝小程序内的图片裁剪功能
63 1
|
2天前
|
小程序
【经验分享】如何生成支付宝小程序scheme链接
【经验分享】如何生成支付宝小程序scheme链接
581 1
|
2天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
2天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。

热门文章

最新文章