微信小程式通過uni-app進行全域性分享
實際使用中,經常需要小程式分享到好友或者朋友圈,一般而言是一個個頁面去設定。
官網分享介紹:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage
單頁面每一個需要分享的頁面多需要單獨寫上
copyexport default { //傳送給朋友 onShareAppMessage(res) { if (res.from === 'button') {// 來自頁面內分享按鈕 console.log(res.target) } return { title: '自定義分享標題',path: '/pages/test/test?id=123' } },//分享到朋友圈 onShareTimeline(res) { return { title: '自定義分享標題',path: '/pages/test/test?id=123' } } }
重複程式碼不說,還特別容易搞混,一不小心就漏掉引數忘記修改。
分享引數配置介紹:
全域性分享
減少每個頁面重複程式碼,全域性設定分享程式碼。
先在更目錄下建立utils資料夾下,建立wxShare.
建立成功後在mian.js中匯入該wxShare.js
//分享設定
import share from './utils/wxShare.js'
.mixin(share)
wxShare.js簡介
建立一個頁面基礎js,包含data
,onShareAppMessage
,onShareTimeline
三個即可
data
:分享引數設定:可以參考最開始的配置圖
onShareAppMessage
onShareTimeline
:分享到朋友圈配置
copyexport default { data() { return { share: { // 轉發的標題 (預設標題) title: '預設標題--分享標題',// 預設是當前頁面,必須是以‘/'開頭的完整路徑 path: '',//自定義圖片路徑,可以是本地檔案路徑、程式碼包檔案路徑或者網路圖片路徑, //支援PNG及JPG,不傳入 imageUrl 則使用預設截圖。顯示圖片長寬比是 5:4 imageUrl: '' } } },// 傳送給朋友 onShareAppMessage(res) { return { title: '傳送給朋友',path: '/pages/test/test' } },//分享到朋友圈 onShareTimeline(res) { return { title: '分享到朋友圈',path: '/pages/test/test' } } }
到次一個最基本的全域性分享已經完成,細心的朋友可能會發現data裡面的引數沒有使用上,而且每一個分享出去的引數全部是固定的,不能動態的去配置,和理想中的全域性分享差別是很大的
getCurrentPages()
函式
getCurrentPages()
函式用於獲取當前頁面棧的例項,以陣列形式按棧的順序給出,第一個元素為首頁,最後一個元素為當前頁面。
注意: getCurrentPages()
僅用於展示頁面棧的情況,請勿修改頁面棧,以免造成頁面狀態錯誤。
官網介紹:https://uniapp.dcloud.io/collocation/frame/window?id=getcurrentpages
優化onShareAppMessage分享給朋友
copy// 傳送給朋友 onShareAppMessage(res) { // 獲取載入的頁面 let pages = getCurrentPages(),// 獲取當前頁面的物件 view = pages[pages.length - 1]; //分享的頁面路徑 this.share.path = `/${view.route}`; //轉發引數 return this.share; },
動態獲取頁面路徑,在分享出去。
當下有一個比較明顯的問題,小程式的標題目前沒有方式直接獲取。
設定頁面分享標題
找到一個曲線救國的方法,在每一個頁面需要分享的頁面動態設定標題
copyexport default { onLoad() { /* 在要分享的頁面 生命週期中 設計當前頁面分享標題 this.share 為獲取 wxShare.js中的定義的share資料 */ this.share.title = "當前頁面分享標題" }, }
效果展示
button分享到好友
頁面中放置的分享按鈕(<button open-type="share">
)
程式碼與上面並無區別,只是有一個單獨的區域給配置引數。
copy// 傳送給朋友
onShareAppMessage(res) {
// 來自頁面內的按鈕的轉發
if (res.from == 'button') {
console.log("按鈕轉發--配置");
}
// 獲取載入的頁面
let pages = getCurrentPages(),// 獲取當前頁面的物件
view = pages[pages.length - 1];
//分享的頁面路徑
this.share.path = `/${view.route}`;
//轉發引數
returnhttp://www.cppcns.com this.share;
}
優化onShareTimeline分享到朋友圈
在配置上基本上與分享到好友一模一樣
copy//分享到朋友圈
onShareTimeline(res) {
// 獲取載入的頁面
let pages = getCurrentPages(),// 獲取當前頁面的物件
view = pages[pages.length - 1];
// console.log("獲取載入的頁面",pages);
//console.log("當前頁面的物件",view);
this.share.path = `/${viewww.cppcns.comw.route}`;
//轉發引數
return this.share;
}
全域性分享基本上配置就如上介紹。
分享動態修改頁面路徑是沒問題了,目前還有個問題動態分享路徑加引數的配置這一塊還是個問題。
wxShare.js程式碼
copyexport default { data() { return { share: { // 轉發的標題 (預設標題) title: '預設標題--分享標題',sTdpagq //自定義圖片路徑,可以是本地檔案路徑、程式碼包檔案路徑或者網路圖片路徑, //支援PNG及JPG,不傳入 imageUrl 則使用預設截圖。顯示圖片長寬比是 5:4 imageUrl: '' } } },/* 在要分享的頁面 生命週期中 設計當前頁面分享標題 onLoad() { this.share.title = "當前頁面分享標題" },*/ // 傳送給朋友 onShareAppMessage(res) { // 來自頁面內的按鈕的轉發 if (res.from == 'button') { console.log("按鈕轉發--配置"); } // 獲取載入的頁面 let pages = getCurrentPages(),// 獲取當前頁面的物件 view = pages[pages.length - 1]; this.share.path = `/${view.route}`; //轉發引數 return this.share; },//分享到朋友圈 onShareTimeline(res) { // 獲取載入的頁面 let pages = getCurrentPages(),// 獲取當前頁面的物件 view = pages[pages.length - 1]; // console.log("獲取載入的頁面",pages); console.log("當前頁面的物件",view); this.share.path = `/${view.route}`; //轉發引數 return this.share; } } wxShare.js
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。