html5超强微信分享代码 h5实现微信分享

非要在h5页面调用分享。然后分享到微信朋友圈，首先明确一点，微信H5分享是没有自定义分享按钮组件的，只能引导用户去主动触发右上角三个点的按钮。目前只有APP或微信浏览器右上角的三个点才可以调用

微信的官方文档只是自定义分享页面，而不是直接分享。目前有两种方法

 

 

 

一，采用插件

之前项目采用的jiathis,但是后面又不能用了，原来是停用了

 

 

 那就换一个嘛，用的Bshare

这样点击微信图标会跳出一个二维码，用手机微信扫描二维码就会用微信浏览器打开网页，然后就有右上角的三个点，点击就可以分享了

<div class="bshare-custom">
<a title="分享到QQ空间" class="bshare-qzone"></a>
<a title="分享到微信" class="bshare-weixin" href="javascript:void(0);"></a>
<a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
<a title="分享到人人网" class="bshare-renren"></a>
<a title="分享到腾讯微博" class="bshare-qqmb"></a>
<a title="分享到网易微博" class="bshare-neteasemb"></a>
<a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
<span class="BSHARE_COUNT bshare-share-count">0</span></div>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=2&lang=zh"></script>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>

样式，分享的平台都可以自定义，可以去官网看。

绑定事件,然后把微信的那些方法写一下，其他什么安全域名的配置就不讲了，可以看看其他文章

var shareTitle = $('#zhan').html();var firstImg = $('#ucontent img').attr("src")
            var shareDesc = $('#ucontent font').text()
            var url = window.location.href;
            $('.bshare-weixin').click(function (){
                // 分享朋友（旧）
                wx.onMenuShareAppMessage({
                    title: shareTitle,
                    desc: shareDesc,
                    link: url,
                    imgUrl: firstImg,
                    success: function (res) {
                        // alert('分享成功');
                    },
                    cancel: function (res) {
                        // alert('分享取消');
                    },
                });
            })
            // 分享朋友（新）
            wx.updateAppMessageShareData({
                title: shareTitle, // 分享标题
                desc: shareDesc, // 分享描述
                link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                imgUrl: firstImg, // 分享图标
                success: function () {
                    // 设置成功
                }
            })
            // 分享朋友圈（新）
            wx.updateTimelineShareData({
                title: shareTitle, // 分享标题
                link: url, // 分享链接
                imgUrl: firstImg, // 分享图标
                success: function() {
                    // console.log("分享成功");
                },
                cancel: function() {
                    // console.log("分享失败");
                }
            });
            wx.ready(function () {
                // 分享朋友（旧）
                wx.onMenuShareAppMessage({
                    title: shareTitle,
                    desc: shareDesc,
                    link: url,
                    imgUrl: firstImg,
                    success: function (res) {
                        // alert('分享成功');
                    },
                    cancel: function (res) {
                        // alert('分享取消');
                    },
                });
                // 分享朋友圈（旧）
                wx.onMenuShareTimeline({
                    title: shareTitle, // 分享标题
                    link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                    imgUrl: firstImg, // 分享图标
                    success: function () {
                        // 用户点击了分享后执行的回调函数
                    }
                })

            });
            wx.error(function(res){
                // alert(res.errMsg);
                //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            });

 

二 采用nativeShare

原理就是调用手机浏览器的分享方法，只能涵盖大部分浏览器，有的浏览器就不行，这个是可以直接跳转到分享页的，但受浏览器限制，华为自带的浏览器就不行，UC可以，其它浏览器还没试

如果是模块化代码，就可以直接import引入 ，不是的话就script引入 ，可以参考官网的demo,自己新建一个NaviteShare.js,看下源代码把内容复制进去

 

 

 模块化的安装：

npm install --save nativeshare

import NativeShare from 'nativeshare'

// 先创建一个实例
var nativeShare = new NativeShare()

// 设置分享文案
nativeShare.setShareData({
    icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
    link: 'https://github.com/fa-ge/NativeShare',
    title: 'NativeShare',
    desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
    from: '@fa-ge',
})

// 唤起浏览器原生分享组件(如果在微信中不会唤起，此时call方法只会设置文案。类似setShareData)

function call(command) {
            try {
                nativeShare.call(command)
            } catch (err) {
                // 如果不支持，你可以在这里做降级处理
                alert(err.message)
            }
}