DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-08-28 19:51
  • 更新:2020-08-03 22:29
  • 阅读:29026

原生分享 - wap2app教程

分类: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教程
7 关注 分享
LLgg 赵梦欢 Trust 雪之梦技术驿站 海盜頭頭 Mr王 t***@qq.com

要回复文章请先登录注册

1***@qq.com

1***@qq.com

这个分享 要在配置文件里面勾选微信分享 功能才可以 要在微信开放平台上面创建应用 不然只能用手机系统的分享 就是没有图 只有文字
2020-08-03 22:29
8***@qq.com

8***@qq.com

怎么做到朋友圈分享多图
2020-07-30 22:46
[已删除]

[已删除]

不知道会不会有人像我一样一开始不知道这写js代码写在哪里 。现在我才知道【一个无私奉献的朋友告诉我的】,这些代码是要写到你的网站里的,就是你想让那个实现分享就写到那个页面里 这里不能发表图片代码就不贴了 需要的话V89605517 免费
2020-01-04 21:39
BaseCloud

BaseCloud

封装的H5+原生能力接口,一行代码调用原生能力。

开源仓库地址: https://gitee.com/cloud_finder/Joiny-H5Plus
2019-07-20 11:10
t77131

t77131

为什么我复制的实例代码,分享到微信却是这样的效果了?

plusShare基于HTML5+的share模块,开发者只需调用一个API,即可调起微信好友、微信朋友圈、系统更多分享功能( http://www.dcloud.io/hellomui ) http://www.dcloud.io/hellomui
2019-05-08 15:39
牧麟

牧麟

感谢大家的回复,最后在M站需要分享的页面下增加如下代码解决:
```javascript
<script src="https://xxx/plusShare.js" ></script>
<script type="text/javascript">
function myshare() {
if(navigator.userAgent.indexOf("Html5Plus") > -1) {
//5+ 原生分享
window.plusShare({
title: "xxx",//应用名字
content: "xxx product Sharing",
href: location.href,//分享出去后,点击跳转地址
thumbs: ["https://xxx.png"] //分享缩略图
}, function(result) {
//分享回调
});
}
};
</script>
```
但是分享时,只出现
xxx product Sharing(链接地址)
那个缩略图不会出现(图片地址是没错的),不知还要怎么操作
2018-03-13 16:35