How to call the interface of sharing page on WeChat h5 page

This time I will show you how to call the shared page interface on the WeChat h5 page. What are the precautions on how to call the shared page interface on the WeChat h5 page. The following is a practical case, let's take a look.

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></script>

2. Write the WeChat sharing function in the myApp.run file. Note that this function needs to be The url of the current page is obtained and parsed, and then sent 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 the appId, timestamp, Random string and signature are returned, and then the interface list (jsApiList) is added manually as needed. Note that it is in the form of an array. I only need to call the shared interface here;
When debugging, you can debug Change it 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 sharing friends and friend circles separately as needed. , Weibo, etc., please check the WeChat interface document for details;
Mainly emphasize the sharing link, which must be under the JS secure domain name set by your official account, otherwise the sharing cannot be successful;

The symptom of failed sharing is that the sharing link image cannot load your customized image, and the sharing title is incorrect;

5. My project is a voting one, so I need to get the user code every time I click in. , if you just share the article and do not need user information, just change the link to your article link;

6. For the voting category, I have specially treated it here, that is, redirecting the link. Everyone We all know that there are two ways for H5 to obtain WeChat user information. One is to follow the WeChat public account; the other prompts the user to obtain the user's public information, and 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, and 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, it adds an extra blank page, and I haven’t thought of a good way yet. , everyone is welcome to leave a message;

9. If this step is not added, the shared link will display normally, but the code cannot be obtained, and the backend cannot judge the user, resulting in the inability to restrict user voting;

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

h5 realizes multi-image preview upload and click-to-drag controls

Front-end technology realizes text texture overlay

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