实现h5公众号分享功能（vue项目也适用）

在vue项目中我们先npm install weixin-js-sdk --save下载下来在main.js文件中引入

import wx from 'weixin-js-sdk';//引入

Vue.prototype.wx = wx//

jq项目中我们需要引入这个js-sdk（在需要调用js接口的页面引入js文件 http://res.wx.qq.com/open/js/jweixin-1.2.0.js，如果你的服务器是https请求的话请引入 https://res.wx.qq.com/open/js/jweixin-1.2.0.js）

//  分享 调用sdk

            // 微信分参数

            getConfig() {

                this.showFx = true

                var _this=this;

                // let url = location.href.split('#')[0] //获取锚点之前的链接

                let url = encodeURIComponent(window.location.href.split('#')[0]) //获取锚点之前的链接

                console.log(url)

                 //let url = 'http://xiaofeng.ckugua.com/index.html' //获取锚点之前的链接

                // console.log(url)

                _this.$Ajax.post('webchat/config?url='+url).then(response => {

                    // console.log(response)

                    let res = JSON.parse(response.data.data);

                    console.log(res)

                    _this.wxInit(res);

                })

            },

            // 微信分享

            wxInit(res) {

                var _this=this;

                let url = window.location.href.split('?')[0] //获取锚点之前的链接

                console.log(url)

                // let links = url+'#/Food/' + this.$route.params.id;

                let links = url+'#/product/productDetails?pid='+_this.$route.query.pid;

                console.log(links)

                let title = '晓峰科技';

                let desc = '了解更多，请关注“晓峰科技”公众号';

                let imgUrl = 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM4soO2NoID1uZPHibOVgkJoPoaelibibF3GagvW2o43wRASA/0';

                _this.wx.config({

                    debug: false,

                    appId: res.appId,

                    timestamp: res.timestamp,

                    nonceStr: res.nonceStr,

                    signature: res.signature,

                    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']

                });

                _this.wx.ready(function() {

                    _this.wx.onMenuShareAppMessage({

                        title: title, // 分享标题

                        desc: desc, // 分享描述

                        link: links, // 分享链接

                        imgUrl: imgUrl, // 分享图标

                        success: function() {

                            alert('分享成功')

                            _this.showFx =false;

                        },

                        cancel: function() {

                            alert('分享失败')

                            _this.showFx =false;

                        }

                    });

                    //微信分享菜单测试

                    _this.wx.onMenuShareTimeline({

                        title: title, // 分享标题

                        desc: desc, // 分享描述

                        link: links, // 分享链接

                        imgUrl: imgUrl, // 分享图标

                        success: function() {

                            alert('分享成功')

                            _this.isShow =true;

                        },

                        cancel: function() {

                            alert('分享失败')

                            _this.isShow =true;

                        }

                    })

                });

                _this.wx.error(function(err) {

                    alert(JSON.stringify(err))

                });

            }