preparation

Official account, JSSDK1.6.0 version, wechat developer tools (development and debugging can be used in some places)

Jssdk1.6.0 must be installed first, do not install the lower version. Then initialize the SDK as follows

Wx. config({debug: false, appId: signdata. appId, // Mandatory, unique identifier of public id timestamp: signdata. timestamp, // Mandatory, generated signature timestamp nonceStr: Signdata. NonceStr, // Required, generate a random string of signatures signature: signdata. signature, // Required, signature jsApiList: ['onMenuShareTimeline'],// add openTagList: [' wX-open-launch-downloadp ']})Copy the code

There are several things to be aware of when initializing

  • Timestamp requires back-end generation
  • NonceStr this one also needs to be generated back end
  • Signature also requires back-end generation
  • The SDK can only be initialized once

Secondly, it should be noted that if you want to apply wechat open capability, you must configure the secure domain name in the background of initializing the SDK public account, which is divided into various types and limited in number. If the data reaches the upper limit, it can be realized by forwarding and other means. The specific configuration when and what is needed will be mentioned below.

WeChat authorization

Wechat authorization is divided into two types, active authorization and silent authorization. The differences are as follows

For the user

  • Silent authorization users without perception, secretly get data
  • Active authorization requires users to click the authorization button to get the information

For the applicator

  • Only openID can be obtained for silent authorization
  • Active authorization gives you access to everything, like your profile picture

Application scenarios

  • Silent authorization is used to differentiate user needs
  • Active authorization scenario Displays user information

process

  1. The user agrees to authorize and gets the code
{appID: 'XXX ', // mandatory, unique identifier of public id redirect_uri:' XXX ', // return type: 'code', // return type: Snsapi_base stands for silent authorization. Snsapi_userinfo stands for active authorization. State: #wechat_redirect // this thing must be loaded}Copy the code

Note the following points in configuration

  • Redirect_uri The url must be in the domain name of the web page authorized by the background interface of the public account, otherwise it will be cool
  • If the user agrees to authorize, the page redirect_uri/? code=CODE&state=STATE
  1. Exchange web page authorization access_token with code

This step returns the user’s openID, access_token, and if silent authorization is used, the flow ends there

  1. Pull user information (using the data returned in step 2, and scope needs to be snSAPi_userinfo)

At this point, the authorization process is complete, with a few caveats

  • The second and third steps must be done on the server side due to some sensitive data (do not try to use the client side, 100% fail).
  • Access_token may be out of date and can be refreshed with refresh_token
  • It is recommended to encapsulate an SDK for the entire process for subsequent use
  • The whole process in wechat developer tool development, otherwise the whole can not be

For detailed process and explanation, please refer to wechat Development Platform (Portal)

H5 jump small procedures

The process is roughly as follows

  • In the public number background configuration JS interface security domain name, and then in the current domain name server to place a file (configuration domain name will give you this file), this process must be done, or cool
  • Use the tags provided by wechat
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxxx" path="pages/login/login/main.html"> <script type="text/wxtag-template"> <style>.btn { display: flex; align-items: center; </style> <div> <button class=" wX-BTN "> </button> </div> </script> </ wX-open-launch-appellate >Copy the code

The following points need to be noted

  • Username Indicates the id of the applet
  • Path Specifies the path of the applet
  • Script tags are used in React and Template templates are used in Vue, and the embedded content styles must be written in inline form. External CSS is isolated from internal CSS
  • Debugging must use a real machine whether in the browser or wechat developer tools can not jump small program to remember to remember
  • If the label content is not displayed 80% of the SDK initialization problems 20% of the problem is that the domain name configuration and file are not imported problems start from these two points

React provides a simple component wrapper

import React, { FC, useEffect } from 'react'; interface IProps { styles? : { [key: string]: string }; children? : React.ReactNode; key? : string | number; username: string; path: string; onClick? : () => void; // ** ** @param props children must be written inline * @returns */ export const WxOpenLaunchWeapp: FC<IProps> = (props) => { const { children, username, path, styles = {}, onClick } = props; Const staticClick = () => console.log('open miniProgram '); return ( <div style={{ width: '100vw', height: '100vh', ... styles, }}> {children} <wx-open-launch-weapp id="launch-btn" username={username} path={path} style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }} > <script type="text/wxtag-template"> <div style={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', opacity: 0 }} onClick={onClick || staticClick} /> </script> </wx-open-launch-weapp> </div> ); }; export default WxOpenLaunchWeapp;Copy the code