copyexport default {
//發(fā)送給朋友
  onShareAppMessage(res) {
    if (res.from === 'button') {// 來自頁面內(nèi)分享按鈕
      console.log(res.target)
    }
    return {
      title: '自定義分享標(biāo)題',
      path: '/pages/test/test?id=123'
    }
  },
  //分享到朋友圈
  onShareTimeline(res) {
     return {
      title: '自定義分享標(biāo)題',
      path: '/pages/test/test?id=123'
    }
  }
}

重復(fù)代碼不說，還特別容易搞混，一不小心就漏掉參數(shù)忘記修改。

分享參數(shù)配置介紹：

全局分享

減少每個頁面重復(fù)代碼，全局設(shè)置分享代碼。

先在更目錄下創(chuàng)建utils文件夾下，創(chuàng)建wxShare.js

創(chuàng)建成功后在mian.js中導(dǎo)入該wxShare.js

//分享設(shè)置
import share from './utils/wxShare.js'
Vue.mixin(share)

wxShare.js簡介

創(chuàng)建一個頁面基礎(chǔ)js，包含data,onShareAppMessage,onShareTimeline三個即可

data:分享參數(shù)設(shè)置：可以參考最開始的配置圖

onShareAppMessage：分享到微信好友配置

onShareTimeline：分享到朋友圈配置

copyexport default {
    data() {
        return {
            share: {
                // 轉(zhuǎn)發(fā)的標(biāo)題 （默認(rèn)標(biāo)題）
                title: '默認(rèn)標(biāo)題--分享標(biāo)題',
                // 默認(rèn)是當(dāng)前頁面，必須是以‘/'開頭的完整路徑
                path: '',
                //自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡(luò)圖片路徑，
                //支持PNG及JPG，不傳入 imageUrl 則使用默認(rèn)截圖。顯示圖片長寬比是 5:4
                imageUrl: ''
            }
        }
    },
    // 發(fā)送給朋友
    onShareAppMessage(res) {
         return {
          title: '發(fā)送給朋友',
          path: '/pages/test/test'
        }
    },
    //分享到朋友圈
    onShareTimeline(res) {
         return {
          title: '分享到朋友圈',
          path: '/pages/test/test'
        }
    }
}

到次一個最基本的全局分享已經(jīng)完成，細(xì)心的朋友可能會發(fā)現(xiàn)data里面的參數(shù)沒有使用上，而且每一個分享出去的參數(shù)全部是固定的，不能動態(tài)的去配置，和理想中的全局分享差別是很大的

getCurrentPages()函數(shù)

getCurrentPages()函數(shù)用于獲取當(dāng)前頁面棧的實(shí)例，以數(shù)組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當(dāng)前頁面。

注意： getCurrentPages()僅用于展示頁面棧的情況，請勿修改頁面棧，以免造成頁面狀態(tài)錯誤。

官網(wǎng)介紹：https://uniapp.dcloud.io/collocation/frame/window?id=getcurrentpages

優(yōu)化onShareAppMessage分享給朋友

copy// 發(fā)送給朋友
onShareAppMessage(res) {
    // 獲取加載的頁面
    let pages = getCurrentPages(),
        // 獲取當(dāng)前頁面的對象
        view = pages[pages.length - 1];
    //分享的頁面路徑
    this.share.path = `/${view.route}`;
    //轉(zhuǎn)發(fā)參數(shù)
    return this.share;
},

動態(tài)獲取頁面路徑，在分享出去。

當(dāng)下有一個比較明顯的問題，小程序的標(biāo)題目前沒有方式直接獲取。

設(shè)置頁面分享標(biāo)題

找到一個曲線救國的方法，在每一個頁面需要分享的頁面動態(tài)設(shè)置標(biāo)題

copyexport default {
    onLoad() {
        /*
            在要分享的頁面 生命周期中  設(shè)計(jì)當(dāng)前頁面分享標(biāo)題
             this.share 為獲取 wxShare.js中的定義的share數(shù)據(jù)
        */
       this.share.title = "當(dāng)前頁面分享標(biāo)題"
    }，
}

效果展示

button分享到好友

　　頁面中放置的分享按鈕（<button open-type="share">）

　　代碼與上面并無區(qū)別，只是有一個單獨(dú)的區(qū)域給配置參數(shù)。

copy// 發(fā)送給朋友
onShareAppMessage(res) {
    // 來自頁面內(nèi)的按鈕的轉(zhuǎn)發(fā)
    if (res.from == 'button') {
        console.log("按鈕轉(zhuǎn)發(fā)--配置");
    } 
    // 獲取加載的頁面
    let pages = getCurrentPages(),
        // 獲取當(dāng)前頁面的對象
        view = pages[pages.length - 1];
    //分享的頁面路徑
    this.share.path = `/${view.route}`;
    //轉(zhuǎn)發(fā)參數(shù)
    return this.share;
}

優(yōu)化onShareTimeline分享到朋友圈

在配置上基本上與分享到好友一模一樣

copy//分享到朋友圈
onShareTimeline(res) {
    // 獲取加載的頁面
    let pages = getCurrentPages(),
        // 獲取當(dāng)前頁面的對象
        view = pages[pages.length - 1];
    // console.log("獲取加載的頁面", pages);
    //console.log("當(dāng)前頁面的對象", view);
    this.share.path = `/${view.route}`;
    //轉(zhuǎn)發(fā)參數(shù)
    return this.share;
}

全局分享基本上配置就如上介紹。

分享動態(tài)修改頁面路徑是沒問題了，目前還有個問題動態(tài)分享路徑加參數(shù)的配置這一塊還是個問題。

wxShare.js代碼

copyexport default {
    data() {
        return {
            share: {
                // 轉(zhuǎn)發(fā)的標(biāo)題 （默認(rèn)標(biāo)題）
                title: '默認(rèn)標(biāo)題--分享標(biāo)題',
                // 默認(rèn)是當(dāng)前頁面，必須是以‘/'開頭的完整路徑
                path: '',
                //自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡(luò)圖片路徑，
                //支持PNG及JPG，不傳入 imageUrl 則使用默認(rèn)截圖。顯示圖片長寬比是 5:4
                imageUrl: ''
            }
        }
    },
    /*
     在要分享的頁面 生命周期中  設(shè)計(jì)當(dāng)前頁面分享標(biāo)題
     onLoad() {
         this.share.title = "當(dāng)前頁面分享標(biāo)題"
     },
     */
    // 發(fā)送給朋友
    onShareAppMessage(res) {
        // 來自頁面內(nèi)的按鈕的轉(zhuǎn)發(fā)
        if (res.from == 'button') {
            console.log("按鈕轉(zhuǎn)發(fā)--配置");
        }
        // 獲取加載的頁面
        let pages = getCurrentPages(),
            // 獲取當(dāng)前頁面的對象
            view = pages[pages.length - 1];
        this.share.path = `/${view.route}`;
        
        //轉(zhuǎn)發(fā)參數(shù)
        return this.share;
    },
    //分享到朋友圈
    onShareTimeline(res) {
        // 獲取加載的頁面
        let pages = getCurrentPages(),
            // 獲取當(dāng)前頁面的對象
            view = pages[pages.length - 1];
        // console.log("獲取加載的頁面", pages);
        console.log("當(dāng)前頁面的對象", view);
        this.share.path = `/${view.route}`;
        //轉(zhuǎn)發(fā)參數(shù)
        return this.share;
    }
}
wxShare.js

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: