uniapp實現(xiàn)微信小程序全局【發(fā)送給朋友】、【分享到朋友圈】、【復制鏈接】

在開發(fā)微信小程序的時候，發(fā)現(xiàn)【發(fā)送給朋友】、【分享到朋友圈】、【復制鏈接】功能，灰色不可用。

很常見的功能，但是這幾個功能，并不是你項目建起來了就有的。

1.【發(fā)送給朋友】使用 onShareAppMessage 這個方法

如果你的小程序，發(fā)現(xiàn)他的【轉(zhuǎn)發(fā)給朋友】的按鈕時灰色的，不能點擊，那么說明這個小程序沒有寫這部分的代碼。

2.【分享到朋友圈】使用 onShareTimeline 方法

onShareAppMessage和onShareTimeline方法有一個坑，就是每個頁面都得單獨寫一份。

3.【復制鏈接】注意這個功能不需要開發(fā)者手動寫方法，如果【轉(zhuǎn)發(fā)給朋友】這個功能灰色不可用，【復制鏈接】也會不可用。總之想要復制鏈接，就先開通【轉(zhuǎn)發(fā)給朋友】吧。

開發(fā)過小程序的朋友們應該都遇到這樣的情況，可能很多個頁面有相同的函數(shù)，例如onShareAppMessage，有什么最佳實踐嗎，應該如何處理呢？
uniapp實現(xiàn)微信小程序全局【發(fā)送給朋友】、【分享到朋友圈】、【復制鏈接】

主要使用 Vue.js 的 全局混入

1.創(chuàng)建一個全局分享的js文件。示例文件路徑為：./utils/share.js ，在該文件中定義全局分享的內(nèi)容：

export default {
    data() {
        return {}
    },
    //1.發(fā)送給朋友
    onShareAppMessage() {},
    //2.分享到朋友圈
    onShareTimeline() {},
}


2.在項目的 main.js 文件中引入該 share.js 文件并使用 Vue.mixin() 方法將之全局混入：

// 導入并掛載全局的分享方法
import share from './utils/share.js'
Vue.mixin(share)


3.如果在特定頁面需要自定義分享內(nèi)容，也仍舊可以使用頁面的 onShareAppMessage() 和 onShareTimeline() 方法自定義分享的內(nèi)容，全局的分享會被頁面定義的分享內(nèi)容覆蓋。