uniapp微信小程序webview页面实现转发给好友功能实例

 更新时间:2025年10月22日 10:47:11   作者:头发还多  
在微信小程序中,webview 组件扮演着极为重要的角色,它是实现小程序与html通信的关键元素之一,这篇文章主要介绍了uniapp微信小程序webview页面实现转发给好友功能的相关资料,需要的朋友可以参考下

webview页面vue代码向小程序发送当前页面的参数

思路:我的需要需要在嵌套网页的不同页面,不同参数都传递过来。webview每一个页面都都可能被分享,所以我在请求接口的时候都会传递一次当前的页面路由和查询参数。这样分享后进入时会携带参数,vue页面取到路由参数进而查询出来. 

      uni.postMessage({
        data: {
          action: 'message',
          zbxxShareMsg: {这里放你需要传递的数据}
        }
      })

发送的消息如下,webview网页每次发送消息,开发者工具都可以看到

uniapp的微信小程序接收参数限制注意

网页向应用 postMessage 时,会在特定时机(后退、组件销毁、分享)触发并收到消息。刚好我这里是要分享的,刚好满足,在用户点击分享的时候就会收到
uniapp官网-webview

<template>
	<view>
		<web-view :src="url" @message="getMessage">
		</web-view>
	</view>
</template>
...
methods: {
	getMessage(option) {
		console.log('接收到',option)
	},
}

点击分享按钮

提示:正常情况下是禁用的状态,可以在需要转发的某个模块添加onShareAppMessage,注意函数级别
uniapp分享功能文档

onShareAppMessage(res) {
	return {
		title: this.shareZbxxTitle,
		path: this.shareZbxxUrl,
		imageUrl: '/static/zbxxShareImg.png'
	}
},

小结

整体逻辑

1、webview页面发送参数给小程序

2、小程序点击分享的时候就可以拿到最新的参数及页面路径,将这些参数和路径结合小程序页面路径拼接好后发送给好友

3、好友点击分享时,webview页面拿到对应路由和参数就可以显示页面了

到此这篇关于uniapp微信小程序webview页面实现转发给好友功能的文章就介绍到这了,更多相关微信小程序webview页面转发给好友内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript利用事件循环实现数据预加载

    JavaScript利用事件循环实现数据预加载

    当我们请求好第一页数据后,将请求下一页放到异步任务队列里(宏任务或者微任务),等当前同步任务执行完成后,立马请求下一页数据,本文给大家介绍了JavaScript如何利用事件循环实现数据预加载,需要的朋友可以参考下
    2024-05-05
  • uniapp如何使用uv-popup弹出框隐藏底部导航tabbar

    uniapp如何使用uv-popup弹出框隐藏底部导航tabbar

    文章介绍了如何在uniapp中使用uv-popup组件隐藏底部导航的tabbar,并提供了隐藏前和隐藏后的代码示例,感兴趣的朋友一起看看吧
    2025-02-02
  • 纯前端导出txt文本文件具体流程

    纯前端导出txt文本文件具体流程

    TXT作为纯文本格式,只支持无格式的文本内容,不包括任何样式信息,下面这篇文章主要给大家介绍了关于纯前端导出txt文本文件的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
    2024-08-08
  • 一文快速学会创建uni-app项目并了解pages.json文件

    一文快速学会创建uni-app项目并了解pages.json文件

    这篇文章主要给大家介绍了如何创建uni-app项目并了解pages.json文件的相关资料,pages.json文件用来对uni-app进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等,需要的朋友可以参考下
    2023-10-10
  • 30分钟快速掌握Bootstrap框架

    30分钟快速掌握Bootstrap框架

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。接下来通过本文给大家介绍如何快速掌握Bootstrap,感兴趣的朋友一起学习吧
    2016-05-05
  • Bootstrap开关(switch)控件学习笔记分享

    Bootstrap开关(switch)控件学习笔记分享

    这篇文章主要为大家分享了Bootstrap开关(switch)控件学习笔记,介绍了Bootstrap开关(switch)控件的功能、使用说明,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • bootstrap daterangepicker双日历时间段选择控件详解

    bootstrap daterangepicker双日历时间段选择控件详解

    这篇文章主要为大家详细介绍了bootstrap daterangepicker双日历时间段选择控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 史上最为详细的javascript继承(推荐)

    史上最为详细的javascript继承(推荐)

    这篇文章主要介绍了javascript继承,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript实现简易QQ聊天界面

    JavaScript实现简易QQ聊天界面

    这篇文章主要为大家详细介绍了JavaScript实现简易QQ聊天界面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript中添加监听句柄的方式

    JavaScript中添加监听句柄的方式

    这篇文章主要介绍了JavaScript中添加监听句柄的方式,监听就是触发某事件之后做出的响应,监听句柄是触发某相应的条件,下面关于添加监听句柄的方式的详细内容,需要的朋友可以参考一下,希望对你有所帮助
    2022-02-02

最新评论