React混合开发关于facebook国际化分享

Breeze_xk
6,596 阅读2分钟

假序

开篇之作，不知无所，恰巧最近刚做完一个分享webview，一路坑坑洼洼磕磕碰碰，查阅相关资料也是甚少，遂简记。

正文

明确需求

混合开发内嵌入H5分享页，功能包括短链，WhatsApp，Facebook等分享卡片，这次主讲关于facebook分享。

问题

  1. facebook分享与WhatsApp以及其他分享不同的是，facebook网站会解析meta信息，所以需要在之前js代码外面套一层html壳，关键点是需要react和html壳进行关联。
  2. 因为做的是国际化，所以也需要国际化的壳进行匹配。

思路

  • 具体信息在ogp.me/可以看到，看不懂的同学莫慌，下面是我在项目中配置的信息可以借鉴一下，需要注意的一点是image宽高也是需要定义的，这是一个小坑...
        <meta property="og:url" content="">
        <meta property="og:type" content="article">
        <meta property="og:title" content="">
        <meta property="og:description" content="">
        <meta property="og:image" content="">
        <meta property="og:image:height" content="360">
        <meta property="og:image:width" content="360">
  • 接下来是要做react和html外壳的关联，如何关联呢？先看一下react的方法就会知道了。
share = async () => {
    try {
      const { t } = this.props;
      const encodeURL = encodeURIComponent(this.state.inviteCode) 
      const gpURL = `http://*****/html/shareFB_${t.lang}.html?shortLink=${encodeURL}`;
      const imgUrl = new URL(API.pageURL).origin + require(`../images/img_share_${t.lang}.png`);
      const shareText = `${t.share.txt} ${gpURL}`;
      await NDB.run('shareMediaText', { shareText, imgUrl, platform });
    } catch (e) {
      console.log(e);
    }
  };

  • 莫慌，听贫道娓娓道来, encodeURL编码是因为我在html里面用decodeURIComponent解码，至于为什么这样做，问一下你们数学老师就知道了(手动滑稽...)。这里最关键的一点是gpURL，参数shortLink就是要分享的短链接，在html中就是要取到这个短链接。
<script type="text/JavaScript">
  let urlParamObj = {};
    (function(){
        let searchString = decodeURIComponent(window.location.search).substring(1);
        //	用 decodeURIComponent 对 URI 进行解码。
        //	使用 substring 是因为 substr 在 w3cSchool 中说 ECMAscript 没有标准化该方法
        let searchArr = searchString.split('&');
        let returnObj = {},
        	switchStr = '',
        	loopArr = [];
        for(let i = 0; i < searchArr.length; i++){
            switchStr = searchArr[i];
            switch(switchStr.indexOf('=')){
                case -1:
                //	如果没有 '=' 则参数对应值为''
                    returnObj[switchStr] = '';
                    break;
                case 0:
                //	如果 '=' 之前无参数名则跳过循环
                    break;
                default:
                    let loopArr = switchStr.split('=');
                    //	'=' 之后如果没有值会在split的时候为''
                    returnObj[loopArr[0]] = loopArr[1];
                    loopArr = [];
                    break;
            }
            switchStr = '';
        }
        return urlParamObj = returnObj;
    })();
    window.location.href = urlParamObj.shortLink
</script>

  • 这里主要做的就是从url拿到短链接，然后在这个html页面跳转到短链接就可以做到分享单个国家卡片。

  • 下个解决的是需要做国际化的问题，有一个最简单的方法就是做不同语言的html壳即可。

  • 当然是可以做成脚本来进行国家匹配，因为业务太紧没时间做了，后期在补上...

小结

革命的道路总是艰辛的，哆嗦一下就会索然无味了......

avatar
文章
阅读
粉丝