关于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)
				}

			}
		},

模拟器中的分享窗口
在这里插入图片描述
点击右上角的 分享也可以触发
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43835425/article/details/104830693