How to call the sharing interface on WeChat html5 page

Recently, the company has made an H5 page for students to vote. It is mainly used on WeChat and needs to add the WeChat sharing function. This article mainly introduces the relevant information of the WeChat html5 page calling sharing interface example. I hope it can help. Everyone.

1. For the angular1 framework used in the front end, you first need to introduce the WeChat interface file on the index page;

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

2. Write WeChat in the myApp.run file Share function, please note that this function needs to obtain and parse the URL of the current page, and then send it to the backend to generate the corresponding signature, and directly upload the code;

// 微信分享函数
    function wxShare() {
        var url = $location.absUrl().split('#')[0];
            wxServices.postWxShare(url).then(function (res) {
            if (res.data.code == 0) {
                var respanse = res.data.data;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: respanse.appId,
                    timestamp: respanse.timestamp, // 必填，生成签名的时间戳
                    nonceStr: respanse.nonceStr, // 必填，生成签名的随机串
                    signature: respanse.signature,// 必填，签名
                    jsApiList: ['onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone']// 必填，需要使用的JS接口列表
                });
            }
        })
    }

Parse the current URL Finally, send it to the backend interface. The backend needs to return the appId, timestamp, random string and signature, and then add the interface list (jsApiList) manually as needed. Note that it is in the form of an array. I only need to call the sharing interface here. ;
When debugging, you can change debug to true, so that every time the WeChat interface is called, the interface information alert will come out, which is convenient for checking whether the interface call is normal;

3. After this function, customize the sharing content. The code is as follows;

wx.ready(function () {
        var obj = {
            title: 'SPBCN团体赛开始投票啦！', // 分享标题
            desc: 'SPBCN团体赛开始投票了，快来为我们加油吧！', // 分享描述
            link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            // 该链接是重定向链接，因为需要获取用户code，但是该链接又无法直接写微信获取code的链接，
            // 所以需要点击后重新加载新的页面，来实现重定向，重新打开获取code的微信链接，实现获取用户信息的功能；
            imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // 分享图标
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        };
        // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareAppMessage(obj);

        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline(obj);

        // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareQQ(obj);

        // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareWeibo(obj);

        // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
        wx.onMenuShareQZone(obj);
    })

wx.ready is automatically run after wx.config. I have defined a general function for sharing content. Object, and then call it directly. You can also define different contents for sharing friends, circle of friends, Weibo, etc. according to your needs. Please check the WeChat interface document for details;
Mainly emphasize the sharing link, which must be your Under the JS secure domain name set by the public account, otherwise the sharing cannot be successful;

The performance of sharing failure is that the shared link image cannot load your customized image, and the sharing title is incorrect;

5. My project is for voting, so I need to get the user code every time I click in. If you just share an article and don’t need user information, just change the link to your article link;

6. For the voting category, I have made a special treatment here, that is, redirecting the link. Everyone knows that there are two ways for H5 to obtain WeChat user information. One is to follow the WeChat official account; the other prompts the user to obtain the user's public information. The user clicks OK. However, both of these need to be spliced ​​into a special WeChat link according to WeChat’s requirements. Therefore, the domain name comes with WeChat and is not the JS safe domain name of our own public account;

7. Therefore, For the shared link, if you still need to obtain the user code, you must use other methods to achieve it. What I used is to add a blank page, and after the page is loaded, jump to WeChat to obtain the code link, http://dev.spbcn .org/wechat-vote-phone/redirect.html This link is a blank page. The code of the page is as follows;

window.onload = function () {
        // 重定向链接，跟微信公众号中获取用户code是一样的链接
        window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号appid&redirect_uri=http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect"
    }

8. This method has disadvantages, that is, one more Blank page, I haven’t thought of a good way yet, everyone is welcome to leave a message;

9. If you don’t add this step, the shared link will display normally, but the code cannot be obtained, and the backend will not be able to determine the user, resulting in the inability to Restrict users from voting;

The above is the detailed content of How to call the sharing interface on WeChat html5 page. For more information, please follow other related articles on the PHP Chinese website!