First, demand background

Due to the requirements of the project, wechat sharing should be supported in the published H5 mobile page, such as sharing to friends circle, sharing to friends, etc. With the help of node.js full stack technology capabilities, front-end developers can use this feature to carry out API interface encapsulation according to the actual needs of the business. The main points of attention are:

1. Cgi-bin /token is used to obtain the token and signature 2. Then call cgi-bin/ticket/getticket to obtain ticket 3. After getting ticket, generate signature string 4 that can match and verify with Tencent server according to [noncestr] [TIMESTAMP] [URL] passed in. 5. The content mentioned in this paper is implemented using egg.js framework

Two, implementation steps

1. Define the interface structure

Through requirement analysis, we know that the request and return of this interface should include: share title, share description, share picture, share link, return check signature and so on. Request parameters:

Parameter names	Parameters that	For example,
link	Share links	www.yourdomain.com/montage/ind…
imgUrl	Share the Cover image	www.yourdomain.com/montage/ima…
title	Share the title	Share your title
desc	Share the description	Your share description

Return result:

Parameter names	Parameters that	For example,
code	Status code	200
message	State description	The request is successful
data	Return the data	{}
– wxAccountInfo	Signature information	{}
— appId	Wechat public platform assigned ID	‘d0ddsldf3542’
— timestamp	Signature timestamp	1519265659
— nonceStr	Encrypted string	M4vhCXM
– wxShareInfo	Transparent transmission Sharing information	slightly
-…	Transparent transmission Sharing information	slightly

2. Define routes

Suppose we interface name defined as/API/service/getWeChatSignature then requires the following routing configuration.

app.controller.api.index.index.getWeChatSignature

3. Common configuration

The wechat sharing signature configuration needs to be removed from the external public configuration file. For egg.js framework, it is agreed with the configuration, but we only need to place the relevant configuration in config/config.default.js.

4. The token

The next step is to realize the development of functions related to the business of controller. Using the concept of egg.js service and Controller, we extract the logic part of the wechat interface into a separate service

5. Get TICKET

6. Signature implementation

After the token and ticket are obtained, the key step of signature generation and implementation is entered. Jsapi_ticket noncestr TIMESTAMP URL participating in the signature The noncESTr must be generated randomly

timestamp
seconds

sha1

Three, use method

1. Access address

http://localhost:7001/api/service/getWeChatSignature
Copy the code

2. Call method

POST
Copy the code

3. Request parameters

{
     link: 'https://www.yourdomain.com/montage/index.html'.// Share the link
     imgUrl: 'https://www.yourdomain.com/montage/images/cover.jpg'.// Share the cover image
     title: 'Your Share title'.// Share the title
     desc: 'Some descriptions... '                                                  // Share the description
}
Copy the code

4. Return the result

{
    "code":200."message":"Request successful"."data": {"wxAccountInfo": {"appId":"your app id".// appid
            "timestamp":1519265659./ / time
            "nonceStr":"M4vhCXM".// Encrypt the character string
            "signature":"your signature no like.. f5617cf42f"    // Compare signatures
        },
        "wxShareInfo": {"imgUrl":"https://mp.yourdomain.com/montage/images/cover.jpg".// Share the cover address
            "link":"https://mp.yourdomain.com/montage/index.html".// Share the link address
            "desc":"This description...".// Share the description
            "title":"Share title"                                              // Share the title}}}Copy the code

Four, achieve the effect

1.PostMan simulated call

2. Front-end simulated call (this paper takes creation.js call network as an example, and other methods such as Ajax and AXIOS will not be discussed in this paper)

Add wechat JS-SDK in the page template

Call the interface and pass in the shared content

The shared content is registered after the call interface returns

Based on egg.js wechat sharing API encapsulation