關於uni-app 小程序分享好友和分享朋友圈功能在各平臺的使用異同

由於不同平臺的分享和調用的邏輯存在很大的差異,uni-app在分享功能的使用上也存在很大不同

1.關於App:可以自主控制分享內容、分享形式及分享平臺
使用 uni.share API方式調用社交sdk分享
2.小程序:不支持API調用,只能用戶主動點擊觸發分享。可使用自定義按鈕方式
<button open-type="share"> 或監聽系統右上角的分享按鈕onShareAppMessage 進行自定義分享內容
3.H5:如果是普通瀏覽器,瀏覽器自帶分享按鈕;如果是在微信內嵌瀏覽器中,可調用js-sdk進行分享參考

如何使用

  1. 在APP中可直接調用uni.share 即可
    分享圖文
    href、imageUrl 爲必選參數,title/summary 二選一,最好將這四個參數都選上。
uni.share({
    provider: "weixin",
    scene: "WXSceneSession",
    type: 0,
    href: "http://uniapp.dcloud.io/",
    title: "uni-app分享",
    summary: "我正在使用HBuilderX開發uni-app,趕緊跟我一起來體驗!",
    imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/[email protected]",
    success: function (res) {
        console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
        console.log("fail:" + JSON.stringify(err));
    }
});

2.在微信小程序中使用
onShareAppMessage
小程序中用戶點擊分享後,在 js 中定義 onShareAppMessage 處理函數(和 onLoad 等生命週期函數同級),設置該頁面的分享信息
用戶點擊分享按鈕的時候會調用。這個分享按鈕可能是小程序右上角原生菜單自帶的分享按鈕,也可能是開發者在頁面中放置的分享按鈕;此事件需要 return 一個Object,用於自定義分享內容。

使用:通過button按鈕觸發 一定要加上 open-type=“share”
在這裏插入圖片描述
在和onLoad 等生命週期函數同級中定義onShareAppMessage

		onShow() {
			getApp().globalData.isVip = false

		},
		onShareAppMessage(res) {

			if (res.from === 'button') { // 來自頁面內分享按鈕
				console.log(res.target)
			}
			return {
				title: '這是一個分享功能',
				desc: "分享",
				imageUrl: "https://wx.qlogo.cn/mmhead/Q3auHgzwzM4nJ4giatRlrMUiaCEibtSq6MEbrln11b7iaL1a2XsbWUkMZg/0",
				success: res => {
					console.log(res)
				},
				fail: err => {
					console.log(err)
				}

			}
		},

模擬器中的分享窗口
在這裏插入圖片描述
點擊右上角的 分享也可以觸發
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章