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

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

前言

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

开发过小程序的童鞋都知道,打开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
 })

看下效果图:


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

目录
相关文章
|
3月前
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
|
2月前
|
小程序 开发工具
app跳转微信小程序,使用明文scheme拉起
app跳转微信小程序,使用明文scheme拉起
464 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的“口腔助手”小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的“口腔助手”小程序附带文章源码部署视频讲解等
43 3
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学生毕业管理小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学生毕业管理小程序附带文章源码部署视频讲解等
37 1
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小演员招募小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小演员招募小程序附带文章源码部署视频讲解等
34 1
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的二手书籍拍卖小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的二手书籍拍卖小程序附带文章源码部署视频讲解等
45 1
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的时间管理小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的时间管理小程序附带文章源码部署视频讲解等
47 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的传统戏曲推广微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的传统戏曲推广微信小程序附带文章源码部署视频讲解等
42 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的仓库点单小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的仓库点单小程序附带文章源码部署视频讲解等
52 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的“鼻护灵”微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的“鼻护灵”微信小程序附带文章源码部署视频讲解等
61 0

热门文章

最新文章

下一篇
无影云桌面