uniapp 项目中的微信小程序分享

作者：辰风沐阳阅读：1821 发布时间：2023-01-11 上次更新：2023-01-12

[TOC]

#### 1. uniapp 微信小程序分享
---

在微信小程序中，点击右上角的三个点按钮，会出现一个弹窗，在弹窗中可以看到三个分享操作：**转发到朋友**、**分享到朋友圈**、**分享到企业微信**，这三个分享默认情况下都是灰色的，代表不可用，当需要使用分享功能时可通过代码实现

转发到朋友：可以将小程序分享给微信好友、微信群
分享到朋友圈：可以将小程序分享到微信朋友圈
分享到企业微信：可以将小程序分享给企业微信好友、企业微信群

当页面中定义 `onShareAppMessage` 生命周期后，**转发到朋友** 和 **分享到企业微信** 就可以正常使用了

onShareAppMessage 文档：[https://uniapp.dcloud.net.cn/api/plugins/share.html#onshareappmessage](https://uniapp.dcloud.net.cn/api/plugins/share.html#onshareappmessage)

```javascript
export default {
	onShareAppMessage(res) {
	}
}
```

实现小程序分享，有两种方式：

1、点击右上角的三个点
2、通过 button 组件的开发能力 `open-type="share"` 触发分享

`onShareAppMessage(res)` 的回调参数 res 值示例：

```javascript
// 通过右上角的三个点触发的触发的回调参数
{
	"from": "menu",
}
// 通过 button 组件的开发能力触发的回调参数
{
    "from":"button",
    "target":{
        "id":"",
        "dataset":{

},
        "offsetTop":249,
        "offsetLeft":138
    }
}
```

使用示例：

title 为空字符串时，默认为当前页面标题
path 为空字符串时，默认为当前页面路径

```javascript
export default {
	// 转发到朋友和企业微信
	onShareAppMessage(res) {
		// 通过button按钮触发
		if (res.from === 'button') {
			console.log(res.target)
		}
		return {
			title: "首页", //分享标题
			path: "/pages/login/login", //分享链接
		}
	}
}
```

当页面中定义 `onShareTimeline` 生命周期时，**分享到朋友圈** 就可以正常使用了

```javascript
export default {
	// 分享到微信朋友圈
	onShareTimeline(res) {
		return {
			title: "首页", //分享标题
			path: "/pages/login/login",//分享链接
		}
	}
}
```

#### 2. uView 的微信小程序分享
---

uview 小程序分享文档：[https://www.uviewui.com/js/mpShare.html](https://www.uviewui.com/js/mpShare.html)

uview 小程序分享是对 uni 的 onShareAppMessage 生命周期的封装

在 main.js 中添加以下代码，打开小程序分享功能，将小程序的所有页面分享功能都打开了

默认只开启分享给朋友，并没有开启分享到朋友圈，可通过查看 **libs/mixin/mpShare/mpShare.js** 证实这个结论

```javascript
// 引入uView对小程序分享的mixin封装
const mpShare = require('@/uni_modules/uview-ui/libs/mixin/mpShare');
Vue.mixin(mpShare)
```

同时开启 **分享给朋友** 和 **分享到朋友圈**

```javascript
// 引入uView对小程序分享的mixin封装
const mpShare = require('@/uni_modules/uview-ui/libs/mixin/mpShare');
// 打开所有页面的分享到朋友圈功能
mpShare.onShareTimeline = res => ({ title: '', path: '' })
Vue.mixin(mpShare)
```

uniapp 项目中的微信小程序分享

最新发布

友情链接