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页面转发给好友内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
uniapp如何使用uv-popup弹出框隐藏底部导航tabbar
文章介绍了如何在uniapp中使用uv-popup组件隐藏底部导航的tabbar,并提供了隐藏前和隐藏后的代码示例,感兴趣的朋友一起看看吧2025-02-02
一文快速学会创建uni-app项目并了解pages.json文件
这篇文章主要给大家介绍了如何创建uni-app项目并了解pages.json文件的相关资料,pages.json文件用来对uni-app进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等,需要的朋友可以参考下2023-10-10
bootstrap daterangepicker双日历时间段选择控件详解
这篇文章主要为大家详细介绍了bootstrap daterangepicker双日历时间段选择控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-06-06


最新评论