How to call the interface of the sharing page in WeChat H5 page

How do WeChat H5 pages call the interface of the sharing page? This issue may be often seen in our daily study or work. I hope that you can give you a deep harvest through this issue. Below is the reference content brought by Xiaobian, let’s take a look!

Recently, the company did a H5 page that voted to students. It is mainly used in WeChat.

Records to pay attention to the call to WeChat sharing interface;

1. Angular1 frame for front end, first need to introduce WeChat interface files in Index page;

2, write WeChat sharing functions in file, note that this function needs to get and resolve the URL of the current page, then send to the backend to generate the corresponding signature, directly on the code;

 // WeChat Sharing Function Function WXShare () {var URL = $ location.absurl (). Split ('#') [0]; wxservices.postwxshare (URL) .Then (Function (RES) {IF .data.code == 0) {var respanse = res. Data.Data; wx.config ({debug: false, // Turn on debug mode, the return value of all APIs calling will come out at the client ALERT, if to view The incoming parameters can be opened on the PC side, and the parameter information will be played through the log, only when the PC is connected. AppID: Respanse.Appid, TimeStamp:Respanse.TimeStamp, // Required, generated timestamp Noncestr: Respanse.noncestr, // Required, generated Signature Random Signature: Respanse.Signature, // Required, Signature Jsapilist: ['Onmenusharetimeline', ' OnmenushareAppMessage ',' OnmenushareQQ ',' OnmenushareWeibo ',' OnmenushareQzone '] // Required, the JS interface list});}})}   
After the current URL , Send the backend interface, the rear end needs to return the appid, timestamp, random string, and signature, then the interface list (JSAPILIST) is manually added manually as you need, pay attention to an array form, I only need to call the sharing interface;

When debugging, you can change Debug to True. This will have interface information Alert when you call the WeChat interface. It is convenient to see if the interface call is normal;

3, in this After the function, custom sharing content, code is as follows;

 wx.ready (function () {var obj = {title: 'SPBCN community game began to vote!', // Share Title DEThe SC: 'SPBCN group game began to vote, come on for us! ', // Share Description Link:' ', // Share link, the link domain name or path must be safe with the current page corresponding to the public number JS The domain name is unanimous // This link is a redirect link because it is necessary to obtain the user code, but the link cannot directly write WeChat to obtain the link link, //, so you need to click on the new page to re-open the acquisition Code's WeChat link, implement the function of acquiring user information; imgurl: '20210911/', // Sharing icon Fail: Function (res) {Alert (JSON.STRINGYFY (RES));}}; // 2.1 Monitor "Share to Friends", Button Click, Custom Sharing Content and Sharing Result Interface WX.OnmenushareAppMessage (Obj); // 2.2 Monitor "Share to Friend Circle" Button Click, custom sharing content and sharing result interface wx.onmenusharetimeline (OBJ); // 2.3 Monitor "Share to QQ" button Click, custom sharing content and sharing result interface wx.onmenushareqq (obj); // 2.4 Listening Share on Weibo "button Click, customize sharing content and sharing result interface wx.onmenushareweibo (obj);// 2.5 Monitor "Share to QZONE" button Click, custom sharing content and sharing interface wx.onmenushareqzone (obj);})   
wx.ready is automatic after wx.config When you run, I define a general object that shares content, then call it directly, you can also define different contents of sharing friends, friends, microblogs, etc. according to need, and see the WeChat interface document;

Mainly emphasizing the sharing link, the link must be under the JS security domain name setting of your public account, otherwise unable to share success;

Sharing the failed performance is, share the link picture Unable to load your custom picture The sharing title is not right;

5, I am a voting class, so you need to get user code after each click, if you just share your article, you don’t need user information, change Link to you Article link;

6, for the voting class, I have specially handled this here, it is to redirect the link. Everyone knows that H5 has two kinds of WeChat user information. One is to pay attention to WeChat public number Another reminder user needs to obtain user disclosure information, and the user can click OK. But these two need to be a special WeChat link according to WeChat, so the domain name is self-contained, it is not our own JS security domain name;

7, so, For the link after sharing, if you need to get the user code, you must implement it with other methods. I use a blank page, and then jump WeChat to get the Code link after this page. Http: //dev.spbcn This link is a blank page that is as follows;

 window.onload = function () {// redirect link, follow Get the user code is the same link in the WeChat public account. WINDOW.LOCATION.Href = " public number appid & redirect_uri = http% 3A% 2F% 2Fwechat-vote-phone? type = weixin & scope = snsapi_userinfo & response_type = Code & State = State #Wechat_Redirect "}   8, the method has a drawback, that is, add a blank page, I have never thought of good ways, welcome everyone to leave a message; 
9, if you don’t add this step, the link to the shared is normal, but you can’t get the code, you can’t judge the user, resulting in the user’s voting;

Thank you for reading! After reading the above, do you know how to call the WeChat H5 page to call the shared page? I hope that the content of the article will help everyone. If you want to know more about the content, please pay attention to Tumi Yun Industry Information Channel.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment