taro小程序的函數式組件實現微信小程序的分享功能。看到網上的帖子都是類組件實現的。函數式組件資料很少。爬完坑，寫一個方便大家查閱

?

首先，需要打開顯示轉發按鈕，這個時候即使沒有做任何設置。也是可以點擊發送給好友的。

最開始的默認狀態

打開轉發按鈕

useEffect(() => {Taro.showShareMenu({withShareTicket: true})}, [])

?

?然后繼續 如果想要分享給好友或是朋友圈 需要監聽分享按鈕 然后攔截 然后可以設置title和圖片以及路徑，同微信原生的方法onShareAppMessage。微信官方文檔位置https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object?

先看下官方文檔有助于幫助大家理解

繼續，實現轉發給好友功能。taro 函數組件中是拿不到onShareAppMessage的 所以我們需要借助hooks 將hooks直接寫在函數組件中 引入useShareAppMessage

import Taro, { useShareAppMessage, useShareTimeline } from '@tarojs/taro'useShareAppMessage(res => {console.log('攔截轉發', res)if (res.from === 'button') {// 來自頁面內轉發按鈕console.log(res.target)}return {title: '發送給好友',path: 'pages/index/index',imageUrl: friends}})

同時想著將config.ts中配置一下

export default {enableShareAppMessage: true,};

效果如下

?繼續，實現分享朋友圈功能。

同樣先配置config.ts

export default {enableShareTimeline: true };

分享朋友圈功能用到onShareTimeline() 微信官方文檔如下

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline

在taro函數式組件中，我們需要借助Hooks來實現這個回調函數

useShareTimeline(() => {return {title: '分享朋友圈', //字符串 自定義標題// query: `id=${this.data.shop.shop_id}`, //頁面攜帶參數imageUrl: moments //圖片地址}})

效果如下

總結

以上是生活随笔為你收集整理的taro小程序 函数组件实现分享功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。