微信小程序实现分享至朋友圈的功能

news2025/2/26 4:05:38

微信小程序实现分享至朋友圈的功能
微信小程序从基础库 2.11.3 开始,可将小程序页面分享到朋友圈。适用于内容型页面的分享,不适用于有较多交互的页面分享。

1 设置分享状态
小程序页面默认不可被分享到朋友圈,开发者需主动设置“分享到朋友圈”。页面允许被分享到朋友圈,需满足两个条件:

首先,页面需设置允许“发送给朋友”。具体参考 Page.onShareAppMessage 接口文档

满足条件 1 后,页面需设置允许“分享到朋友圈”,同时可自定义标题、分享图等。具体参考 Page.onShareTimeline 接口文档

满足上述两个条件的页面,可被分享到朋友圈。

2 代码实现

1.先设置页面允许“发送给朋友”

在我们要分享的页面js中,增加以下方法,默认生成的页面自带此方法。只需要配置标题、路径等参数即可。下面的这个例子是我“国庆专属头像”的分享设置。

onShareAppMessage: function () {
return {
title: “标题文字”,
imageUrl: “.图片地址”
};
},
2.设置允许分享到朋友圈

还是要分享的页面js中,增加以下方法,

onShareTimeline: function () {
return {
title: ‘标题文字’,
imageUrl: ‘.图片地址’
}
},
配置完以上代码,发布后即可体验分享至朋友圈功能。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405426.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HBuilder X的下载与使用(详细步骤)

一、HBuilder X的下载 这里我们前往HBuilder下载官网地址:https://www.dcloud.io/进入官网后,我们可以看到HBuilder目前有两个版本,一个是windows版,一个是mac版。下载一个自己电脑适合的版本,这里我下载步骤用的是wi…

【Ajax】如何通过axios发起Ajax请求

✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学 Node.js教学 从头开始学习 ajax学习 文章目录axios  什么是axios  axios发起GET请求  axios发起POST请求  直接使用axios发起get…

JS解构赋值

一、前言 解构赋值语法是一种 Javascript 表达式。通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。本文将讨论解构赋值的作用与其用法。 目录 一、前言 二、用途 三、数组的解构 1.变量声明并且赋值时的解构 2.默认值 3.剩余数组赋值…

js字符串转换为对象格式的3种方法

背景: js字符串转换为对象格式,一般都会想到JSON.parse(),但数据不是标准的 JSON 格式的时候会解析出错,这时候就可以使用eval() 函数、new Function()方法来转换。 常用3种将字符串string转为json对象 方法: var str…

如何解决 npm ERR! Cannot read properties of null (reading ‘pickAlgorithm‘)报错问题

1、问题描述: 在vue项目中,当我们在终端使用指令:npm install 下载 node_modules (节点_模块) 时出现报错的情况。 node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。 主要是这个原因&…

基于Web的疫情防控管理系统

目 录 1 绪论........................................................................................................... 1 1.1 研究背景..................................................................................................................... 1 1…

前端如何调用后端接口进行数据交互(极简)

前端调用后端接口,获得数据并渲染 一、介绍 一个完善的系统,前后端交互是必不可少的,这个过程可以分成下面几步: 前端向后端发起请求后端接口接收前端的参数后,开始层层调用方法处理数据后端将最终数据返回给前端接…

vue2和vue3的区别(由浅入深)

前言 vue2和vu3之前的区别,一直以来是面试必考题目,如何回答,回答的层次决定了面试者的对于vue2,3的理解,以及对于vue3目前稳定版本发展的方向的了解,即考察使用程度,又考察了学习能力&#xf…

babel安装失败/报错详细解决方案报以下错误: core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended

babel安装失败/报错详细解决方案 **问题:**在VSCode中执行命令 npm install --global babel-cli 报以下错误: core-js2.6.12: core-js❤️.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V…

Vue路由传参,页面刷新后参数丢失原因与解决方法

vue路由传参方法 在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({path: "/test",query: {a: 1,b: 2} }) 这样我们就传递了两个参数,在 /test 页面 就可以接收这两个参数…

Python 万能代码模版:爬虫代码篇

你好,我是悦创。 很多同学一听到 Python 或编程语言,可能条件反射就会觉得“很难”。但今天的 Python 课程是个例外,因为今天讲的 **Python 技能,不需要你懂计算机原理,也不需要你理解复杂的编程模式。**即使是非开发…

Vite打包性能优化之开启Gzip压缩

在使用 vite 进行项目打包时,默认已经帮我们做了一些优化工作,比如代码的压缩,分包等等。除此之外,我们还有一些可选的优化策略,比如使用 CDN ,开启 Gzip 压缩等。本文会介绍在 vite 中使用插件来开启 Gzip…

vue-router路由懒加载

路由懒加载指的是打包部署时将资源按照对应的页面进行划分,需要的时候加载对应的页面资源,而不是把所有的页面资源打包部署到一块。避免不必要资源加载。(参考vue项目实现路由按需加载(路由懒加载)的3种方式_小胖梅的博客-CSDN博客_vue懒加载…

原生微信小程序/uniapp使用空格占位符无效解决方法

最近碰到一个需求&#xff0c;在一个<text>文本中的前后添加空格占位符&#xff0c;总所周知&#xff0c;我并不会前端&#xff0c;于是我查看了原生微信小程序以及uniapp官方文档&#xff0c;得到了以下答案&#xff1a; 原生微信小程序官方文档 uniapp官方文档 从文档…

毕业设计-基于微信小程序的校园二手闲置物品交易系统

目录 前言 课题背景与简介 实现设计思路 一、需求分析 二、微信小程序云开发框架及其设计流程 三、功能测试以及性能测试 四、总结 实现效果样例 更多帮助 前言 &#x1f4c5;大四是整个大学期间最忙碌的时光,一边要忙着备考或实习为毕业后面临的就业升学做准备,一边要…

如何创建一个vue项目(详细步骤)

一、环境准备 1、安装 node.js 下载地址&#xff1a;https://nodejs.org/en/ 2、检查是否安装成功&#xff1a;输出版本号说明安装成功 二、搭建 vue 环境 1、全局安装脚手架 vue-cli 在命令行输入&#xff1a; npm install vue-cli -g &#xff08;vue-lcli2) npm install…

前端面试题及答案整理(2022最新版)

收集整理2022年最新前端面试题及答案&#xff0c;方便平时翻看记忆&#xff0c;欢迎各位大佬们补充。 一般来说&#xff0c;把下面基础中的高频题写熟练就差不多了。当然去面大厂这些远远不够&#xff0c;还要再刷一些算法题。 基础 高频 1.手写 instanceof // 原理&#x…

【Node.js实战】一文带你开发博客项目(使用假数据处理)

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿 offer&#xff08;秋招&#xff09; &#x1f947;推荐学习&…

另一种解决Failed to execute goal on project xxx: Could not resolve dependencies for project com的方法

周青的日常问题记录 项目场景&#xff1a; 学习硅谷电商毕设项目_微服务版本&#xff0c;建站练手。进行到商城前端服务开发的用户服务 store-front-user阶段&#xff0c;pom文件导入依赖报错。 问题描述 报错为 Unresolved dependency: com.atguigu:store-commons:jar:1.0.0…

【 Apifox】Apifox接口设计

Apifox官网地址&#xff1a;http://apifox.cn/a103abcc 文章目录一、接口设计 (接口文档)二、如何定义接口&#xff1f;三、接口路径四、基础信息五、请求参数1.Params 参数2.Body 参数3.Body 参数类型六、参数中使用环境变量&#xff08;或全局变量/临时变量&#xff09;七、返…