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页面转发给好友内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！