原生分享 - wap2app教程

体验差距

因web能力限制，M站仅支持wap方式的分享，分享体验很糟糕，如下是一种典型实现（参考下方截图）：

• 点击微信分享后，显示一个二维码，用户需要启动微信扫描二维码，先在微信中打开这篇文章，然后再通过微信右上角的菜单分享出去；分享路径太长，操作麻烦；
• 点击微博分享，需要登录微博wap站，完成授权后才能分享

wap2app运行在5+ 引擎下，是可以通过HTML5+的share模块直接调起系统原生分享的，同样场景，稍作改造，在5+引擎环境下调用原生分享，则体验会大大改观，如下为调用原生分享后的截图：

5+引擎还可以调起系统支持的更多分享，比如微博、QQ、短信、邮件等，如下为点击“更多分享”后的示例：

很明显，通过5+引擎调起原生分享后，分享路径更短、体验更好，更有利于分享内容的传播。

改造方案

要实现如上的分享体验，开发者只需要对M站稍作修改，判断是5+引擎的环境下，调用HTML5+的share模块API即可实现。

为简化开发，DCloud封装了plusShare.js函数，开发者引入该函数后，只需调用一个API,即可完成原生分享的改造。

引用plusShare.js文件

对M站上有分享功能的页面引入plusShare.js，js下载地址：GitHub，建议放在M站的cdn服务器上，如下：

<script src="http://cdn.example.com/js/plusShare.js" type="text/javascript" charset="utf-8"></script>

修改点击分享的实现

修改分享按钮的点击事件，假设之前的分享按钮点击实现如下：

document.getElementById("share").addEventListener("click", function() {  
    //原有wap分享实现  
});

引入plusShare后，参考如下方式修改代码即可：

    document.getElementById("share").addEventListener("click", function() {  
        if(navigator.userAgent.indexOf("Html5Plus") > -1) {  
            //5+ 原生分享  
            window.plusShare({  
                title: "my-app-name",//应用名字  
                content: "分享具体内容",  
                href: location.href,//分享出去后，点击跳转地址  
                thumbs: ["http://m.example.com/imgs/1.png"] //分享缩略图  
            }, function(result) {  
                //分享回调  
            });  
        } else {  
            //原有wap分享实现   
        }  
    });

注意：

• 具体分享内容，开发者可以根据M站业务自定义设置，比如动态读取当前页面顶部大图作为thumbs参数
• plusShare.js的具体用户参考plusShare教程