快捷導(dǎo)航

uniapp微信小程序webview頁面實現(xiàn)轉(zhuǎn)發(fā)給好友功能實例

更新時間：2025年10月22日 10:47:11 作者：頭發(fā)還多

在微信小程序中,webview 組件扮演著極為重要的角色,它是實現(xiàn)小程序與html通信的關(guān)鍵元素之一,這篇文章主要介紹了uniapp微信小程序webview頁面實現(xiàn)轉(zhuǎn)發(fā)給好友功能的相關(guān)資料,需要的朋友可以參考下

webview頁面vue代碼向小程序發(fā)送當(dāng)前頁面的參數(shù)

思路：我的需要需要在嵌套網(wǎng)頁的不同頁面，不同參數(shù)都傳遞過來。webview每一個頁面都都可能被分享，所以我在請求接口的時候都會傳遞一次當(dāng)前的頁面路由和查詢參數(shù)。這樣分享后進入時會攜帶參數(shù)，vue頁面取到路由參數(shù)進而查詢出來.

      uni.postMessage({
        data: {
          action: 'message',
          zbxxShareMsg: {這里放你需要傳遞的數(shù)據(jù)}
        }
      })

發(fā)送的消息如下，webview網(wǎng)頁每次發(fā)送消息，開發(fā)者工具都可以看到

uniapp的微信小程序接收參數(shù)限制注意

網(wǎng)頁向應(yīng)用 postMessage 時，會在特定時機（后退、組件銷毀、分享）觸發(fā)并收到消息。剛好我這里是要分享的，剛好滿足，在用戶點擊分享的時候就會收到
uniapp官網(wǎng)-webview

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

點擊分享按鈕

提示：正常情況下是禁用的狀態(tài)，可以在需要轉(zhuǎn)發(fā)的某個模塊添加onShareAppMessage，注意函數(shù)級別
uniapp分享功能文檔

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

小結(jié)

整體邏輯

1、webview頁面發(fā)送參數(shù)給小程序

2、小程序點擊分享的時候就可以拿到最新的參數(shù)及頁面路徑，將這些參數(shù)和路徑結(jié)合小程序頁面路徑拼接好后發(fā)送給好友

3、好友點擊分享時，webview頁面拿到對應(yīng)路由和參數(shù)就可以顯示頁面了

到此這篇關(guān)于uniapp微信小程序webview頁面實現(xiàn)轉(zhuǎn)發(fā)給好友功能的文章就介紹到這了,更多相關(guān)微信小程序webview頁面轉(zhuǎn)發(fā)給好友內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: