微信小程序之轉發和分享

微信小程序之轉發和分享

微信小程序官方提供轉發的事件,可以說還是很好做的,但是由於開發者濫用分享和轉發導致用戶體驗差,所以微信官方調整了所有有關微信分享的策略即分享是不知道用戶是否分享成功了,所以導致那些需要用戶分享才能解鎖操作的功能就廢了,而且是包括微信所有分享的接口都這樣了。所以大家使用的時候一定要注意這點,不然你採用這種方式的話,別人就算不分享也是返回分享成功哦。

微信小程序之轉發和分享

下面介紹微信小程序的幾種分享或者轉發方式:

一、官方默認右上角轉發

微信小程序之轉發和分享

要實現這個轉發很簡單隻需要在js文件中加入onShareAppMessage事件就可以了,只要添加了這個事件右上角採用轉發的字樣,如果沒有添加是沒有的。我們來看一個實例:

微信小程序之轉發和分享

效果如下:

微信小程序之轉發和分享

最後說說三個參數的說明:

微信小程序之轉發和分享

二、自定義分享

自定義分享需要使用button的開發屬性,這種方式也包含了第一種方式,也就是說這種方式就是點擊一個按鈕來觸發分享事件,如果用戶不點擊按鈕而使用第一種方式也是可以分享的。

下面我們在實例中放置一個按鈕來實現這個分享:

<button>點擊分享/<button>

按鈕的開發屬性有很多取值如下:

微信小程序之轉發和分享

這種方式也是需要在js文件中定義分享事件的,這裡就不寫了就沿用上面方式的分享事件,所以效果如下:

微信小程序之轉發和分享

這種方式適合需要將分享醒目顯示出來給用戶看到的,需要用戶點擊按鈕來分享的場景。

三、一個頁面多分享

這種方式就是在首頁或者其他地方需要根據點擊不同按鈕來分享不同的內容。實例如下:

微信小程序之轉發和分享

按鈕上面的效果結構如下:

微信小程序之轉發和分享

注意上面代碼中有個data-idx主要是為了分享時獲取相關的分享信息。

js代碼如下:

微信小程序之轉發和分享

效果如下:

微信小程序之轉發和分享

這裡就是需要自己先保存好列表數據,然後根據id去查詢相關的分享信息來分享。這裡分享是需要特別注意的如果用戶點擊右上角的轉發那麼這裡就不能分享或者分享會出錯,所以大家需要判斷分享的來源:

微信小程序之轉發和分享

從上圖可以看出我們是可以根據from來源來判斷分享是哪個地方觸發的,根據不同的觸發源來設置分享的相關信息。所以我們上面的代碼應修改如下:

微信小程序之轉發和分享

這裡如果是右上角的menu分享的話我沒有設置所以就是自動截圖分享,如果不是就需要自己來根據不同點擊來分享。

這裡的from還是要很多可以判斷的,大家可以自己去嘗試做出不一樣的效果。

微信小程序之轉發和分享


分享到:


相關文章: