Débogage local de la barre latérale Enterprise WeChat

introduction

Lors du développement de la fonction de barre latérale dans l'application d'entreprise WeChat auto-construite, je pense généralement à la façon de déboguer la page localement comme en utilisant des outils de développement. Si vous regardez attentivement, vous constaterez que la barre latérale est en fait l'une des WeChat d'entreprise. Accéder à un navigateur avec une adresse spécifique, vous pouvez donc configurer le chemin dans la barre latérale vers l'adresse IP et le port locaux, puis vous pouvez accéder à l'application locale lorsque l'entreprise WeChat est ouverte.

Cependant, lors de la connexion, l'adresse de rappel autorisée sera vérifiée par l'entreprise WeChat, donc bien que la méthode ci-dessus puisse ouvrir notre application locale, mais il n'y a aucun moyen de l'autoriser, bien qu'elle puisse également être contournée en simulant la méthode de connexion, mais le fonctionnement manuel est gênant et sujet aux erreurs, il existe donc les méthodes suivantes :

Charles 、Fiddler

C'est une autre méthode relativement simple que j'ai trouvée sur les Nuggets, les détails sautent : la barre latérale de l'application auto-construite Enterprise WeChat est configurée comme un environnement local

Proxy inverse Nginx

En fait, le principe est similaire au schéma ci-dessus. Il s'agit de modifier l'hôte pour transférer la demande de nom de domaine vers la machine locale, puis de transférer la demande vers l'ip et le port lorsque l'application est lancée via le proxy inverse, donc comme pour tromper la vérification du nom de domaine de l'entreprise WeChat. , pour atteindre l'objectif de débogage local.

Les étapes de fonctionnement spécifiques sont les suivantes :

1. Tout d'abord, nous avons besoin d'un logiciel capable de modifier rapidement la configuration de l'hôte de la machine locale, ce qui est recommandé ici

• Mac —— iHosts
• Fenêtre —— SwitchHosts

Une fois l'installation terminée, selon la manière d'utiliser le logiciel, configurez l'adresse de rappel légale de la barre latérale WeChat d'entreprise dans le fichier hôte, puis pointez vers la machine. En supposant que l'adresse légale est test.wxworksidebar.com, vous devez alors ajouter une ligne au fichier hosts :

127.0.0.1 test.wxworksidebar.com
复制代码

127.0.0.1Vous pouvez également utiliser l'adresse IP du réseau où se trouve la machine à la place.

1. Installation et configuration de Nginx

L'installation de Nginx est relativement fastidieuse, voici les introductions pour Mac et Windows respectivement :

Mac

1. Installez d'abord HomeBrew , de préférence avec un réseau accessible.
2. Une fois l'installation terminée, exécutez la commande pour installer Nginx : brew install nginx.
3. Après avoir attendu la fin de l'installation de Nginx, utilisez HomeBrew pour démarrer Nginx : brew services start nginx.
4. Ouvrez le navigateur pour visiter localhost:8080, si la page d'accueil de Nginx peut apparaître normalement, cela signifie que Nginx est installé et démarré avec succès.

Fenêtre

Nginx de Windows est assez magique, et il n'est généralement pas facile à utiliser et à gérer. Ici, nous recommandons un logiciel intégré nginxWebUI , qu'il est recommandé d'installer par Docker.

2. Configurer Nginx

Pour le front-end, il est assez difficile de comprendre la configuration de Nginx en peu de temps, il est recommandé d'utiliser l'arrière-plan de gestion de nginx WebUI pour générer le code de configuration Nginx que vous souhaitez.

nginxWebUI a une démo demo , le nom d'utilisateur et le mot de passe sont tous les deux admin, après être entré dans l'interface de gestion de nginxWebUI, sélectionnez le menu proxy de direction :

Ajoutez un proxy de direction :

Après l'envoi, sélectionnez le bouton d'aperçu dans la liste pour afficher la configuration Nginx que vous venez d'ajouter :

Copiez le code de configuration ci-dessus et collez-le dans le fichier de configuration Nginx local, la configuration Mac Nginx est dans/opt/homebrew/etc/nginx/nginx.conf

#user nobody;

worker_processes 1;

  

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

  

# pid logs/nginx.pid;

  
  

events {

worker_connections 1024;

}

  
  

http {

include mime.types;

default_type application/octet-stream;

  

#log_format main '$remote_addr - $remote_user [$time_local] "$request" '

# '$status $body_bytes_sent "$http_referer" '

# '"$http_user_agent" "$http_x_forwarded_for"';

  

#access_log logs/access.log main;

  

sendfile on;

#tcp_nopush on;

 

#keepalive_timeout 0;

keepalive_timeout 65;

#gzip on;

server {
    listen 8080;
    server_name localhost;
    #charset koi8-r;
    #access_log logs/host.access.log main;
    location / {
        root html;
        index index.html index.htm;
    }
    #error_page 404 /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }  
    #....
}

# 这里是新添加的代码

server {
    server_name test.wxworksidebar.com;
    listen 80;
    location / {
        proxy_pass http://192.168.0.170:8090/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header X-Forwarded-Port $server_port;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# ....

include servers/*;

}
复制代码

Redémarrez Nginx pour effectuer le développement local et le débogage.