• react 网页/app复制分享链接到剪切板，分享到国外各大社交平台，通过WhatsApp方式分享以及SMS短信方式分享链接内容

    1.需求 

    最近在做一个国际网站app,需要把app中某个页面的图文链接分享到国外各大社交平台上(facebook,whatapp,telegram,twitter等),以及通过WhatApp聊天方式分享，和SMS短信方式分享链接内容，该怎么做呢？图示如下:

    分享到国外各大社交平台： 

    操作说明：

            当点击COPY URL时,复制分享链接到剪切板，然后点击各个分享平台图标，调用分享apk或者方法，从而调起社交平台app或者对应的web网页 ，进行分享操作

    通过WhatApp方式，SMS方式分享： 

     操作说明：

            1.WhatsAPP分享：

                    程序生成随机电话号码，默认选中第一个电话号码，点击WhatsAPP后，调取WhatApp相关方法接口，进行分享操作，然后电话号码变灰，当再次点击WhatsAPP时，触发下一个电话号码操作，图示如下：

            2.SMS方式分享

                    点击SMS按钮时，触发SMS接口请求，调用SMS相关url进行分享操作

    2.实现分享到国外各大社交平台

    先上代码，通过点击 COPY URL 复制分享链接到剪切板，然后点击各个平台图标，实现分享操作

    COPY URL,点击平台图标相关代码： 

    1. import React, {useState} from "react";
    2. import axios from "axios";
    3. import Scroll from "../../components/Scroll";
    4. import {CountDown, Steps, Tabs, Toast, Popup, Cell, Dialog, Swiper, NoticeBar, Image} from "react-vant";
    5. import {CopyToClipboard} from "react-copy-to-clipboard";
    6.  
    7. const Index = () => {
    8.         
    9.     //分享url:拼接要分享的页面url,以及带上参数
    10.     //注意：这里参数有的分享平台不支持?格式，可以使用简化格式,eg：http:www.test.com/target_page/100/param
    11.    const GetUrl = (tagId) => {
    12.           return `${window.location.origin}/target_page?param=${tagId}`;
    13.    };
    14.     
    15.     //各个分享平台对应的url
    16.     const GetWhatsAppUrl = (tagId) => {
    17.       //也可以用这个`https://api.whatsapp.com/send?text=` + encodeURIComponent("test") + encodeURIComponent("\n\n" + GetInviteWheelUrl(tagId));
    18.       return encodeURI(
    19.       `whatsapp://send?text=test\n${GetUrl(tagId)}`
    20.   );
    21. };
    22.  
    23.     const GetTelegramUrl = (tagId, text) => {
    24.       return encodeURI(
    25.       "https://t.me/share/url?url=" + encodeURIComponent(GetInviteWheelUrl(tagId)) + "&text=" + encodeURIComponent(text)
    26.       );
    27.     };
    28.  
    29.     const GetTwitterUrl = (tagId, text) => {
    30.       return encodeURI(
    31.       "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text) + "&url=" + encodeURIComponent(GetInviteWheelUrl(tagId))
    32.       );
    33.     };
    34.  
    35.     const GetFacebookUrl = (tagId, text) => {
    36.       return "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(GetUrl(tagId)) + "&t=" + encodeURIComponent(text)
    37.     };
    38.  
    39.  
    40.     //分享到社交软件
    41.     const shareFriend = (type) => {
    42.         let shareText = "分享说明" ;
    43.         switch (type) {
    44.             case "facebook":
    45.                 if (window.document) {
    46.                     if (window.document.getElementById("og_url")) {
    47.                         window.document.getElementById("og_url").content=GetUrl(rid);
    48.                     }
    49.                     if (window.document.getElementById("og_description")) {
    50.                         window.document.getElementById("og_description").content=shareText;
    51.                     }
    52.                     if (window.document.getElementById("og_title")) {
    53.                         window.document.getElementById("og_title").content=shareText;
    54.                     }
    55.                     if (window.document.getElementById("og_image")) {
    56.                         window.document.getElementById("og_image").content=window.location.origin + "../images/banner_x2.png";
    57.                     }
    58.                 }
    59.  
    60.                 window.location.href = GetFacebookUrl(tagId, shareText);
    61.                 return;
    62.             case "whatApp":
    63.                 if (window.document) {
    64.                     if (window.document.getElementById("og_url")) {
    65.                         window.document.getElementById("og_url").content=GetUrl(tagId);
    66.                     }
    67.                     if (window.document.getElementById("og_description")) {
    68.                         window.document.getElementById("og_description").content=shareText;
    69.                     }
    70.                     if (window.document.getElementById("og_title")) {
    71.                         window.document.getElementById("og_title").content=shareText;
    72.                     }
    73.                     if (window.document.getElementById("og_image")) {
    74.                         window.document.getElementById("og_image").content=window.location.origin + "../images/banner_x2.png";
    75.                     }
    76.                 }
    77.  
    78.                 window.location.href = GetWhatsAppUrl(tagId, shareText);
    79.                 return;
    80.             case "telegram":
    81.                 window.location.href = GetTelegramUrl(tagId, shareText);
    82.                 return;
    83.             case "twitter":
    84.                 if (window.document) {
    85.                     if (window.document.getElementById("tw_description")) {
    86.                         window.document.getElementById("tw_description").content=shareText;
    87.                     }
    88.                     if (window.document.getElementById("tw_title")) {
    89.                         window.document.getElementById("tw_title").content=shareText;
    90.                     }
    91.                     if (window.document.getElementById("tw_card")) {
    92.                         window.document.getElementById("tw_card").content=window.location.origin + "../images/banner_x2.png";
    93.                     }
    94.                     if (window.document.getElementById("tw_card")) {
    95.                         window.document.getElementById("tw_card").content=window.location.origin + "../images/banner_x2.png";
    96.                     }
    97.                     if (window.document.getElementById("tw_image")) {
    98.                         window.document.getElementById("tw_image").content=window.location.origin + "../images/banner_x2.png";
    99.                     }
    100.                     if (window.document.getElementById("tw_url")) {
    101.                         window.document.getElementById("tw_url").content=GetUrl(rid);
    102.                     }
    103.                 }
    104.  
    105.                 window.location.href = GetTwitterUrl(tagId, shareText);
    106.                 return;
    107.         }
    108.     }
    109.  
    110.  return (
    111.         <div class={style.main}>
    112.                  <ul class={style.share_1_link}>
    113.                             <li class={style.share_1_link_intro} onClick={() => shareFriend("facebook")}>
    114.                                 <div class={style.share_1_link_img}>
    115.                                     <a href="javascript:;"  rel="noreferrer">
    116.                                         <img src={"../images/share3.svg"} />
    117.                                     a>
    118.                                 div>
    119.                                 <div class={style.share_1_link_text}>
    120.                                     Facebook
    121.                                 div>
    122.                             li>
    123.                             <li class={style.share_1_link_intro}  onClick={() => shareFriend("whatApp")}>
    124.                                 <div class={style.share_1_link_img}>
    125.                                     <a href="javascript:;" rel="noreferrer">
    126.                                         <img src={"../images/share2.svg"} />
    127.                                     a>
    128.                                 div>
    129.                                 <div class={style.bottom_share_1_link_text}>
    130.                                     WhatApp
    131.                                 div>
    132.                             li>
    133.                             <li class={style.share_1_link_intro}  onClick={() => shareFriend("telegram")}>
    134.                                 <div class={style.share_1_link_img}>
    135.                                     <a href="javascript:;" rel="noreferrer">
    136.                                         <img src={"../images/share3.png"} />
    137.                                     a>
    138.                                 div>
    139.                                 <div class={style.share_1_link_text}>
    140.                                     Telegram
    141.                                 div>
    142.                             li>
    143.                             <li class={style.share_1_link_intro}  onClick={() => shareFriend("twitter")}>
    144.                                 <div class={style.share_1_link_img}>
    145.                                     <a href="javascript:;"  rel="noreferrer">
    146.                                         <img src={"../images/share4.svg"}/>
    147.                                     a>
    148.                                 div>
    149.                                 <div class={style.share_1_link_text}>
    150.                                     Twitter
    151.                                 div>
    152.                             li>
    153.                             <li class={style.share_1_link_intro}>
    154.                                 <div class={style.share_1_link_img}>
    155.                                     <a href={"mailto:test@test.com?body" + GetUrl(tagId)} rel="noreferrer">
    156.                                         <img src={"../images/share5.svg"}/>
    157.                                     a>
    158.                                 div>
    159.                                 <div class={style.share_1_link_text}>
    160.                                     Email
    161.                                 div>
    162.                             li>
    163.                         ul>
    164.         div>
    165.  
    166. <div class={style.copy_url_area}>
    167.                             <div class={style.copy_url_input}>
    168.                             <span id="share_url">
    169.                                 {GetUrl(tagId)}
    170.                             span>
    171.                             div>
    172.                             <CopyToClipboard
    173.                                 text={GetUrl(tagId)}
    174.                                 onCopy={() => {
    175.                                     Toast.success({
    176.                                         message: "Copy Successfully",
    177.                                     });
    178.                                 }}
    179.                             >
    180.                                 <div class={style.action_btn} style={{ flexShrink: 0 }}>
    181.                                     COPY URL
    182.                                 div>
    183.                             CopyToClipboard>
    184.                         div>
    185.     ）
    186. }
    187.  
    188. export default Index;

    对上面代码的说明：

            当点击CPOY URL 按钮时，调用react-copy-to-clipboard组件复制分享链接到剪切板，点击平台分享图片时，调用shareFriend()方法，进行分享配置操作，获取分享的url,以及调用各个平台分享的api,然后配置head中分享的meta(如下代码,为什么需要配置meta,因为国外很多平台在分享图文链接时，是通过爬虫来抓取meta数据进行分享数据展示的)，操作后，app会调起对应平台的app或者打开对应的web页面进行分享操作

    html代码：

    1. <head>
    2. <meta id="og_url" property="og:url" content="" />
    3.     
    4. 	<meta id="og_description"  property="og:description" content="" />
    5. 	<meta id="og_image"  property="og:image" content="" />
    6. 	<meta id="og_title"  property="og:title" content="" />
    7.     
    8.     
    9. 	<meta  id="tw_card"  name="twitter:card" content="">
    10. 	<meta  id="tw_title" name="twitter:title" content="">
    11. 	<meta  id="tw_description" name="twitter:description" content="">
    12. 	<meta  id="tw_image" name="twitter:image" content="">
    13. 	<meta id="tw_url" property="twitter:url" content="" />
    14. head>

     对上面代码说明：

            meta中的数据，就是各个平台爬虫要抓取的分享数据，根据不同平台，meta的name不一样，具体情况可看各个平台官方文档

    3.实现通过WhatsAPP以及SMS分享操作

    • 程序生成随机电话号码，默认选中第一个电话号码，点击WhatsAPP后，调取WhatApp相关方法接口，进行分享操作，然后电话号码变灰，当再次点击WhatsAPP时，触发下一个电话号码操作
    • 点击SMS按钮时，触发SMS接口请求，调用SMS相关url进行分享操作

    代码如下： 

    1. import React, {useState} from "react";
    2. import axios from "axios";
    3. import Scroll from "../../components/Scroll";
    4. import {CountDown, Steps, Tabs, Toast, Popup, Cell, Dialog, Swiper, NoticeBar, Image} from "react-vant";
    5. import {CopyToClipboard} from "react-copy-to-clipboard";
    6.  
    7. const SinNumberGenerator = (x, offset) => {
    8.   return (Math.sin(x + offset) + 1) / 2;
    9. };
    10.  
    11. //生成随机的分享电话号码:count 电话号码个数
    12. const SharePhoneList = (count) => {
    13.     let list = [];
    14.     for (let i = 0; i < count; i++) {
    15.         let phone = (
    16.             SinNumberGenerator(((NowTimestamp / 100000) % 100000) / 50000 / Math.PI, i) * (99999 - 1000) +
    17.             1000
    18.         ).toFixed(0);
    19.         if (phone.length < 5) {
    20.             phone = "0" + phone;
    21.         }
    22.         list.push({
    23.             phone: phone, //电话号码
    24.             state: Math.floor(Math.random()*2),  //发送状态
    25.         });
    26.     }
    27.  
    28.     return list;
    29. };
    30.  
    31. const Index = () => {
    32.     
    33.     //分享电话号码初始化
    34.     const [sharePhoneList, setSharePhoneList] = useState([]);
    35.     //当前选中电话号码索引
    36.     const [checkedPhoneIndex, setCheckedPhoneIndex] = useState(0);
    37.     //设置电话号码列表
    38.     setSharePhoneList(SharePhoneList(20));
    39.     setCheckedPhoneIndex(0);
    40.  
    41.     //分享url:拼接要分享的页面url,以及带上参数
    42.     //注意：这里参数有的分享平台不支持?格式，可以使用简化格式,eg：http:www.test.com/target_page/100/param
    43.    const GetUrl = (tagId) => {
    44.           return `${window.location.origin}/target_page?param=${tagId}`;
    45.    };
    46.     
    47.    const GetSeedWhatsAppUrl = (phone, tagId, text) => {
    48.   return `https://api.whatsapp.com/send?phone=${phone}&text=` + encodeURIComponent(text) + encodeURIComponent("\n\n" + GetUrl(tagId));
    49. };
    50.  
    51.   const GetSmsUrl = (phone, tagId, text) => {
    52.   return "sms:/open?addresses=" + phone + "&body=" + encodeURIComponent(text + GetUrl(tagId));
    53. };
    54.  
    55.  
    56.   //发送whatsApp,sms
    57.   const SendMessage = (type= "whatsApp") => {
    58.         if (checkedPhoneIndex >= 20) {
    59.             return;
    60.         }
    61.  
    62.         let phoneList = [];
    63.         let checkedPhone = "";
    64.         sharePhoneList.map((value, index) => {  //设置发送的号码状态
    65.             if (index === checkedPhoneIndex) {  //如果当前电话号码索引和遍历的索引相同，则设置电话号码状态为已完成
    66.                 phoneList.push({
    67.                     phone:value.phone,
    68.                     state: 1,
    69.                 });
    70.                 checkedPhone = value.phone;
    71.             } else {
    72.                 phoneList.push({
    73.                     phone:value.phone,
    74.                     state: value.state,
    75.                 });
    76.             }
    77.         });
    78.  
    79.  
    80.         setCheckedPhoneIndex(checkedPhoneIndex + 1);
    81.         //更新电话号码列表状态
    82.         setSharePhoneList(phoneList); 
    83.        
    84.  
    85.         let link = GetSeedWhatsAppUrl(checkedPhone, tarId);
    86.         //发送短信
    87.         if (type === "sms") {
    88.             link = GetSmsUrl(checkedPhone, tarId);
    89.         }
    90.         window.location.href = link;
    91.     }
    92.  
    93.  return (
    94.         <div class={style.main}>
    95.                  <div class={style.bottom_share}>
    96.                         <div class={style.bottom_share_title}>
    97.                             Share 
    98.                         div>
    99.                         <div class={style.bottom_share_phones}>
    100.                             {sharePhoneList.map((value, index) => (
    101.                                     <div class={`${style.bottom_share_phone_info} ${(value.state ? style.bottom_share_phone_ok : "")}`} id={value.state}>
    102.                                             {value.phone}
    103.                                     div>
    104.                             ))}
    105.                         div>
    106.                         <div class={style.phone_send}>
    107.                             <div class={style.phone_send_info} onClick={() => SendMessage()}>
    108.                                 <div class={style.phone_send_text}>
    109.                                     <div class={style.phone_send_text1}>
    110.                                         Send message
    111.                                     div>
    112.                                     <div class={style.phone_send_text2}>
    113.                                         <span>on span>
    114.                                         <span class={style.phone_send_text2_font}>WhatsAPPspan>
    115.                                     div>
    116.                                 div>
    117.                                 <div class={style.phone_send_img}>
    118.                                     <img src={"../images/whatsApp.png"} style={{width: "80%"}}/>
    119.                                 div>
    120.                             div>
    121.                             <div class={style.phone_send_info} onClick={() => SendMessage("sms")}>
    122.                                 <div class={style.phone_send_img}>
    123.                                     <img src={"../images/sms.png"} style={{width: "80%"}}/>
    124.                                 div>
    125.                                 <div class={style.phone_send_text} style={{marginLeft: "-1rem"}}>
    126.                                     <div class={style.phone_send_text1}>
    127.                                         Send message
    128.                                     div>
    129.                                     <div class={style.phone_send_text2}>
    130.                                         <span class={style.phone_send_text2_font}>SMSspan>
    131.                                     div>
    132.                                 div>
    133.                             div>
    134.                         div>
    135.                     div>
    136.         div>
    137.     ）
    138. }
    139.  
    140. export default Index;

    css: 

    1. .bottom_share {
    2.   width: 100%;
    3.   margin-top: 1.3rem;
    4. }
    5. .bottom_share_title {
    6.   font-size: 0.9rem;
    7. }
    8.  
    9. .bottom_share_phones {
    10.   background-color: rgba(0, 0, 0);
    11.   color: #e6e3e3;
    12.   display: -ms-flexbox;
    13.   display: flex;
    14.   width: 96%;
    15.   font-size: 0.9rem;
    16.   -ms-flex-wrap: wrap;
    17.   flex-wrap: wrap;
    18.   -ms-flex-align: center;
    19.   align-items: center;
    20.   -ms-flex-pack: distribute;
    21.   -ms-flex-direction: row;
    22.   margin-top: 0.7rem;
    23.   padding-top: 0.5rem;
    24.   justify-content: flex-start;
    25.   flex-direction: row;
    26. }
    27.  
    28. .bottom_share_phone_info {
    29.   margin: 0.2rem 1.1rem;
    30. }
    31.  
    32. .bottom_share_phone_ok {
    33.   color: #555353;
    34. }
    35.  
    36. .phone_send {
    37.   width: 92%;
    38.   background-color: rgba(0,0,0);
    39.   display: flex;
    40.   margin-bottom: 1rem;
    41.   padding-left: 0.5rem;
    42.   padding-right: 0.5rem;
    43. }
    44.  
    45. .phone_send_info {
    46.   margin: 0.6rem 0.2rem 1rem 0.2rem;
    47.   display: flex;
    48.   background-color:  #e6e3e3;
    49.   flex-direction: row;
    50.   align-items: center;
    51.   justify-content: space-around;
    52.   padding-top: 0.35rem;
    53.   padding-bottom: 0.35rem;
    54. }
    55.  
    56. .phone_send_text {
    57.   display: flex;
    58.   color: #191717;
    59.   font-weight: 500;
    60.   font-size: 0.9rem;
    61.   flex-direction: column;
    62.   justify-content: center;
    63. }
    64.  
    65. .phone_send_text2_font {
    66.   font-weight: 900;
    67. }
    68.  
    69. .phone_send_img {
    70.   width: 30%;
    71. }

     好了，网页/app复制分享链接到剪切板，分享到国外各大社交平台，通过WhatsApp方式分享以及SMS短信方式分享链接内容操作基本完成

    4.拓展知识

    (1).Facebook

            Facebook的分享原理： 告诉Facebook你想要分享的url，Facebook爬虫机器人会主动向这个url发起爬虫操作，对这个url进行html解析，分别拿到相对于的html元素图谱，然后获取图谱中的内容并跳转到Facebook的分享页面并把获取到的内容渲染出来，后面只要点击提交分享的按钮就可以实现分享网页的功能了；对于国外第三方的分享元素图谱，一般是写在html的head部分，官方文档：https://developers.facebook.com/docs/sharing/webmasters/images/

    Facebook所对应的如下面所示：

    1. <html>
    2. <head>
    3. <meta property="og:type" content="website" />
    4. <meta property="og:url" content="要分享的链接" />
    5. <meta property="og:title" content="标题" />
    6. <meta property="og:description" content="简介" />
    7. <meta property="og:image" content="图片" />
    8. head>
    9. html>

    分享网页固定内容到Facebook

    • 使用浏览器自带分享功能 （只能分享到Facebook动态）
    • 使用js进行Facebook分享 （可分享到Facebook动态和好友）
    1. const url = "http://www.test.cn"
    2. const text = "share text"
    3. widnow.open("http:/www.facebook.com/share.php?u="+ encodeURIComponent(u) + "&t="+ encodeURIComponent(t), "sharer","toolbar=0,status=0,width=626,height=436")
    • 分享到Facebook好友（messenger） PC端：需要登录Facebook获取appid
    1. const url = "http://www.test.cn"
    2. widnow.open("https:/www.facebook.com/dialog/send?app_id=1 xxxx11&link="+url+"&redirect_uri="+url+"","_blank")
    • 移动端
    1. const url = "http://www.test.cn"
    2. widnow.open("fb-messenger://share/?link="+url）

    注意：

            如果meta已经写好了Facebook的分享内容，那么使用js改变mate分享内容是无效的，因为Facebook抓取meta是在js加载之前获取的，尽管通过js更改mate信息也无法改变Facebook已抓取到的信息，所以如果已经在head头部写好了meta的facebook分享内容，就无法通过js动态分享自定义文案

    分享网页自定义内容到Facebook

            前端编辑参数，调用第三方的分享地址，第三方回调你传的参数，解析里面meta信息，然后返回html页面，再执行js动态分享内容

    • 分析到Facebook动态（PC端和移动端都适用）
    1. let mateArr = [
    2.     'og:url','http://www.test.cn',
    3.     'og:title','title',
    4.     'og:description','description',
    5.     'og:image','http:/xxx/static/image/test.jpg',
    6.     'og:type','website'
    7.     ]
    8. let mataParams = mateArr.toString()
    9. window.open('http://www.facebook.com/sharer.php?u='+ encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`))
    •  分享到Facebook好友（messenger） PC端
    1. let mateArr = [
    2.     'og:url','http://www.test.cn',
    3.     'og:title','title',
    4.     'og:description','description',
    5.     'og:image','http://xxx/static/image/test.jpg',
    6.     'og:type','website'
    7.     ]
    8. let mataParams = mateArr.toString()
    9. window.open('https:/www.facebook.com/dialog/send?app_id=1xxx12&link='+ encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`)+'redirect_uri='+encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`)+'','_blank')
    • 移动端
    1. let mateArr = [
    2.     'og:url','http://www.test.cn',
    3.     'og:title','title',
    4.     'og:description','description',
    5.     'og:image','http://zzz/static/image/test.jpg',
    6.     'og:type','website'
    7.     ]
    8. let mataParams = mateArr.toString()
    9. widnow.open("fb-messenger://share/?link="+encodeURIComponent(`http://xxx/share/detail?meta=${metaParams}`)+""）

    在分享到Facebook上时，需要注意一下几点

    • 1.og:url 中的 url地址禁止携带参数，即 https://test.com/index.htm?key=search错误，若确实需要，请将参数放到目录层级中，如https://testcom/search/index.htm
    • 2.og:image 中的url地址只要能满足让爬虫爬取即可，是否携带参数都可以
    • 3.分享到Facebook上的图片的最佳比例是1.91：1（矩形图）或1：1（正方形图），最小尺寸是200200，低于此尺寸图片将不显示，推荐尺寸是1200630或600*315
    • 4.分享图片无法自己定义显示尺寸，使用og:image:width与og:image:height也不行
    • 5.og:title 标签不存在时，则默认读取title标签里的内容作为分享的title
    • 6.因为分享的内容采用的是爬虫的形式获取，所以在html页面一开始就要存在og：标签，供爬虫，而不可以动态的通过js脚本追加
    • 7.对于动态生成html的情况，当采用的是前后端一体的方式，如.jsp、.asp、haml等形式时,在后端动态生成参数，然后传递给前端页面即可
    • 8.对于前后端分离的情况，需要后端配合动态生成html页面
    • 9.对于分享的链接能否正常显示，可以通过Facebook分享调试器进行调试，并查看结果

    (2).WhatsApp

    原理与Facebook一样，通过爬虫获取html头部head部分的mate：og信息,有一点需要注意：WhatsApp分享到好友PC端和移动端都可以使用同一套代码,

    分享到网页版平台：https://web.whatsapp.com/send?text={内容}&url={链接}

    通用链接：https://wa.me/?text={内容}，会重定向到API网关然后通过url schema的方式唤起App

    1. <html>
    2. <head>
    3. <meta property="og:type" content="website" />
    4. <meta property="og:url" content="要分享的链接" />
    5. <meta property="og:title" content="标题" />
    6. <meta property="og:description" content="简介" />
    7. <meta property="og:image" content="图片" />
    8. head>
    9. html>
    1. const url = "http://www.test.cn"
    2. const text = "share"
    3. window.open("https://api.whatsapp.com/send?text="+encodeURIComponent(url)+encodeURIComponent(text)+"&via=lopscoop")

    (3).twitter 

    推特是比较简单的，可以在网页中通过链接，推特推荐在网页版打开，所以在一些浏览器可能会隐藏到App的入口（比如Chrome）。它的链接是一个universal link，格式如下： https://twitter.com/intent/tweet?text={内容}&url={链接},注意内容和链接需要用encodeURIComponent加密一下,官方文档：https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary

    代码如下：

    1.   <meta name="twitter:card" content="summary_large_image">
    2.   <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
    3.   <meta name="twitter:description" content="分享的description">
    4.   <meta name="twitter:image" content="分享图片的url">
    1. //调用下面的js打开分享弹窗 
    2. window.open(`https://twitter.com/share?url=${分享链接的url}`, `_blank`, `width=600, height=450, toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, top=100,left=350`)

    注意： 

    • twitter:url 标签可有可无，因为默认采用的是 https://twitter.com/share?url=${分享链接的url} 中的url，url地址禁止携带参数，即 https://test.com/index.htm?key=search错误，若确实需要，请将参数放到目录层级中，如https://testcom/search/index.htm
    • twitter:title 标签必须有，否则无法显示分享的内容
    • twitter:image 中的url地址只要能满足让爬虫爬取即可，是否携带参数都可以
    • twitter:card 标签必须有，常用的summary_large_image表示以大图的排版展示，summary以小图的形式排版展示。其他的分享如视频等，请参考官方文档
    • 因为分享的内容采用的是爬虫的形式获取，所以在html页面一开始就要存在twitter：标签，供爬虫，而不可以动态的通过js脚本追加
    • 对于动态生成html的情况，当采用的是前后端一体的方式，如.jsp、.asp、haml等形式时,在后端动态生成参数，然后传递给前端页面即可
    • 对于前后端分离的情况，需要后端配合动态生成html页面
    • 对于分享的链接能否正常显示，可以通过Twitter分享调试器进行调试，并查看结果

    (4).Telegram

    仅支持分享到App端和桌面端：https://t.me/share?url={链接}&text={内容}，也是url schema的方式

  • 相关阅读:
    WMS仓储管理系统的主要类型及其特性和适用场景
    java学习之git的基本使用
    商业智能系统的主要功能包括数据仓库、数据ETL、数据统计输出、分析功能
    网络编程:多进程实现TCP服务端并发、互斥锁代码实操、线程理论、创建线程的两种方式、线程的诸多特性、GIL全局解释器锁、验证GIL的存在
    数据结构与算法-栈和队列小练习
    R语言绘制分组方框图三
    《011.SpringBoot之餐厅点餐系统》
    Flink—读Hive表数据写入Kafka
    MBR分区表的简介
    java毕业设计“小蜜蜂”校园代取快递系统mybatis+源码+调试部署+系统+数据库+lw
  • 原文地址：https://blog.csdn.net/zhoupenghui168/article/details/133298326