Today, I met the demand of wechat sharing. Generally speaking, it's relatively simple, but I still met a hypothetical pit (really hypothetical)
api address
1. way of thinking
- Step 1: bind domain name
- Import JS file
- Inject permission validation configuration through config interface (wechat has this step anyway)
- Successfully verified through the ready interface processing
- Handling failed validation through the error interface
2. implementation
1. bind the domain name, bind the domain name in the background of the public number, so the final test must be online (the environment can be penetrated through the internal network, so it is easy to debug, and do not need to test the environment every time).
2. Import in index.html file
http://res.wx.qq.com/open/js/jweixin-1.4.0.js / / note the protocol
3. Inject the permission validation configuration through the config interface. The following five parameters are returned to you through the request background. Note: the URLs of the current page are provided to the background in this interface, so they can generate usable URLs. The format of the URLs is as follows: url (the url of the current page does not contain ා and its later parts), so pay attention to the Vue router mode (inject the permission validation configuration through the config interface, jsApiList is the calling event, which is included in Appendix 2 of the api document)
wx.config({ debug: false, // Whether to turn on debugging mode appId: appId, //appid timestamp: timestamp, // time stamp nonceStr: nonceStr, // Random string, only this is the hump signature: signature, // autograph jsApiList: [ "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone" ] // List of JS interfaces to be used }); // Determine whether the current client version supports the specified JS interface. This step is optional wx.checkJsApi({ jsApiList: [ "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone" ], // List of JS interfaces to be tested. See Appendix 2 for list of all JS interfaces, success: function(res) { console.log(res); // Returned in the form of key value pairs. The available api value is true, not false // For example: {"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } });  // Successfully verified through the ready interface processing wx.ready(function() { const share = { title: mainTitle, // Shared title desc: subTitle, // Descriptive information imgUrl: smallIcons, // Small icons for sharing link: url, // Shared removed url success: function() { dosometing(); // Share success, what to do after success }, cancel: function() { dosometing(); // Share cancellation, what to do after cancellation } }; wx.onMenuShareAppMessage(share); // WeChat friends wx.onMenuShareTimeline(share); // Wechat Moments wx.onMenuShareQQ(share); // QQ wx.onMenuShareQZone(share); // QQ Zone wx.onMenuShareWeibo(share); // Tencent micro-blog }); // If it fails, get the failure information wx.error(function(res) { console.log("error", res); });
3. Imaginary pit
When I look at other people's sharing, click to share has the above guide map (I thought it was brought by the official website), but I did not have a guide map. At first, I thought something was wrong with my step. Later, I found that this map was added by myself. Click to share, open this mask, and remove this mask in the successful callback. A kind of
blog:https://hericium.github.io/20...