原生分享 - wap2app教程

体验差距

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

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

原生分享 - 图1

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

原生分享 - 图2

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

原生分享 - 图3

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

改造方案

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

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

引用plusShare.js文件

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

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

修改点击分享的实现

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

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

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

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

注意：

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