A while ago, the mobile terminal of the website needs to access the wechat sharing function, which is to access the SDK of the wechat public number. Before joining wechat to share, the link we shared was like this:

After successful access to share links can be customized title, description, cover. As follows:

The preparatory work

You need to have an open wechat public account, subscription account is ok. At the same time, it has the permission to share on wechat. This is just the front end.

Access the wechat SDK

Official development document of wechat official account

NPM has done a package library, support CommonJS, weixin-js-SDK

import wx from 'weixin-js-sdk';
const wechatShare = async (opus) => {
  // getWechatSign: passes the current page link to the background to obtain the latest ticket
  const { code, data } = await getWechatSign(window.location.href);
  if (code === 0) {
    // Wechat share configuration
    wx.config({
      debug: false.// 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: 'xxx'.// Mandatory, the unique identifier of the public account
      timestamp: data.timestamp, // Mandatory to generate the timestamp of the signature
      nonceStr: data.nonceStr, // Mandatory to generate a random string of signatures
      signature: data.signature, // Mandatory, signature
      jsApiList: ["onMenuShareTimeline"."onMenuShareAppMessage"] // Mandatory, a list of JS interfaces to be used
    });
    wx.ready(() = > {
      wx.onMenuShareTimeline({
        title: opus.name, // Share the title
        link: `The ${window.location.href.split('&') [0]}`.// Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
        imgUrl: opus.opusCover,// Share ICONS
        success: function() {
          // The callback function executed after the user clicks share}}); wx.onMenuShareAppMessage({title: opus.name, // Share the title
        desc: `${opus.description}`.// Share the description
        link: `The ${window.location.href.split('&') [0]}`.// Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
        imgUrl: opus.opusCover, // Share ICONS
        type: "link".// Share type: music, video, or link. The default value is link
        dataUrl: "".// If type is music or video, provide data link. Default is null
        success: function() {
          // The callback function executed after the user clicks share}})})}}Copy the code

Analysis of problems encountered

Wechat sharing is actually a lot of pit, public number configuration and development process are prone to problems. The invalid Signature bug is always confusing.

Public number configuration: be sure to remember to public number background configuration JS secure domain name and IP whitelist! This is very important, otherwise the signature will always be invalid and you will never find the problem!

Development process issues:

Invalid signature Indicates a signature error. You are advised to check in the following order:

  • Confirm correct signature algorithm, available mp.weixin.qq.com/debug/cgi-b… Page tool for verification.

  • Verify that nonceStr (js hump standard capital S) in config, timestamp is consistent with the corresponding nonceStr, timestamp in the signature.

  • Verify that the URL is the full URL of the page (check the current page alert(location.hre.split (‘#’)[0])), including ‘HTTP (s)://’ part, and’? The ‘GET argument part after’, but not the ‘#’hash part.

  • Ensure that the APPID in config is the same as the appID used to obtain jSAPi_ticket. I stepped on the pit here, the background appID and front-end configuration is inconsistent.

  • Ensure that access_token and JSAPi_ticket are cached.

  • Make sure that the URL you get for signing is dynamically retrieved, as shown in the example PHP code. If it is a static HTML page, the front end uses AJAX to send the URL to the background for signature. The front end needs js to get the current page except the ‘#’hash part of the link (available location.hp.split (‘#’)[0], no encodeURIComponent is required. The official document of wechat says yes, but not for testing), because once the page is shared, the wechat client will add other parameters at the end of your link. If the current link is not dynamically obtained, the page after sharing will fail to sign in person.