跳至主要內容

裂变分享

大约 7 分钟

介绍

提供移动端内嵌web使用，包括微信、qq、微博、facebook、twitter、line等

更新说明

  • 新增is_random参数，随机路径模式，用于微信防屏蔽，页面上报会去掉随机路径，分享时候会补充随机路径

功能描述

  • 设置微信、qq、微博分享文案与分享链接。
  • 打开facebook、twitter、line、weibo的分享并设置分享文案与链接。
  • 集成页面访问统计，统计时会记录传播深度。
  • 针对授权、参加活动、完成活动指定类型进行上报。
  • 可自定义事件与参数进行上报统计。
  • 针对二维码图、其它渠道，获取分享监控的链接。

使用说明

  • Web发布系统中，项目类型需要使用H5传播
  • 不能混合其它的设置分享相关组件，需要都去掉，比如：MobiShare和MyLog等
  • 组件必须先初始化，即调用init函数后，才可以使用
  • 国内项目，设置分享，使用setShare设置分享信息和地址，海外的用openShare是直接打开分享(weibo也可以用)，浏览器也可以用
  • loginReport、joinReport、activityReport为固定事件上报，按需要调用
  • shareReport 在 组件无法提供需要的分享设置与行为时候，在分享行为产生后调用此上报
  • report为自定义事件上报，需要填monitor参数，用来筛选上报的类型，需要使用英文，还可以顺便上报点别的参数（名称都是自定义，尽量用英文），desc为对应中文描述
  • getShareUrl为提供给非正常分享渠道使用的裂变分享地址，比如：二维码图，广告渠道等

特别注意事项

  • 页面请不要引用任何跟分享相关的sdk文件，比如：jweixin.js、qqapi.js等，分享组件会引用
  • 页面请不要调用任何分享sdk相关的函数，比如：wx.onMenuShareTimeline 这类
  • 页面需要使用微信sdk的其它api，可以在init中传入需要的列表即可
  • 遇到页面有授权跳转(静默授权也算)，需要将当前的URL，即window.location.href写在redirect_uri这种跳转地址中，不要写死一个地址
  • 页面有授权跳转的话(静默也算)，setShare需要再授权成功后再调用(微博内会重写当前URL为分享地址)
  • 需要给 长按保存的 二维码图的img标签，添加class="js_mshare_qrcode"，组件则会上报长按保存事件
  • 如果页面分享无法通过setShare和openShare方式进行分享，请务必要调用getShareUrl获取分享地址，将返回值分享出去
  • 微博客户端内的分享，使用openShare方式 (目前只支持文案和链接)

引入

通过以下方式来全局注册组件，更多注册方式请参考Vue3-Base说明。

const app = createApp()

// 依赖复制插件
await import("clipboard").then(ret => window.ClipboardJS = ret.default);

const [MShare] = await VueBase.require(["nie.vue3.mshare"]);
app.use(MShare);

app.mount("#app");

代码演示

初始化

<feg-mshare
    :="{
        debug: false,
        hideMoments: false,
        hideFriend: false,
        wxapi: [],
        tag: [],
        activity: '',
        isRandom: false
    }"
></feg-mshare>

组件方法

<template>
    <feg-mshare ref="MShareRef"></feg-mshare>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const MShareRef = ref(null);

watchEffect(() => {
    if (MShareRef.value) {
        MShareRef.value.getClient();
    }
});
</script>

依赖注入

<template>
    <feg-mshare ref="MShareRef">
        <Child />
    </feg-mshare>
</template>
<script setup>
import { ref, provide } from 'vue';
const MShareRef = ref(null);
provide("MShare", MShareRef);
</script>
<script setup>
import { inject, watchEffect } from 'vue';
const MShare = inject('MShare');

watchEffect(() => {
    if (MShare.value) {
        MShare.value.getClient();
    }
});
</script>

API

Props

参数说明类型备注
debug开启调试，则会在左下角显示上报的logboolean选填
hideMoments隐藏"微信"分享到朋友圈的按钮，默认是false，不隐藏，非微信无作用boolean选填
hideFriend隐藏"微信"分享到朋友圈的按钮，默认是false，不隐藏，非微信无作用boolean选填
wxapi"微信"自定义api接口列表(jsApiList)，默认已经有分享和菜单隐藏相关的，必须是数组，默认是空array选填
tag"微信"自定义tag开放标签列表(openTagList)，必须是数组，默认是空array选填
activity上报的基地址，默认为当前页面URL，如需要，则使用类似：yys.163.com/m/fab/ 值string选填
isRandom随机路径模式，默认为false，设置了，组件上报会去掉随机路径，分享会自动补充随机路径boolean选填

