官方实例:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object

官方实例代码如下:

Page({
onShareAppMessage() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve({
title: '自定义转发标题'
})
}, 2000)
})
return {
title: '自定义转发标题',
path: '/page/user?id=123',
promise
}
}
})

直接把该段代码复制到你的项目测试,可以打开分享的转发。

但是大家现实中实际的需求肯定是想获取后缀的参数值,官方说在页面onload中可以获取到,但是如果我们在以上页面代码的基础上添加onload后通过转发的卡片打卡小程序发现根本获取不到参数值。

在官方实例代码基础上添加onload:

  onLoad(query) {
console.log("链接参数", query);
wx.showToast({
title: JSON.stringify(query)
});
}

官方说如果自定义promise,则分享信息以promise结果为准。

通过修改实例中的title值测试发现分享后title确实变化了。

Page({
onShareAppMessage() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve({
title: '自定义转发标题promise'
})
}, 500)
})
return {
title: '自定义转发标题',
path: '/page/user?id=123',
promise
}
}
})

然而我们并没有拿到path的参数值,问题出在哪里呢?

当我把promise删掉了,发现可以通过打开分享出去的卡片拿到参数了,所以问题出在这个promise上。

由此推断:promise覆盖了默认定义的return的值,当promise里没有设定某个值的时候,会使用系统默认的值而不会使用自定义的值。比如上面我们在promise中定义了title值,但是没有定义path值,此时即使return中定义了path,但promise中的path=null会覆盖掉return中的path,所以启用了微信小程序默认的path=当前页面。

这就可以解释为什么有的提问说明明自己定义了path值等于某个页面,但通过卡片打开的依然是当前页面,应该是设置了promise而里面没有path路径。

所以如果要通过接口获取后端的参数,那么应该给promise配置完整的path参数,如果需要动态的背景图那也要在promise中设置imageUrl。

Page({
onShareAppMessage() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve({
title: '自定义转发标题promise',
path: '/pages/test/test?id=1111&uname=test001'
})
}, 500)
})
return {
title: '自定义转发标题',
path: '/pages/test2/test2?id=123',
imageUrl: '/imgs/tx.png', // 此处不会生效,会使用当前页的截图
promise
}
}
})

需要注意:官方文档里提到了,假如promise超过3秒没有返回结果,那么就会使用自定义的return值,可以通过设置setTime=3500来测试。

Page({
onShareAppMessage() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve({
title: '自定义转发标题promise',
path: '/pages/test/test?id=1111&uname=test001'
})
}, 3500)
})
return {
title: '自定义转发标题',
path: '/pages/test2/test2?id=123',
imageUrl: '/imgs/tx.png',
promise
}
}
})

上面即使设置了promise,但因为返回时长为3.5秒,所以不生效,会跳转到自定义的test2页面,背景图为自定义的tx.png。

以上两种都可以通过path传递参数了。

ps:官方实例代码里配置的path路径是page/user,该方式已经过时,现在的配置方式是/pages/user/user。

