uniapp開發微信小程序通過 mixin 統一設置頁面的分享 onShareAppMessage

最近使用uniapp 開發微信小程序的時候，,發現實現分享轉發的話，要每個頁面都寫一個 onShareAppMessage，這樣代碼太臃腫，因此想起使用vue的mixins 可以設置一個全局的分享

vue相關混入 (mixin) 的網址：https://cn.vuejs.org/v2/guide/mixins.html

實現代碼如下:

1、創建一個 mixins ，我的文件路徑爲 ： static/js/mixins/share.js

export default{
    data(){
        return {
                       //設置默認的分享參數
            share:{
                title:'ALAPI',
                path:'/pages/index/index',
                imageUrl:'',
                desc:'',
                content:''
            }
        }
    },
    onShareAppMessage(res) {
        return {
            title:this.share.title,
            path:this.share.path,
            imageUrl:this.share.imageUrl,
            desc:this.share.desc,
            content:this.share.content,
            success(res){
                uni.showToast({
                    title:'分享成功'
                })
            },
            fail(res){
                uni.showToast({
                    title:'分享失敗',
                    icon:'none'
                })
            }
        }
    }
}

2、全局使用, 在 main.js 裏面 添加全局的 mixin

import share from '@/static/js/mixins/share.js'

Vue.mixin(share)

3、這樣設置後，每個頁面都會有分享按鈕了,在頁面的 data 裏面設置和 mixin 一樣的參數就可以修改分享的參數了

export default {
data(){
        return {
                       //設置默認的分享參數
            share:{
                title:'ALAPI',
                path:'/pages/index/index',
                imageUrl:'',
                desc:'',
                content:''
            }
        }
    },
}