How to call the sharing interface on the WeChat html5 page

This article mainly introduces the relevant information about the WeChat HTML5 page call sharing interface example. The content is quite good. Now I will share it with you and give it as a reference.

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 records the matters that need to be paid attention to when calling the WeChat sharing interface. ;

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. In myApp.run Write the WeChat sharing function in the file. 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接口列表
                });
            }
        })
    }

After parsing the current url, 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 define a general object for sharing content, and then call it directly. You can also define different content for sharing friends, Moments, Weibo, etc. according to your needs. Please check the WeChat interface document for details;
Main Emphasize the sharing link. The link must be under the JS secure domain name set by your official account, otherwise the sharing cannot be successful;

The performance of sharing failure is that the sharing link image cannot load your customized image. Share The title is also wrong;

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. Just click the link;

6. For the voting category, I have done 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 is to follow the WeChat official account; One prompts the user to obtain the user's public information, and the user can click 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 official 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, and the page code 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 Added an extra 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 cannot determine the user. , resulting in the inability to restrict user voting;

The above is the entire content of this article, I hope it will be helpful to everyone's study, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

How to use HTML5 to realize the function of sharing to WeChat friends circle QQ friends QQ space Weibo QR code

HTML5, implementation code for adding an icon to the right side of the Select drop-down box (to enhance user experience)

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