草庐IT

微信小程序分享给朋友和分享到朋友圈

liuye066 2023-04-04 原文

分享给朋友

微信小程序分享给朋友比较简单，只需要在要分享的页面中设置onShareAppMessage即可。

只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。

使用button分享
<button open-type="share">分享按钮</button>

 onShareAppMessage如果带了参数，参数中的from会指明是从哪里触发的，从按钮触发from='button'，从右上角菜单中触发from='menu'

onShareAppMessage: function (res) {
    //console.log('onShareAppMessage',res);
    return {
      title: '自定义标题',
      path: '/pages/index/index?userId='+Constant.userId+'&share=true',
    }
  },

//onShareAppMessage {from: "button", target: {…}}

支持自定义标题，自定义路径和自定义图片

字段说明默认值最低版本
title转发标题当前小程序名称
path转发路径当前页面 path ，必须是以 / 开头的完整路径
imageUrl自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持 PNG 及JPG。显示图片长宽比是 5:4。使用默认截图1.5.0
promise如果该参数存在，则以 resolve 结果为准，如果三秒内不 resolve，分享会使用上面传入的默认参数2.12.0

 我们点击分享出去的卡片，打开小程序，可以在onLoad里获取path里的参数

onLoad(query) {
    console.log('onLoad',query);
}

//onLoad {userId: "1530474058280374273", share: "true"}

分享到朋友圈：

1、onShareTimeline监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。

本接口为 Beta 版本，暂只在 Android 平台支持，iOS平台有的机型支持有的不支持

onShareTimeline: function() {
    return {
      title: '乐湃鲨自助台球',
      query: 'userId='+Constant.userId+'&storeId='+Constant.curStoreId+'&share=true',
    }
  }

事件处理函数返回一个 Object，用于自定义分享内容，不支持自定义页面路径，返回内容如下：

字段说明默认值最低版本
title自定义标题，即朋友圈列表页上显示的标题当前小程序名称
query自定义页面路径中携带的参数，如 path?a=1&b=2 的 “?” 后面部分当前页面路径携带的参数
imageUrl自定义图片路径，可以是本地文件或者网络图片。支持 PNG 及 JPG，显示图片长宽比是 1:1。默认使用小程序 Logo

2、通过分享到朋友圈的内容打开小程序

       用户在朋友圈打开分享的小程序页面，并不会真正打开小程序，而是进入一个“小程序单页模式”的页面，底部固定有操作栏，点击操作栏的“前往小程序”可打开小程序的当前页面。打开当前页面后，比如你分享的不是首页，你的顶部返回按钮又是一个公共的组件，都是返回上一级，你先通过分享的进入小程序，因为页面栈没有上一级，所以你是不能返回首页的，所以需要更改一下你的公共组件。

单页模式的介绍详见：分享到朋友圈 | 微信开放文档

“单页模式”默认运行的是小程序页面内容， “单页模式”下，一些组件或接口存在一定限制，可通过判断场景值等于 1154 的方法来进行页面适配。

补充：

单页模式下有很多限制，详情如下：

单页模式下的限制

小程序“单页模式”适用于纯内容展示场景，可实现的交互与接口能力有限，因此存在如下限制：

  1. 页面无登录态，与登录相关的接口，如 wx.login 均不可用；云开发资源需开启未登录访问方可在单页模式下使用，详见未登录模式。
  2. 不允许跳转到其它页面，包括任何跳小程序页面、跳其它小程序、跳微信原生页面
  3. 不允许横屏使用
  4. 若页面包含 tabBar，tabBar 不会渲染，包括自定义 tabBar
  5. 本地存储与小程序普通模式不共用

对于一些会产生交互的组件或接口，在点击后调用时，会弹 toast 提示“请前往小程序使用完整服务”。为达到良好的用户体验，请注意适配单页模式的接口能力，请勿大量使用被禁用的接口或组件。

运营须知

分享朋友圈能力是为了满足纯内容场景的分享诉求，滥用于营销、诱导等行为将会被打击。

  1. 小程序提供的服务中，不得存在滥用分享违规行为。如强制用户分享行为；分享立即获得利益的诱导行为；以及通过明示或暗示的样式来达到诱导分享目的的行为等。详见《微信小程序平台运营规范》
  2. 在“单页模式”下，不得诱导或强制用户点击“打开小程序”，应在“单页模式”中尽可能呈现完整的内容

注意事项

  1. 低版本微信客户端打开时，会进入一个升级提示页面
  2. 不支持在小程序页面内直接发起分享
  3. 自定义分享内容时不支持自定义页面路径
  4. 存在 web-view 组件的页面不支持发起分享
  5. 支持打开开发版、体验版，无权限人员进入时页面会提示无权限

 

