uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)

简介: uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)


大家好!匆匆忙忙又到了周三,今天是2023年9月13日|农历七月二十九,今天这篇文章主要是微信小程序实现分享当前页面到朋友圈或微信好友,下面来看下具体实现方式吧!

uniapp 实现分享至微信好友或朋友圈功能

带参数和无参数是根据自己的业务需求,如果需要再onLoad函数里面赋值一些属性值的时候可以在path中携带参数,当用户通过我们分享的链接进来后,就会携带参数。

无参数跳转

// 分享微信好友
onShareAppMessage() {
  return {
    title: '标题', //分享标题 这个可以根据业务需求去定义
    path: '当前需要进行分享页面的地址' //例如:path: 'page/home/index'
  }
},
// 分享朋友圈
onShareTimeline() {
  return {
    title: '标题', //分享标题 这个可以根据业务需求去定义
    path: '当前需要进行分享页面的地址' //例如:path: 'page/home/index'
  }
},

带参数跳转

我业务需求是分享出去的path中要携带参数id,在用户通过我分享的链接进入到这个页面时,需要触发onLoad函数,通过我携带的id参数去请求后端接口,渲染页面数据。

具体代码如下:

// 分享微信好友
onShareAppMessage() {
  return {
    title: '标题',
    path: '/page/home/index?id='+this.id
  }
},
// 分享朋友圈
onShareTimeline() {
  return {
    title: '标题',
    path: '/page/home/index?id='+this.id
  }
},

下面是对onLoad函数的代码:

这块我就需要再分享的时候传递一个id属性,在页面渲染时触发onLoad函数,把id属性传递给getQuery函数,请求后端,实现数据动态渲染。

onLoad(e) {
 console.log("e============>",e)
 if (e.hasOwnProperty('id')) {
   this.id = e.id
 }
 this.getQuery(this.id)
},

结束语

这就是我遇到的问题及解决方案,希望本篇博文可以解决你遇到的问题,如果有不明白的博主,或者你也遇到了类似的问题,私信我,我会一一为你进行解答,不收取任何费用,欢迎打扰哦~

目录
相关文章
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
887 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
10575 38
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
4168 12
|
PHP
全新uniapp小说漫画APP小说源码/会员阅读/月票功能
价值980的uniapp小说漫画APP小说源码/会员阅读/月票功能
1007 20
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
5674 3
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
429 1
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
1384 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
548 2
|
算法 JavaScript 前端开发
切西瓜法实现微信抢红包功能
该文章介绍了使用“切西瓜法”和“栅栏法”两种算法来模拟微信抢红包的随机分配机制,并通过具体的JavaScript代码实现了红包金额的公平随机分配过程。
切西瓜法实现微信抢红包功能