Method for calling sharing interfaces in WeChat HTML5 page

This article mainly introduces the method of calling the sharing interface in the WeChat HTML5 page. The text is very detailed, with a certain reference value, interested partners must have read!

This article is mainly to record matters that need to be noted in calling the WeChat sharing interface;

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

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

// WeChat sharing function function wxshare () {varinter = $ locations.absURL (). Split (‘# ‘) [0]; wxservices.postwxshare (URL) .Then (RES) {if (res. Data.code == 0) {var respanse =; wx.config ({Debug: false, / / Open the debug mode, the return value of all APIs called will come out at the client ALERT. To view the incoming parameters, you can open in the PC side, and the parameter information will be played through the log, only in the PC side. Appid: Respanse.Appid, TimeStamp: Respanse.TimeStamp, // Required, Generate Signature Timestamp Noncestr:respanse.nonceStr, // required, generating a signature random string signature: respanse.signature, // Required signature jsApiList: [ ‘onMenuShareTimeline’, ‘onMenuShareAppMessage’, ‘onMenuShareQQ’, ‘onMenuShareWeibo’, ‘onMenuShareQZone’] / / Required, JS interface list});}})}

  After the current URL is analyzed, the rear end interface is sent, and the rear end needs to put the appid, timestamp, Random strings and signatures return, then interface list (jsapilist) is manually added manually as needed, pay attention to an array form, I only need to call sharing interfaces;  When debugging, you can change Debug to True, so Each time you call the WeChat interface, there will be interface information Alert, which is convenient to see if the interface call is normal; 
3, after this function, custom sharing content, code is as follows;

wx.ready (function () {var obj = {Title: ‘SPBCN community game began to vote!’, // Share Title Desc: ‘SPBCN group game began to vote, come to fine for us Let’s! ‘, // Sharing Description Link:’ http: // ‘, // Share link, the link domain name or path must match the public number JS security domain name corresponding to the current page // This link is a redirect link because You need to get the user code, but the link cannot directly write WeChat to get the Code link, //, so you need to click on the new page to reload the new page, reopen the WeChat link to get the Code, to achieve the function of acquiring user information; Imgurl: ‘20210911/’, // Sharing icon Fail: Function (RES) {Alert (json.stringify (res));}}; // 2.1 Monitor “Share to Friends”, buttons Click, custom sharing content and share results interface wx.onmenushareAppMessage (OBJ); // 2.2 Monitor “Share to Friends Circle” button Click, custom sharing content and share results interface WX .onusharetimeline (obj); // 2.3 Monitor “Share to QQ” button Click, custom sharing content and sharing result interface wx.onmenushareqqq (obj); // 2.4 listener “Share to Weibo” button Click, custom share content And sharing results interface wx.onmenushareWeibo (OBJ); // 2.5 Monitor “Share to Qzone” button Click, custom sharing content and sharing interface wx.onMenuShareQZone (obj);})

  wx.ready runs automatically after wx.config, I define a generic object of the share, and then can be called directly, but also you can define as needed to share different content with friends, circle of friends, microblogging, specifically to see micro-channel interface documentation can be;  the main emphasize sharing link that must be JS secure domain name of your public number is set at , otherwise unable to share success; 
and share the performance is to share links pictures can not load the picture your custom to share the title is not right;

5, my project was voted class , you need every acquisition came after the user clicks code, if you just share articles, does not require the user information directly to change the link to your article link;

6, vote for class, I have here a special processing, is to redirect the link, we all know that H5 obtain micro-channel user information, there are two, one is concerned about the public micro-channel number; another user prompts the user needs to obtain public information, the user clicks OK. However, both need to be in accordance with the requirements of micro letter to splice into a special micro-channel link, this domain is micro letter comes, it is not our own public number of JS secure the domain name;

7, therefore, for the link to share, if you need to get the user code, we must use other methods to achieve, I use to add a blank page, jump micro-channel acquisition code link after the page loads, http: //dev.spbcn .org / wechat-vote-phone / redirect.html the link is a blank page, which code is as follows;

window.onload = function () {// redirect link, with micro-channel public number to obtain a user code in the same link window.location.href = “ publicPublic No. appid & redirect_uri = http% 3A% 2F% 2Fwechat-vote-phone? Type = weixin & scope = snsapi_userinfo & response_type = code & state = STATE # wechat_redirect “}

  8, the The method has the 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, shared the link to display normal, but get the code, then The user cannot determine the user, causing the user to vote;

is all the contents of the method of calling the sharing interface in the WeChat HTML5 page, thank you for reading! I hope to share the content help everyone, more Related knowledge, welcome to pay attention to Tumi Yun Industry News!

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

Please log in to comment