实现h5公众号分享功能（vue项目也适用） - 菜鸟的编程VLOG

在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))
                });
            }