uni-app 微信小程式全域性分享

虛乄發表於2021-11-20
APP微信小程式

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

官網分享介紹：https://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()僅用於展示頁面棧的情況，請勿修改頁面棧，以免造成頁面狀態錯誤。

　　官網介紹：https://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程式碼

uni-app 微信小程式全域性分享 
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

 

相關文章