微信小程序分享新体验,揭秘高效互动的分享功能魅力

微信小程序的分享功能是其交互设计中的重要组成部分，它可以帮助用户更方便地与他人分享小程序的内容。以下是微信小程序分享功能的一些基本介绍和实现方式：
### 分享方式
1. "直接分享"：用户可以通过点击小程序页面右上角的分享按钮，直接分享到微信聊天界面、朋友圈、微信群等。 2. "页面内分享"：在页面内容中，可以通过按钮或图标触发分享。
### 分享内容
1. "分享小程序页面"：用户可以分享当前页面内容。 2. "分享小程序码"：用户可以分享小程序码，其他人扫描后可以直接打开小程序。
### 实现方法
以下是在小程序中实现分享功能的基本步骤：
1. "配置分享信息"：在页面的`json`配置文件中配置分享信息。 ```json { "shareAppMessage": { "title": "页面标题", "path": "/pages/index/index", "imageUrl": "分享图标", "success": function(res) { // 分享成功的回调 }, "fail": function(res) { // 分享失败的回调 } } } ```
2. "页面内分享"：在页面的`wxml`中添加分享按钮，并通过`wx.onShareAppMessage`监听分享事件。
```html 分享 ```

相关内容：

由于小程序的分享(微信、平台)，需要监听页面的onShareAppMessage生命周期，小程序需要在页面声明了此生命周期，点击右上角的"胶囊"才会有分享功能，

而一般情况下，我们希望每个页面都可以分享，那就需要每个页面都写一遍这个生命周期，是很繁琐的。

基于以上，开源字节基于uview通过mixin的形式，给每一个页面注入了onShareAppMessage生命周期，让您简单引入，无需任何后续操作，即可让每一个页面都有分享功能(仅针对小程序)。

基本使用

需要注意的是，小程序(uni)没有提供类似"getNavigationBarTitle"这样的接口，所以我们无法获取当前页面导航栏的标题，换言之，我们想要每个页面个性化的分享标题，需要手动设置，否则默认为小程序的名称。

首先在main.js中引入对应的文件

let mpShare = require('uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare)

通过this.$u.mpShare定义分享信息

// 分享自定义标题与图片
let shareTitle = ''
if(room.type == '整租'){
	shareTitle = this.village.name + " " + this.room.houseNum + this.room.houseHall + this.room.toiletNum + " " + this.room.decoration+ " ¥" + this.room.price+"/月"
}else{
	shareTitle = this.village.name + " " + room.roomType + " " + this.room.decoration+  " ¥" + this.room.price+"/月"
}
this.$u.mpShare = {
	title:  shareTitle, // 默认为小程序名称，可自定义
	// 支持PNG及JPG，默认为当前页面的截图
	imageUrl: this.room.faceUrl, 
}

开源字节追求用更简单的逻辑，更少的代码实现更复杂的功能。以上代码在开源字节的租房小程序中都已开源上线，可前往仓库获取源码

如若转载，请注明出处：开源字节
https://sourcebyte.cn/article/210.html