微信小程序转发onShareAppMessage设置path参数后在onload获取不到值的原因和解决方法的更多相关文章

  1. 微信小程序转发微信小程序转发

    微信小程序转发涉及以下4个方法: 1.Page.onShareAppMessage({}) 设置右上角“转发”配置,及转发后回调函数返回 shareTicket 票据 2.wx.showSahreMe ...

  2. 微信小程序转发功能

    微信小程序转发涉及以下4个方法: 1.Page.onShareAppMessage({}) 设置右上角“转发”配置,及转发后回调函数返回 shareTicket 票据 2.wx.showSahreMe ...

  3. 微信小程序转发商品的详情页 + 转发功能(传参)

    1.微信小程序转发传参,利用的还是onShareAppMessageapi 2.利用的还有json转换 JSON 是用于存储和传输数据的格式. JSON 通常用于服务端向网页传递数据 函数 描述JSO ...

  4. 微信小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...

  5. 微信小程序-实现分享(带参数)

    微信小程序分享功能的实现方法有两种: 第一种 在page.js中实现onShareAppMessage,便可在小程序右上角选择分享该页面 onShareAppMessage: function () ...

  6. 微信小程序分享功能的path路径

    表示被微信小程序坑惨了 糟心的开始写,老板说先不上太复杂,就先显示了两个页面,然后开开心心的发布,测试了几遍,没啥问题呀.结果,一上上去,就被老板批了! 啥呀! 这分享怎么这个鬼样子!明明我看文档都是 ...

  7. 微信小程序的网络设置,及网络请求:wx.request(OBJECT)

    Md2All 一个Markdown在线转换工具 网址:http://md.aclickall.com 微信公众号:颜家大少本文所用排版工具:http://md.aclickall.com 支持通用的M ...

  8. 微信小程序 text属性设置 WXSS样式

    >微信小程序的布局css样式 参考自  珺L 文字 width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           ...

  9. 微信小程序四(设置底部导航)

    好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步 ...

  10. [转] 微信小程序 页面跳转 传递参数

    本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...

随机推荐

  1. C语言------结构体和共用体

    仅供借鉴.仅供借鉴.仅供借鉴(整理了一下大一C语言每个章节的练习题.没得题目.只有程序了) 文章目录 1 .实训名称 2 .实训目的及要求 3.源代码及运行截图 4 .小结 1 .实训名称 实训8:结 ...

  2. 知识图谱顶会论文(ACL-2022) ACL-SimKGC:基于PLM的简单对比KGC

    12.(2022.5.4)ACL-SimKGC:基于PLM的简单对比KGC 12.(2022.5.4)ACL-SimKGC:基于PLM的简单对比KGC 摘要 1.引言 2.相关工作 2.1 知识图补全 ...

  3. 【一】ERNIE:飞桨开源开发套件,入门学习,看看行业顶尖持续学习语义理解框架,如何取得世界多个实战的SOTA效果?

    ​ 参考文章: 深度剖析知识增强语义表示模型--ERNIE_财神Childe的博客-CSDN博客_ernie模型 ERNIE_ERNIE开源开发套件_飞桨 https://github.com/Pad ...

  4. 一、Vue.js介绍

    一.介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手 ...

  5. Codeforces Round #829 (Div. 2) D. Factorial Divisibility(数学)

    题目链接 题目大意: \(~~\)给定n个正整数和一个数k,问这n个数的阶乘之和能不能被k的阶乘整除 既:(a\(_{1}\)!+a\(_{2}\)!+a\(_{3}\)!+....+a\(_{n}\ ...

  6. nginx安装及相关操作

    工作中经常用到nginx,今天写个自动部署nginx的脚本.nginx版本选用:1.20.2 1.创建nginx安装脚本(nginx.sh) [root@iZ2ze7uphtapcv51egcm7rZ ...

  7. K8S之prometheus-operator监控

    prometheus-operator 1. Prometheus Operator介绍 介绍文章:http://t.zoukankan.com/twobrother-p-11164391.html ...

  8. PLC攻击(一):应用层攻击

    ​ 转载请注明出处:信安科研人please subscribe my official wechat :信安科研人获取更多安全资讯 参考文献: A Stealth Program Injection  ...

  9. SolidWorks2020下载安装中文版教程,你solidworks安装失败是什么原因?

    SW2020 WIN10 64位安装步骤: 1.先使用"百度网盘客户端"下载SW20S5_CN_x64安装包到电脑磁盘英文路径文件夹里,并鼠标右击进行解压缩,安装前先断开电脑网络, ...

  10. UBOOT编译--- UBOOT顶层Makefile中目标_all和all的关系及背景(四)

    @ 目录 1. 前言 2. 概述 3. 老版本UBOOT(背景) 4. 新版本UBOOT 5. 参考 1. 前言 UBOOT版本:uboot2018.03,开发板myimx8mmek240. 2. 概 ...