How to implement sharing of Html5 pages on WeChat

WeChat sharing may seem complicated at first glance, but it is actually very simple. You only need to call the WeChat jssdk released by WeChat and add some configurations to realize the sharing of h5 pages on WeChat. The official document address is: https://mp.weixin.qq.com/wiki?t=resource/res_main&id =mp1421141115

Find the appid of an existing official account, make a request to the backend based on this appid and URL, and get the parameters required for configuration: timestamp, noncestr and signature.

Introduce the JS-SDK file of WeChat official website through the script tag

 <script src=https://res.wx.qq.com/open/js/jweixin-1.2.0.js type=text/javascript></script>

2. Basic configuration

 wx.config({ debug: false, // Whether to enable debug mode appId: appid, //appid timestamp: timestamp, // timestamp nonceStr: noncestr, // random string signature: signature, // signature jsApiList: [ ' onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] // List of JS interfaces to be used})

3. Use

 wx.ready(function(){ // Share to friends wx.onMenuShareAppMessage({ title: title, // Share title desc: desc, // Share description link: link, // Share link imgUrl: imgUrl, // Share icon success: function () { doShareDone() }, cancel: function () { doShareCancel() } }) // Share to Moments wx.onMenuShareTimeline({ title: title, // Share title link: link, // Share link imgUrl: imgUrl, // Share icon success: function () { doShareDone() }, cancel: function () { doShareCancel() } })}) 

 // Share success callback function doShareDone () { console.log('Sharing successful')} 

 //Cancel sharing callback function doShareCancel () { console.log('Sharing canceled')}

When the debug field in wx.config is set to true, debugging can be performed.

For debugging, you need to use WeChat developer tools, select the official account web page project, and enter the page address.

Appendix 5 of the WeChat JS-SDK documentation contains solutions to most of the problems. Here I list a few that I encountered that did not provide solutions above.

1. Uncaught TypeError: Cannot read property 'config' of undefined

Solution: The html page introduced the SDK separately, and the component unified also introduced the SDK again, causing problems. Delete one of them.

2. Uncaught (in promise) TypeError: Cannot read property 'ready' of undefined

Solution: Same as problem 1.

3. invalid signature

Solution: If none of the methods in the document solve this problem, there is another way. First set up the most basic configuration to make it config ok, and then set up the sharing copy with various parameters that you need. This can bypass the problem. After configuration, it was successfully shared. It may be a bit confusing to say, but a simple understanding is that as long as the page has a successful configuration of config, you can continue to configure other shares, even if the signature of this share configuration is invalid.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.