Example of the sharing interface called on the html5 page on WeChat and html5

Example of the sharing interface called by the html5 page on the terminal, and html5 example

Recently, the company made an H5 page for students to vote, which is mainly used on the client and needs to be added with the sharing function;

This article mainly records precautions for calling the sharing interface;

1. The angular1 framework used by the front-end needs to first introduce the interface file on the index page;

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

2. Write the sharing Function in the myApp. run file. Note that the function needs to retrieve and parse the url of the current page, and then send it to the backend to generate the corresponding signature and directly add the Code;

// Share 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, // enable the debugging mode. The returned values of all called APIs are displayed in the client alert. To view the input parameters, you can open them on the pc, the parameter information is output through log and printed only on the pc end. AppId: respanse. appId, timestamp: respanse. timestamp, // required. The signature timestamp nonceStr: respanse. nonceStr, // required. The random signature string signature: respanse. signature, // required, signature jsApiList: ['onmenusharetimeline', 'onmenushareappmessage', 'onmenushareqq', 'onmenushareweio ', 'onmenushareqzone'] // required, list of JS interfaces to be used });}})}

After the current url is parsed, it is sent to the backend interface. The backend needs to return the appId, timestamp, random string, and signature, and then manually add the interface list (jsApiList) as needed, note that it is an array. Here I only need to call the sharing interface;
During debugging, you can change debug to true, so that alert will be generated every time you call the interface to check whether the interface call is normal;

3. After this function, customize the shared content. The Code is as follows;

Wx. ready (function () {var obj = {title: 'spbcn round starts voting! ', // Share the title desc: 'spbcn is voting. come and cheer for us! ', // Share description link: 'http: // dev.spbcn.org/wechat-vote-phone/redirect.html', // share link, the linked domain name or path must be consistent with the public account JS security domain name corresponding to the current page // the link is a redirection link because you need to obtain the user code, however, the link cannot directly write the link to obtain the code. // you need to click it and reload the new page to implement redirection and re-open the link to obtain the code, imgUrl: 'http: // cdn.spbcn.org/img/logo-image.png', // share icon fail: function (res) {alert (JSON. stringify (res) ;}}; // 2.1 listen to "share to friends", click the button, and customize the sharing content and the sharing result interface wx. onMenuShareAppMessage (obj); // 2.2 listen to "share to circle of friends" button click, custom share content and sharing result interface wx. onMenuShareTimeline (obj); // 2.3 listen to the "share to QQ" button and click, customize the sharing content and the sharing result interface wx. onMenuShareQQ (obj); // 2.4 listen to the "share to Weibo" button, and customize the sharing content and the sharing result interface wx. onMenuShareWeibo (obj); // 2.5 listen to the "share to QZone" button and click, custom share content and sharing interface wx. onMenuShareQZone (obj );})

Wx. ready is in wx. config runs automatically. I define a common object for sharing content, and then call it directly. You can also define different content for sharing friends, friends, and Weibo as needed, for more information, see the interface documentation;
It is important to emphasize the sharing link, which must be under the JS security domain name set by your public account; otherwise, the sharing will fail;

The sharing failed because the sharing link image cannot be loaded with your custom image, and the sharing title is incorrect;

5. My project is a voting type, so you need to obtain the user code after each click. If you only share the article and do not need the user information, directly change the link to your article link;

6. For the voting class, I have specially handled it here, that is, redirected the link. We all know that there are two types of H5 user information, one is to follow the public account; in addition, the user is prompted to obtain the public information of the user. Click OK. However, both of them need to be spliced into special links according to the requirements. Therefore, this domain name is self-contained and is not the JS security domain name of our own public account;

7. Therefore, if you need to obtain the user code for the shared link, you must use other methods. I have added a blank page, after loading the page, jump to the link to get the code, skip;

Window. onload = function () {// redirect link, which is the same as getting the user code in the public number. window. location. href = "https://open.weixin.qq.com/connect/oauth2/authorize? Appid = Public Account 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 a disadvantage, that is, adding a blank page. I didn't expect a good solution for the moment. You are welcome to leave a message;

9. If this step is not added, the shared link is displayed normally, but the code cannot be obtained, the backend cannot judge the user, and thus the user's voting cannot be restricted;

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.