Fusions

Appearance

小程序分享 ​

此功能是对uni的 onShareAppMessage 生命周期 的封装，可以方便的实现小程序分享功能。

这里说的小程序，指的是 "微信小程序、QQ小程序、百度小程序、支付宝小程序、头条小程序等"

由于小程序的分享（微信、头条平台），需要监听页面的 onShareAppMessage 生命周期，小程序需要在页面声明了此生命周期，点击右上角的 "胶囊" 才会有分享功能，而一般情况下，我们希望每一个页面都可以分享，那就需要每一个页面都写一遍这个生命周期，这显然很繁琐的。

基于以上，fusions-ui 通过 mixin 的形式，给每一个页面注入了 onShareAppMessage 生命周期，让您简单引入，无需任何后续操作，即可让每一个页面都有分享功能（仅针对小程序）

平台差异说明 ​

APPH5微信小程序QQ小程序支付宝小程序百度小程序头条小程序
XX√√√√√

基础用法 ​

需要注意的是，小程序（uni）没有提供类似的 getNavigationBarTitle 这样的接口，所以我们无法获取当前页面导航栏的标题，我们想要每个页面个性化的分享标题，需要手动设置，否则默认为小程序的名称。

注意

分享功能默认是关闭的，但是我们写好各项配置，您只需要在 main.js 中进行相应的配置即可使用，默认关闭，是因为某些用户不需要此功能

打开小程序分享功能：

按照下面的方法将 mpShare 设置为 true 开启小程序分享功能，非小程序端设置无效

javascript
// main.js
import FusionsUI from 'fusions-ui'

// #ifdef VUE2
Vue.use(FusionsUI, { mpShare: true });
// #endif
// #ifdef VUE3
app.use(FusionsUI, { mpShare: true });
// #endif

分享功能，一般有三个参数，如下：

javascript
// 此对象已集成到uni.$fu中，内部属性如下
uni.$fu.mpShare = {
    title: '', // 默认为小程序名称，可自定义
    path: '', // 默认为当前页面路径，一般无需修改，QQ小程序不支持
    // 分享图标/封面,路径可以是本地文件路径、代码包文件路径或者网络图片路径
    // 支持PNG及JPG，默认为当前页面的截图
    imageUrl: ''
}

以上这些，fusions-ui已通过 mixin 集成，当某一个页面需要您自定义分享信息时，可以通过 uni.$fu.mpShare 对其进行修改，在页面的 onLoad 生命周期修改即可

Vue2用法 ​
html
<script>
    export default {
        onLoad() {
            uni.$fu.mpShare.title = '自定义分享标题'
        }
    }
</script>
Vue3 + setup 用法 ​
html
<script setup>
    import { onReady } from '@dcloudio/uni-app';

    onReady(() => {
        uni.$fu.mpShare.title = '自定义分享标题'
    })
</script>

重写 "onShareAppMessage" 生命周期 ​

如果您基于自己的一些业务逻辑，需要更加自定义的实现逻辑，可以在页面中重写 onShareAppMessage 生命周期即可覆盖fusions-ui通过 mixin 监听的 onShareAppMessage 生命周期。

Vue2用法 ​
html
<script>
    export default {
        // 这里如果写成onShareAppMessage: res => { ... }形式的箭头函数，在内部会无法获得this
        onShareAppMessage(res) {
            if (res.from === 'button') {// 来自页面内分享按钮
                console.log(res.target)
            }
            return {
                title: '自定义分享标题',
                path: '/pages/test/test?id=135'
            }
        }
    }
</script>
Vue3 + setup 用法 ​

这里建议在 onReady 周期函数中实现，或者给一定的延时，避免不能重写的情况。

html
<script setup>
    import { onReady, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
    onReady(() => {
        onShareAppMessage(()=>{
            return {
                title: '自定义分享标题',
                path: '/pages/test/test?id=135'
            }
        })
    })
</script>

分享到朋友圈 ​

此功能为微信小程序最新加入的功能，仅适用于微信小程序，fusions-ui也全局监听了此生命周期

同理，您也可以在页面中重写 onShareTimeline 生命周期即可覆盖 fusions-ui 通过 mixin 监听的 onShareTimeline 生命周期。

Vue2用法 ​
html
<script>
    export default {
        onShareTimeline(res) {
            if (res.from === 'button') {// 来自页面内分享按钮
                console.log(res.target)
            }
            return {
                title: '自定义分享标题',
                path: '/pages/test/test?id=135'
            }
        }
    }
</script>
Vue3 + setup 用法 ​

这里建议在 onReady 周期函数中实现，或者给一定的延时，避免不能重写的情况。

html
<script setup>
    import { onReady, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
    onReady(() => {
        onShareTimeline(()=>{
            return {
                title: '自定义分享标题',
                path: '/pages/test/test?id=135'
            }
        })
    })
</script>