微信小程序分享功能

作者：源字节1号

2022 年 8 月 03 日
本文字数：713 字
阅读完需：约 2 分钟

由于小程序的分享(微信、头条平台)，需要监听页面的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

发布于: 刚刚阅读数: 4

源字节1号

关注

一个着迷于技术又喜欢不断折腾的技术活跃者 2022.03.09 加入

一个着迷于技术又喜欢不断折腾的技术活跃者。喜欢并热爱编程，执着于努力之后所带来的美好生活！

发布

暂无评论

创作场景

微信小程序分享功能

基本使用

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

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

源字节1号

评论

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