Présentation d'un outil de développement tiers (WEPT) pour les mini-programmes WeChat

Outil de développement de mini-programmes WeChat Outil de développement tiers WEPT, fonctions principales de WEPT : mises à jour en temps réel, prise en charge de wxml wxss javascript json plus stable, contrairement aux outils officiels qui font souvent des erreurs, aucune restriction, pas besoin de se connecter à Internet , pas de configuration back-end CORS, prend en charge la navigation mobile.

Adresse du projet : github.com/chemzqm/wept

Fonctions principales de WEPT :

Mise à jour en temps réel, prise en charge de wxml wxss javascript json

Plus stable, contrairement aux outils officiels qui tournent souvent mal

Aucune restriction, pas besoin de se connecter à Internet, pas besoin de configurer CORS sur le backend, prend en charge le débogage du navigateur mobile

Test personnel disponible sur Mac et win7, si vous rencontrez des bugs, bienvenue pour ouvrir un ticket sur github.

Introduction détaillée

WEPT est un environnement d'exécution en temps réel pour les mini-programmes WeChat. Par rapport aux outils de développement actuellement officiellement fournis, il présente les fonctionnalités suivantes :

1. Entièrement en temps réel : il prend entièrement en charge la mise à jour automatique à chaud des fichiers wxml, wxss, javscript et json. Une fois le fichier enregistré, les modifications correspondantes seront automatiquement mises à jour dans l'environnement d'exécution du mini-programme. pour reconstruire ou redémarrer les opérations. Dans la plupart des cas (sauf si app.json est modifié), il n'est pas nécessaire d'actualiser. Puisqu’il n’y a pas de rafraîchissement, les développeurs n’ont plus besoin de perdre du temps à utiliser l’interface pour reproduire l’état de la page avant modification. L'ensemble du processus prend en charge plusieurs terminaux simultanément.

2. Plus stable : le processus de construction du mini-programme de WEPT est plus stable que les outils officiels. Il ne signalera pas fréquemment les erreurs de service d'application non prêt comme les outils officiels, ni même plantera directement s'il rencontre une erreur de construction en arrière-plan ou un mini-programme. , il affichera immédiatement un rappel d'erreur sur la page. Si Growl ou Terminal-Notifier sont installés, un rappel d'erreur apparaîtra également sur le bureau.

3. Aucune restriction : La mini page du programme générée par WEPT peut fonctionner sur les navigateurs mobiles et ne nécessite pas de connexion Internet pour l'utiliser. Il utilise un backend pour transmettre les requêtes XHR via un protocole proxy personnalisé que les développeurs peuvent déboguer sans configurer le CORS du backend.

4. Plus d'API : en plus de prendre en charge toutes les API officiellement prises en charge, WEPT implémente également des API de détection de gravité et de boussole. Vous pouvez déboguer sur les navigateurs mobiles prenant en charge l'interface html5 correspondante.

Principe de mise en œuvre

En termes simples, il s'agit d'un service Web qui communique avec le front-end en temps réel via l'interface WebSocket. Les fichiers requis sont compilés dynamiquement lorsque le service back-end est demandé

Le front-end implémente la logique de communication et de contrôle multipartite des pages de la couche de vue, de la couche de service et de la couche de contrôle via iframe.

Les codes de la couche de vue frontale et de la couche de service proviennent de la dernière version des outils de développement WeChat (actuellement 101100,

légèrement modifiés pour prendre en charge la communication iframe et les mises à jour automatiques ), control La page des couches est entièrement réimplémentée, en utilisant un peu de React

pour la synchronisation de l'état de l'interface utilisateur.

Installation et utilisation

1. Vous devez d'abord installer le nœud. Veuillez vous assurer que la version est supérieure à 6.0. Les versions inférieures peuvent signaler des erreurs.

2. Ensuite, exécutez dans n'importe quel répertoire :

3.npm install -g wept

4. Une fois l'installation terminée, exécutez dans le répertoire racine du projet, démo officielle. téléchargement :

5.wept

Vous pouvez démarrer le service, visitez localhost:3000 pour démarrer le débogage (il est recommandé d'utiliser les outils de développement du développeur Chrome pour activer le débogage en mode démarrage),

Vous pouvez également le modifier via le paramètre -p Port, par exemple :

wept -p 4000

N'oubliez pas d'utiliser l'adresse IP LAN de votre ordinateur pour l'accès mobile.

État de prise en charge des API

Voici l'état de prise en charge actuel de toutes les API des mini-programmes :

✓ paramètres de la fenêtre app.json

✓ Paramètres de la barre d'onglets app.json

✓ Connexion WeChat : renvoie actuellement le même statut que l'outil officiel sans appid, et renvoie

pour la simulation ✓ Obtenir l'interface d'informations utilisateur : renvoyer les données de test

✗ Initier le paiement : le même que l'outil officiel sans statut d'application et ne peut pas être utilisé

✓ Définir le titre de l'interface

✓ Animation de chargement de la barre de titre

✓ Saut de page

✓ Déroulez vers le bas pour actualiser

✓ Créer une animation

✓ Créer une peinture sur toile

✓ Obtenir l'état du réseau de téléphonie mobile : revenir au WIFI par défaut

✓ Obtenir des informations sur le système du téléphone mobile : identique à l'outil officiel, revenir à la simulation

✓ Surveillance des données de détection de gravité : prend en charge le débogage des navigateurs mobiles tels que Safari mobile, l'outil officiel (101100) le fait ne prend pas en charge

✓ Surveillance des données de la boussole : prend en charge Safari mobile En attendant le débogage du navigateur mobile, l'outil officiel (101100) ne prend pas en charge

✓ interface de demande de requête

✓ interface websocket

✓ télécharger et télécharger des fichiers

✓ Enregistrer le fichier

✓ Sélectionner/prévisualiser l'image

✓ Sélectionner la vidéo

✓ API d'enregistrement

✓ Contrôle de la lecture audio

✓ Contrôle de la musique de fond

✓ Obtenir l'emplacement actuel

✓ Utiliser la carte native pour afficher l'emplacement

✓ Stockage API synchrone

✓ API asynchrone de stockage

Future Plan

Prise en charge de la fonction d'aperçu d'image

wxml, stockage, prise en charge du panneau d'outils de développement appData

Fournir le support des outils de bureau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!