uni-app 微信小程式全局分享

2021 年 11 月 20 日
筆記
uni-app

實際使用中，經常需要小程式分享到好友或者朋友圈，一般而言是一個個頁面去設置。

官網分享介紹：//uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

單頁面每一個需要分享的頁面多需要單獨寫上

export 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.js

創建成功後在mian.js中導入該wxShare.js

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

wxShare.js簡介

　　創建一個頁面基礎js，包含data,onShareAppMessage,onShareTimeline三個即可

　　data:分享參數設置：可以參考最開始的配置圖

　　onShareAppMessage：分享到微信好友配置

　　onShareTimeline：分享到朋友圈配置

export 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()僅用於展示頁面棧的情況，請勿修改頁面棧，以免造成頁面狀態錯誤。

　　官網介紹：//uniapp.dcloud.io/collocation/frame/window?id=getcurrentpages

優化onShareAppMessage分享給朋友

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

動態獲取頁面路徑，在分享出去。

當下有一個比較明顯的問題，小程式的標題目前沒有方式直接獲取。

設置頁面分享標題

　　找到一個曲線救國的方法，在每一個頁面需要分享的頁面動態設置標題

export default {
    onLoad() {
        /*
            在要分享的頁面 生命周期中  設計當前頁面分享標題
             this.share 為獲取 wxShare.js中的定義的share數據
        */
       this.share.title = "當前頁面分享標題"
    }，
}

效果展示

button分享到好友

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

　　程式碼與上面並無區別，只是有一個單獨的區域給配置參數。

// 發送給朋友
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分享到朋友圈

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

//分享到朋友圈
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程式碼

export default {
    data() {
        return {
            share: {
                // 轉發的標題 （默認標題）
                title: '默認標題--分享標題',
                // 默認是當前頁面，必須是以『/』開頭的完整路徑
                path: '',
                //自定義圖片路徑，可以是本地文件路徑、程式碼包文件路徑或者網路圖片路徑，
                //支援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

Tags: uni-app