由于小程序的分享(微信、頭條平臺(tái)),需要監(jiān)聽頁面的onShareAppMessage生命周期,小程序需要在頁面聲明了此生命周期,點(diǎn)擊右上角的"膠囊"才會(huì)有分享功能,
而一般情況下,我們希望每個(gè)頁面都可以分享,那就需要每個(gè)頁面都寫一遍這個(gè)生命周期,是很繁瑣的。
基于以上,開源字節(jié)基于uview通過mixin的形式,給每一個(gè)頁面注入了onShareAppMessage生命周期,讓您簡(jiǎn)單引入,無需任何后續(xù)操作,即可讓每一個(gè)頁面都有分享功能(僅針對(duì)小程序)。

基本使用
需要注意的是,小程序(uni)沒有提供類似"getNavigationBarTitle"這樣的接口,所以我們無法獲取當(dāng)前頁面導(dǎo)航欄的標(biāo)題,換言之,我們想要每個(gè)頁面?zhèn)€性化的分享標(biāo)題,需要手動(dòng)設(shè)置,否則默認(rèn)為小程序的名稱。
首先在main.js中引入對(duì)應(yīng)的文件
let mpShare = require('uview-ui/libs/mixin/mpShare.js');Vue.mixin(mpShare)
通過this.$u.mpShare定義分享信息
// 分享自定義標(biāo)題與圖片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, // 默認(rèn)為小程序名稱,可自定義// 支持PNG及JPG,默認(rèn)為當(dāng)前頁面的截圖imageUrl: this.room.faceUrl, }
開源字節(jié)追求用更簡(jiǎn)單的邏輯,更少的代碼實(shí)現(xiàn)更復(fù)雜的功能。以上代碼在開源字節(jié)的租房小程序中都已開源上線,可前往倉(cāng)庫(kù)獲取源碼
如若轉(zhuǎn)載,請(qǐng)注明出處:開源字節(jié)
https://sourcebyte.cn/article/210.html