h5页面在微信浏览器分享朋友，朋友圈

最新推荐文章于 2024-05-15 21:30:00 发布

原创最新推荐文章于 2024-05-15 21:30:00 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #javascript

vue 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种使用jQuery AJAX请求实现微信分享配置的方法，包括如何设置分享标题、描述及图标等，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxfx(PageTitle, title2, description, imgUrl) {
                    var link = window.location.href;
                    var that = this;
                    $.ajax({
                        url: "//weixin.jrzp.com/ashx/serviceInterface.ashx?time=" + new Date().getTime(),//后台给你提供的接口
                        type: "GET",
                        data: { "action": "getWxConfigInfo", "url": link },
                        async: false,
                        dataType: "json",
                        success: function (data) {
                            
                            
                            wx.config({
                                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
                                appId: data.appId, // 必填，公众号的唯一标识
                                timestamp: data.timestamp, // 必填，生成签名的时间戳
                                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                                signature: data.signature,// 必填，签名，见附录1
                                jsApiList: [
                                    "onMenuShareTimeline",
                                    "onMenuShareAppMessage"
                                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                            });
                            wx.ready( () => {
                                //分享给朋友圈
                                wx.onMenuShareTimeline({
                                    title: title2, // 分享标题
                                    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                    imgUrl: imgUrl, // 分享图标
                                    success: function () {
                                        // 用户确认分享后执行的回调函数
                                        alert("分享成功");
                                    },
                                    cancel: function () {
                                        // 用户取消分享后执行的回调函数
                                        //alert("取消分享成功");
                                    }
                                });

                                //分享给朋友
                                wx.onMenuShareAppMessage({
                                    
                                    title: PageTitle, // 分享标题 
                                    desc: description, // 分享描述
                                    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                    imgUrl: imgUrl, // 分享图标
                                    type: '', // 分享类型,music、video或link，不填默认为link
                                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                                    success: function () {
                                        // 用户确认分享后执行的回调函数
                                        alert("分享成功");
                                    },
                                    cancel: function () {
                                        // 用户取消分享后执行的回调函数
                                        //alert("取消分享成功");
                                    }
                                });
                            });

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

                        },
                        error: function (error) {
                            //alert(error)
                        }
                    });
                }

这个是jq的请求方法，也可以改为axios的请求

  mounted() {
                this.rel();
                let PageTitle = '上市公司，国家高新技术企业扩招啦！（有奖推荐）';
                let title2 = '上市公生、客户经理、文员、采编、数据编辑、职业顾问和电商专员等多种岗位，快来看看有没有适合你的吧！（有奖推荐）';
                let description = '客户经理、文员、采编、数据编辑、职业顾问和电商专员等多种岗位，快来看看有没有适合你的吧！';
                let imgUrl = 'http://weixin.jrzp.com/images/20201216174511.jpg';
                this.wxfx(PageTitle, title2, description, imgUrl);
            },

然后在页面初始化调用这个方法传入参数
如果这个时候点击分享的时候没有调起方法，可以利用页面自动刷新一次来完成