uniapp 微信小程序分享

除了点击程序中某个按钮触发分享，还可以在点击微信小程序右上角的三个点按钮时触发分享，这种形式一般用来分享小程序到微信好友或是朋友圈。

在默认情况下，如果没有配置关于右上角分享的功能代码，是无法实现分享到微信朋友圈的，可以看到功能按钮是置灰的状态。

所以在 uniapp 中，如果我们希望开启分享功能，或是配置分享的页面的封面和打开的页面，一般会封装一个关于分享的文件，来实现微信小程序右上角分享的功能。

分享代码的封装

首先新建一个 share.js 文件，添加如下代码：

• onShareAppMessage：分享到微信好友
• onShareTimeline：分享到朋友圈
• path：默认是当前页面，必须是以‘/’开头的完整路径
• imageUrl：封面图片路径（可以是本地文件路径、代码包文件路径或者网络图片路径），可以不配置此参数（使用默认截图），图片长宽比是 5:4
• 可以在 onShareTimeline 代码段外添加 // #ifdef MP-WEIXIN //#endif，表示只在微信环境中执行此段代码

 export default {
        data() {
            return {
                mpShare: {
                    title: "",// 分享的标题
                    path: '/pages/index/home', // 分享的页面路径
                    imageUrl: '/static/images/cover.jpg' // 封面图片路径
                }
            }
        },
        // 分享给微信好友
        onShareAppMessage(res) {
            return this.mpShare
        },
        // 分享到朋友圈
        onShareTimeline(res) {
            return this.mpShare
        }
    }

使用：

在 main.js 文件中引入之后就可以使用小程序右上角的分享功能了。

import share from '@/util/share.js'
Vue.mixin(share)