The following two images show the default sharing style and the custom sharing style

If you share an H5 in the wechat environment, the shared card will have no copy and icon by default. If you want to add copywriting and ICONS, you need to use the JS-SDK of wechat

1. Setting of the official account

First of all, there must be a public number, this is the premise. The H5 page shared in wechat can have no relationship with the public number, but the function of the custom icon is equivalent to using the ability of the public number.

1.1 Log in to wechat public platform, enter “Function Setting” of “Public Account Setting”, and fill in “JS interface security domain name”.

Download the verification file as prompted and place it in the H5 domain name root directory. You can access the verification file in the browser to verify the success.

2. Import the JS file

The <script></script> tag is imported into the JS file

3. Use the injection permission of the Config interface to verify the configuration

Mainly refer to the wechat JS-SDK documentation

wx.config({
  debug: true.// If debug mode is enabled, the return value of all API calls will be displayed in the client alert. If you want to view the parameters passed in, you can open it in the PC, and the parameter information will be printed in the log.
  appId: ' '.// Mandatory, the unique identifier of the public account
  timestamp:,// Mandatory to generate the timestamp of the signature
  nonceStr: ' '.// Mandatory to generate a random string of signatures
  signature: ' '.// Mandatory, signature
  jsApiList: [] // Mandatory, a list of JS interfaces to be used
});
Copy the code

Timestamp, nonceStr, signature are values returned by the back-end interface of the request company, so that the backend students can see the relevant part of the signature algorithm in the document. The reason for doing this is that the parameters passed by the JS interface calling wechat should be consistent with those of the backend interface.

4. Verify the processing through the ready interface

wx.ready(function(){
  // The ready method is executed after the config information is validated. All interface calls must be made after the result of the config interface.
  // config is an asynchronous operation on the client side, so if you need to call the relevant interface when the page loads, you need to call the relevant interface in the ready function to ensure correct execution.
  // For interfaces that are invoked only when triggered by the user, they can be invoked directly without being placed in the ready function.
});
Copy the code

5. Verify the processing failure through the error interface

wx.error(function(res){
  If the config information fails to be verified, the error function is executed. For example, if the signature expires, the verification fails. You can run the debug mode of config to view the error information.
  // It can also be viewed in the returned res parameter, where the signature can be updated for SPA.
});
Copy the code

6. Specific functions

6.1 Sharing friends (wechat friends or QQ friends)

wx.ready(function () {   // It should be called before the user can click the share button
  wx.updateAppMessageShareData({ 
    title: ' '.// Share the title
    desc: ' '.// Share the description
    link: ' '.// Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
    imgUrl: ' '.// Share ICONS
    success: function () {
      // The setting succeeded}})});Copy the code

6.2 Share in moments or QQ zone

wx.ready(function () {      // It should be called before the user can click the share button
  wx.updateTimelineShareData({ 
    title: ' '.// Share the title
    link: ' '.// Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
    imgUrl: ' '.// Share ICONS
    success: function () {
      // The setting succeeded}})});Copy the code

Last example: vUE – CLI built H5 page related functions are written in main.js

/ / routing
let ruleName = location.href.split('# /') [1].split('? ') [0];

const shareInfoMap = {
    usedCar: {
        title: 'Good Life Used Car Special Offer'.desc: 'Good life good car special, high price replacement buyback, click to sign up, free evaluation. '.icon: 'https://cdn.lifeat.cn/webappGroup/usedcar-shareIcon.png',},default: {
        title: ' '.desc: window.location.href,
        icon: 'https://cdn.lifeat.cn/webappgroup/betterLifelogo.png',}}let infoMap = shareInfoMap[ruleName] ? shareInfoMap[ruleName] : shareInfoMap['default'];
// This judgment is added to reduce the number of requests, according to the backend, there is a limit to the number of requests to share the page interface.
if (shareInfoMap[ruleName]) {
    // Request is an encapsulated request
    request.post('/wxmp/sign/jsSdk', {
        url: location.href,
    }).then(res= > {
        let { timestamp, nonceStr, signature, appId } = res;
        wx.config({
            debug: false,
            appId,
            timestamp,
            nonceStr,
            signature,
            jsApiList: ['updateAppMessageShareData'.'updateTimelineShareData']}); wx.error(function (errres) {
            console.info(errres)
        })
        wx.ready(() = > {   // It should be called before the user can click the share button
            console.info('ready')
            // Share friends
            wx.updateAppMessageShareData({
                title: infoMap.title, // Share the title
                desc: infoMap.desc, // Share the description
                link: location.href, // Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
                imgUrl: infoMap.icon, // Share ICONS
                success: function () {
                    console.info("Success")
                    // The setting succeeded
                },
                fail: function (erres) {
                    console.info('Failure:', erres)
                }
            })
            // Share it on moments
            wx.updateTimelineShareData({
                title: infoMap.title, // Share the title
                link: location.href, // Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
                imgUrl: infoMap.icon, // Share ICONS
                success: function () {
                    console.info("Success")
                    // The setting succeeded
                },
                fail: function (erres) {
                    console.info('Failure:', erres)
                }
            })
        });
    }).catch(err= > {
        console.info('err:', err)
    })
}
Copy the code