分享微信小程序xff0cxff0xff$小程序$分享到朋友圈

有关微信小程序分享给朋友和分享到朋友圈的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  4. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法，在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信：ubuntu20.04安装最新版微信--可以支持微信最新版，但是适配的不是特别好；比如WeChartOCR.exe报错。2.原生微信安装：linux系统下的微信安装(ubuntu20.04)--微信适配的最好，反应最快，但是微信版本只到2.1.1，版本太老，很多功能都没有。3.深度deepin-wine6安装微信：ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好，当前个人使用此种方法1个月，微信版本3.4；没什么大问题，尚可。一、WineHQ7.0安装微信

  5. 微信小程序订餐系统 - 2

    对传统的餐饮商家来说，小程序很好地解决了餐厅线下线上连接的问题，在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序，商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式：1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同

  6. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1，前端小程序原生MINA框架cssJavaScriptWxml2，管理后台云开发Cms内容管理系统web网页3，数据后台小程序云开发云函数云开发数据库（基于MongoDB）云存储4，人脸识别算法基于百度智能云实现人脸识别一，用户端效果图预览老规矩我们先来看效果图，如果效果图符合你的需求，就继续往下看，如果不符合你的需求，可以跳过。1-1，登录注册页可以看到登录页有注册入口，注册页如下我们的注册，需要管理员审核，审核通过后才可以正常登录使用小程序1-2，个人中心页登录成功以后，我们会进入个人中心页我们在个人中心页可以注册人脸，因为我们做人脸识别签到，需要先注册人脸才可以进行人脸比对，进

  7. 微信小程序切换云环境 - 2

    在开发微信小程序的时候，我们可能需要开发环境和测试环境，或者其他环境，下面是切换环境的方法。首先需要明确的是：前端的页面代码是不区分环境的，环境的区分指的是云函数、云数据库、云存储这些。1、更改云函数的使用云环境这里我们从cloud1更改为test-cloud，这个改完是没有用的，因为在前端代码指定了使用的云环境。cloudfunctions文件和miniprogram文件虽然都在一个目录下，但是这两个没有直接联系。2、在evList.js中添加自己云环境evList.js存储了云环境列表，这里把test-cloud加到这个列表里，需要填写envId和alias，参照cloud1写就行。3、更

  8. 连续3天3场分享，KubeVela@KubeCon EU 2023 抢鲜看！ - 2

    自从2019年OpenApplicationModel诞生以来，KubeVela已经经历了几十个版本的变化，并向现代应用程序交付先进功能的方向不断发展。最近，KubeVela完成了向CNCF孵化项目的晋升，标志着社区的发展来到一个新的里程碑。今天，KubeVela社区内活跃着大量来自全球的开发者，共同推动KubeVela项目的落地和发展。在即将开幕的KubeCon+CloudNatvieConEurope2023上，我们惊喜地发现，连续3天，KubeVela项目的贡献者、企业用户和来自阿里云的核心维护者，将从不同角度展对KubeVela项目的分享。让我们先睹为快！🎙️BuildingaPlat

  9. Spring Boot中的微信支付（小程序） - 2

    前言微信支付是企业级项目中经常使用到的功能，作为后端开发人员，完整地掌握该技术是十分有必要的。一、申请流程和步骤图1-1注册微信支付账号获取微信小程序APPID获取微信商家的商户ID获取微信商家的API私钥配置微信支付回调地址绑定微信小程序和微信支付的关系搭建SpringBoot工程编写后台支付接口发布部署接口服务项目使用微信小程序或者UniAPP调用微信支付功能支付接口的封装配置jwt或者openid的token派发原生微信小程序完成支付对接二、注册商家2.1商户平台商家或者企业想要通过微信支付来进行商品的销售，必须先通过微信平台（pay.weixin.qq.com）去将商家进行注册。注册成

  10. 微信小程序顶部标题栏与胶囊对齐 - 2

    介绍    最近在做微信小程序时，顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了，在另外一款手机差很多。我在查阅资料后，提出了一种方法解决这个问题，即：在页面onLoad或组件created时，利用微信小程序提供的API，获取系统状态栏高度和胶囊信息，进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证，能做到精准对齐。理论        胶囊样式应该是垂直居中，有1px的border，border-radius为18px。        若要使顶部标题栏与胶囊对齐，则其高度必须是导航栏高度，标题栏内容也要垂直居中，顶部标题栏的外边距或内边距必须是状态栏高度。        如果顶部

随机推荐