uniapp+vue3小程序分享

今日学习

小程序分享功能

实现分享功能的方法

在uniapp中实现小程序分享功能，主要涉及配置页面分享信息、全局混入和自定义分享按钮三种方式。微信小程序为

配置页面级分享信息

分享好友

在页面的script中定义onShareAppMessage生命周期函数，设置分享信息：

javascript 复制代码

 onShareAppMessage(()=>{
   
    return {
      title: '自定义分享标题',
      path: '/pages/index/index',
      imageUrl: '分享图片，默认为页面展示内容'
    }
  
})

title为分享标题，path为分享路径必须带上/，imageUrl为分享图片。

分享朋友圈

在页面的script中定义onShareTimeline生命周期函数，设置分享信息

javascript 复制代码

// 自定义分享到朋友圈
onShareTimeline(() => {
    
    return {
        title：'标题',
        query: `当前页面路径携带的参数`,
        imageUrl: '图片',
    }
})

注意：分享朋友圈只能分享转发当前页面，不支持自定义路径

此时已经可以发现点击右上角的胶囊三个点分享已经亮起！！！

自定义按钮触发分享

通过button组件设置open-type="share"属性：

html 复制代码

<button open-type="share">分享给好友</button>

点击该按钮会触发当前页面的onShareAppMessage函数。

全局混入

新建页面 wxMiniShare.ts

javascript 复制代码

import { reactive } from 'vue'

// 导出包含生命周期钩子的对象
export default function useShare() {
    const miniShareOptions = reactive({
        // 分享标题
        title: '',
        //页面 path，不建议直接配置分享哪个页面就配置哪个页面的路径，有些页面不建议分享，如订单页，所以默认都是分享首页
        path: '/pages/index/index',
        // 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4
        imageUrl: '',
    })

    return {
        // 发送给朋友
        onShareAppMessage() {
            return {
                ...miniShareOptions,
            }
        },
        // 分享到朋友圈
        onShareTimeline() {
            return {
                title: miniShareOptions.title,
                imageUrl: miniShareOptions.imageUrl,
            }
        },
    }
}

main.ts

javascript 复制代码

import useShare from './mixins/wxMiniShare'

export function createApp() {

    // 全局注册分享功能
    app.mixin(useShare())

}

上述配置完之后，小程序的每个页面上转发给朋友的按钮就都激活了，这时候已经满足每个页面有分享按钮的需求了，但是有些页面如文章详情页，需要根据不同文章做不同的分享配置。

页面覆盖全局混入的转发

javascript 复制代码

<script setup lang="ts">

// 自定义分享到朋友圈
onShareTimeline(() => {
    
    return {
        title：'标题',
        query: `当前页面路径携带的参数`,
        imageUrl: '图片',
    }
})

onLoad(() => {
    
    // 自定义分享给朋友
    onShareAppMessage(() => {
        return {
            title:'标题',
            path: `页面路径`,
            imageUrl: '图片',
        }
    })
})

</script>

转发好友要覆盖掉全局混入的话，必须写入 onLoad 生命周期里面

注意事项

不同小程序平台对分享功能的支持存在差异，微信小程序最全面，其他平台如支付宝、百度等可能有功能限制。

分享路径path应使用绝对路径，带参数时可拼接查询字符串。分享图片建议使用本地路径或网络URL，部分平台对图片大小有限制。

通过合理配置分享信息和灵活使用分享按钮，可以有效提升小程序的传播效果。实际开发时应测试各平台的兼容性。