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

最新推荐文章于 2025-06-29 16:39:31 发布

转载最新推荐文章于 2025-06-29 16:39:31 发布 · 929 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/WangXinPeng/p/10303544.html

文章标签：

#javascript #json #ViewUI

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