1. Comparison of effect drawings

2. Previous potholes

Set a hidden picture on the page, 300 pixels wide and high, wechat will grab this picture as a share picture

Link: blog.csdn.net/aoshilang22…

Result: It didn’t work, reason: wechat limited the custom sharing content, ultimately depends on configuring wx.config.

3. Read an official document in detail:

Link: mp.weixin.qq.com/wiki?t=reso… ain&id=mp1421141115

Look again, feel that their IQ seems to be offline, a face masked state

4. After exploring for a long time, +++ harassed Baidu for countless times, I almost got the idea. Everybody followed me (my project is the React framework, which is basically the same; others can be adjusted according to their own needs)

(1) Prepare, set the JS interface security domain name

(2) Introducing JS files

(3) The page URL to be shared will be sent to the background partner (after the background interface is successfully retrieved, the config configuration information you need to use will be returned to you, which is safer than directly writing the information of the public number)

(4) According to the requirements of sharing, in accordance with the official interface writing method, free play ~~~~

Wx. config({debug:false, // Enable the debug mode, the return value of all API calls will be alert in the client, to view the passed parameters, can be opened in the PC, parameter information will be printed in the log, only on the PC. AppId :json. appId, // Mandatory, unique identifier of public number timestamp:json.timestamp, // Mandatory, generated signature timestamp nonceStr: Json. nonceStr, // Mandatory, generate a random string of signatures signature: json.signature,// Mandatory, signature jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // Mandatory, List of JS interfaces to use}); Wx.ready (function() {// The ready method is executed after the config information is validated. All interface calls must be made after the config interface. Config is an asynchronous operation on the client side, so if the relevant interface needs to be called when the page loads, // The relevant interface must be called in the ready function to ensure correct execution. Interfaces that are invoked only when triggered by the user can be invoked directly without being placed in the ready function. Wx. onMenuShareTimeline({title:shareTitle, // Share the title link:location.href, // Share the link, The link domain name or path must be the same as the JS security domain name of the public account corresponding to the current page ImgUrl: "https://jinshang-hz.oss-cn-hangzhou.aliyuncs.com/data/share/images/recruit_action.jpg", / / share success icon: Function () {console.log("11") {console.log("11"); }}); Wx. onMenuShareAppMessage({title:shareTitle, // shareTitle desc:mySlogon, // share description link:location.href, // share link, ImgUrl: The url or path must be the same as the security domain name of the public id of the page. "Https://jinshang-hz.oss-cn-hangzhou.aliyuncs.com/data/share/images/recruit_action.jpg", / / share icon type: ", // Share type,music, video or link, default link dataUrl: ", // if type is music or video, provide data link, default is null SUCCESS: Function () {console.log("22") {console.log("22"); }});Copy the code

5. Refer to the article

(1) [http://www.cnblogs.com/stoneniqiu/p/6286599.html] () (2) [https://blog.csdn.net/HaleyLiu123/article/details/78002835?locationNum=4&fps=1] ()Copy the code

Grey often thanks the front step pit predecessors to share ~~~~