网站、网页微信分享解决方案

接上一篇：微信分享获取signatrue

今天说说一前端JS如何配置

1、引入jssdk，这里用的是版本1.6

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2、根据上一篇中的方法，获取appId，timestamp，nonceStr，signature，进行权限配置验证，如下图

$(function() {
            //--微信JS配置
            if (wx != null && wx != undefined) {
                $.ajax({
                    url: "你的获取地址",
                    type: "post",
                    data: {
                        url: sharedata.url
                    },
                    dataType: "json",
                    async: false,
                    success: function(data) {
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: data.appid, // 必填，公众号的唯一标识
                            timestamp: data.timestamp, // 必填，生成签名的时间戳
                            nonceStr: data.nonceStr, // 必填，生成签名的随机串
                            signature: data.signature, // 必填，签名，见附录1
                            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline']
                        });
                    }
                });
            }
        });

说明：jsApiList：即为要配置的方法列表,更多接口方法请去微信官方查看。

3、通过ready接口处理各方法的配置

//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
        wx.ready(function() { //需在用户可能点击分享按钮前就先调用
            var sharedata = {
                url: '当前页面地址，注意不能带#',
                title: '你的标题！',
                desc: '你的搭配描述！',
                img: '配图地址'
            }

            wx.updateAppMessageShareData({
                title: sharedata.title, // 分享标题
                desc: sharedata.desc, // 分享描述
                link: sharedata.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: sharedata.img, // 分享图标
                success: function(e) {
                    //alert(e);
                },
                fail: function(e) {
                    alert(JSON.stringify(e));
                }
            });
            //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
            //需在用户可能点击分享按钮前就先调用
            wx.updateTimelineShareData({
                title: sharedata.title, // 分享标题                            
                link: sharedata.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: sharedata.img, // 分享图标
                success: function(e) {
                    console.log(11);
                },
                fail: function(e) {
                    alert(JSON.stringify(e));
                }
            });
        });

4、在微信中打开你的网址，点击右上角的三个点，然后发送到朋友圈或好友即可看到效果。

打完收工！

下面分享一下官方流程（更多使用方法请去官方网站查看：概述 | 微信开放文档 (qq.com)）：