實現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))
                });
            }