事件

名称说明回调参数
ready"微信"的wx.ready回调，默认为空，非微信无作用-

Slots

名称说明返回值
default容器内容-
loadingready之前显示loading，ready之后显示default-

方法

    //设置分享内容，海外调用无效
    MShare.setShare({
        title : '设置分享标题',
        desc : '设置分享内容',
        moments_title : '设置分享朋友圈标题', //该字段在有需要单独设置分享朋友圈情况下才设置，否则不需要
        url : 'http://test.nie.163.com/test_html/nie-js/mshare/',
        imgurl : 'https://webinput.nie.netease.com/img/hd/icon.png',
        callback : function(ret){

            //目前只有微信分享type才有值，其余均为0
            //1为好友，2为朋友圈，3为QQ，4为Qzone
            //ret.channel为客户端类型
            if(ret.type)alert("分享到了："+ret.type_en);
        }
    });

    //弹层分享(facebook,twitter,line,weibo,qqzone,yixin)使用，打开分享
    MShare.openShare({
        title : '设置分享标题',
        desc : '设置分享内容',
        url : 'http://test.nie.163.com/test_html/nie-js/mshare/',
        imgurl : 'https://webinput.nie.netease.com/img/hd/icon.png',
        type : 'facebook/twitter/line/weibo/qqzone/yixin', //当需要在浏览器中分享，则要指定分享渠道
        callback : function(ret){

            //此为打开分享窗口后的回调（非分享成功）
            //ret.channel为客户端类型
        }
    });

    //原版mobiShareV2中的分享弹层功能
    //需要先使用了 setShare 后，才可以调用
    MShare.showShare({
        guideText : "", //微信分享引导语，非必填
        qrcodeIcon : "" //二维码中间的图标地址，非必填
    });

    //修改分享的内容，需要修改哪个就填哪个，不修改就不传该参数
    MShare.updateShare({
        title : '设置修改分享标题',
        desc : '设置修改分享内容',
        url : 'http://test.nie.163.com/test_html/nie-js/mshare/',
        imgurl : 'https://webinput.nie.netease.com/img/hd/icon.png'
    });

    //授权登录后上报
    MShare.loginReport({
        user_id : 'openid', //一般为用户的openid值
        user_name : 'abcdefg', //用户的昵称
        sex : 'male',   //用户的性别
        login_from : 'twitter', //授权登录的类型，比如：twitter、line、wechat 之类
        avatar : 'https://' //头像地址，如果没有，不传此字段
    });

    //参加某活动/预约等行为上报，可添加自定义参数
    MShare.joinReport({
        action_name : 'xyq_order_join'  //内容为自定义名称，方便统计
    });

    //完成某个活动/领奖等行为上报，可添加自定义参数
    MShare.activityReport({
        activity_name : 'xyq_order_finish'  //内容为自定义名称，方便统计
    });

    //分享后上报，可添加自定义参数
    MShare.shareReport({

    });

    //自定义事件上报，比如：按了某个按钮
    //上报的字段其他自定义
    MShare.report({
        monitor : 'press_start_btn', //必填，需要使用英文，上报的关键字
        desc : '启动按钮点击', //上报的描述，这里使用中文
        game_id : '游戏内的账号ID'  //可以上报多个自定义属性与值，这里是举例子，并非一定是game_id，可以为其他数据，或者没有
    });

    //根据分享地址，获取最终传播带上报的地址
    //url：分享出去的地址
    //channel：分享出去后的作用，比如：channel=qrcode为用于生成二维码图片，channel=xxxx 表明页面最终的使用的渠道名
    MShare.getShareUrl(url,channel);

    //获取当前客户端类型，比如：qq、wechat、weibo、facebook、music 等
    MShare.getClient();

常见问题

初始化

一次性传参，请勿异步修改。

<template>
    <feg-mshare :hideMoments="hideMoments" :hideFriend ="hideFriend"></feg-mshare>
</template>
<script setup>
import { ref } from 'vue';

const hideMoments = ref(false);
const hideFriend = ref(false);

hideMoments.value = true; // 同步修改有效
setTimeout(() => hideFriend.value = true, 1000); // 异步修改无效
</script>

容器组件只能初始化一次。多页面应用推荐在根组件作为容器。

<template>
    <feg-mshare>
        <RouterView />
    </feg-mshare>
</template>

组件默认样式

https://test.nie.163.com/test_cdn/nie-vue3/m/zj/20240613114049/mshare/css/style.css

弹窗自定义样式问题

弹窗使用了Teleport组件，不支持scoped。https://github.com/element-plus/element-plus/issues/10515

上次编辑于:
贡献者: wb.yaodewei
Copyright © FEG