Come creare un Mini Program WeChat con WorkBuddy: Guida per principianti

Se vuoi creare un Mini Program WeChat, potresti subito trovarti bloccato da una serie di cose: WeChat Developer Tools, cartelle di progetto, AppID, ambienti di sviluppo cloud, database, caricamento e gestione delle versioni del backend.

Che cosa sono tutte queste cose? Non hai ancora scritto una riga di codice e sei già bloccato su queste complicazioni tecniche.

Non importa. Anche se non hai mai scritto codice, non hai mai creato un Mini Program o non sai nemmeno cos'è un AppID, questo articolo è scritto per te.

Come ci si sente a crearne uno in un pomeriggio

Dopo aver letto questo articolo, saprai come:

• Importare il codice in WeChat Developer Tools (senza dover prima registrare un AppID)
• Aprirlo sul tuo telefono
• Generare un codice QR da inviare agli amici per testarlo
• Inviarlo per la revisione, metterlo online e renderlo ricercabile

Prima, guarda il mio prodotto finito.

Non male, vero? Iniziamo.

I. Dieci minuti prima di iniziare

Apri WorkBuddy, trova l'esperto "WeChat Mini Program Developer" nella colonna degli esperti, delle competenze o dei connettori, e richiamalo.

Poi, non limitarti a dire "Aiutami a creare un Mini Program."

1Voglio creare un Mini Program per il monitoraggio delle abitudini quotidiane, per uso personale.
2Primo passo, cosa devo comunicarti? Non scrivere ancora codice; parliamone prima.

Sostituisci "monitoraggio delle abitudini quotidiane" con la tua idea.

Poi ti chiederà come vuoi archiviare i dati, quanto completa deve essere la prima versione, che metodo di sviluppo intendi usare, se ti servono promemoria giornalieri, quali sono i tipi di abitudini, la granularità temporale dei promemoria, le preferenze di stile visivo e, infine, ti chiederà di rifinire le dimensioni di classificazione, l'archiviazione/eliminazione e i cicli statistici.

Ti aiuta a riflettere su tutte queste domande a cui non avevi pensato e imposta la direzione.

Non mirare alla perfezione all'inizio; lascia che crei prima la versione 1.0. Una volta che hai la struttura di base, puoi modificarla e adattarla con calma. Quando la direzione è definita, lascia che inizi a lavorare.

Mentre scrive il codice, puoi installare WeChat Developer Tools.

Questo è lo strumento ufficiale di WeChat, perché il tuo Mini Program alla fine verrà eseguito, visualizzato in anteprima e caricato da qui. Cerca "WeChat Developer Tools" nella pagina di download ufficiale, seleziona la Stable Version, segui le istruzioni per installarlo e scansiona il codice per accedere. Una volta dentro, appare così:

Alcuni punti da tenere a mente:

💡 Per la prima volta, limitati a una o due funzioni. Più funzioni ci sono, più pagine da generare e più errori potrebbero saltare fuori. Sistema prima il cuore dell'app.

💡 Passa al modello HY3; non lasciarlo su auto. Al momento è gratuito per un periodo limitato con utilizzo illimitato. (Controlla nel backend se la promozione è ancora attiva quando leggi questo articolo.)

⚠️ È normale che i nomi dei menu differiscano da quelli che dico io. Questi strumenti software si aggiornano di frequente. Se hai un problema, fai uno screenshot e mandalo a WorkBuddy; ti dirà dove cliccare.

Quando il codice è pronto, ti darà il percorso della cartella del progetto. Tieni a mente questo percorso; ti servirà per il passo successivo. Di solito fornisce anche le istruzioni di importazione; se non lo fa, chiedi semplicemente: "Il codice è pronto, come lo importo in WeChat Developer Tools?"

Ora hai: un set completo di codice per il Mini Program e WeChat Developer Tools installato.

Tutto è pronto. È il momento di vedere l'anteprima del prodotto semifinito.

II. Vedere il Prodotto Semifinito

Apri WeChat Developer Tools appena scaricato, scansiona per accedere e fai clic sul pulsante +.

Poi compila questi tre campi:

1. Nome Progetto: Qualsiasi cosa ti piaccia, purché tu la riconosca.
2. Directory: Incolla l'indirizzo del passaggio precedente.
3. AppID: Potrebbe apparire in rosso; nessun problema. Fai clic su "Test Account" per continuare senza problemi.

Per Backend Service, seleziona "Do not use cloud services". Fai clic su "Create", poi su "Trust and Run". Lo strumento inizierà a creare automaticamente.

⚠️ Quando devi passare a un AppID ufficiale: Se vuoi usare WeChat Cloud Development, caricare il progetto o farlo provare ad altri, registrane uno gratuito con un'email. Il capitolo 6 spiega tutto in dettaglio.

⚠️ Inoltre, pensa attentamente alla categoria prima di registrarti. Devi scegliere tra Mini Games e altre opzioni, e non potrai modificarla in seguito.

Se tutto va bene, vedrai il tuo Mini Program nello strumento: il simulatore a sinistra e il codice a destra.

Ora hai: un Mini Program in esecuzione sul tuo computer.

Oppure potresti vedere uno schermo pieno di messaggi di errore rossi. Niente panico: si risolve facilmente.

III. Testo Rosso Ovunque? Lascia che l'Autore lo Sistemi

È normale avere errori durante la prima compilazione.

La soluzione è semplice: lascia che lo sistemi chi l'ha scritto. 😂

Nel dettaglio:

1. Trova il pannello Debugger in WeChat Developer Tools; lì ci sono tutti gli errori rossi.
2. Copia l'intero messaggio di errore—non fare uno screenshot parziale o parafrasarlo.
3. Invialo a WorkBuddy. Non devi nemmeno dire niente; lo sistemi lui.

Dopo l'analisi, lo sistemi direttamente nel codice oppure ti guiderà attraverso le impostazioni necessarie.

Due cose da tenere a mente:

⚠️ Un tipo di "errore" non è in realtà un errore: i Mini Program non supportano alcune tecniche di codifica tipiche del web (come certi selettori o effetti hover). Se sul computer sembra strano, è perché il Mini Program non lo supporta. Dì semplicemente all'IA: "Questo effetto non è supportato nei Mini Program, usa un altro metodo."

⚠️ Un altro è un "falso" errore: le modifiche non vengono applicate. Non dubitare ancora dell'IA; fai clic sul pulsante di aggiornamento "Compile" accanto a "Normal Compilation" in alto a destra. Di solito risolve il problema.

Ora hai: un Mini Program che funziona fluidamente, senza schermate bianche o problemi.

Sul simulatore del computer è perfetto, ma su un telefono reale potrebbe non essere lo stesso.

IV. Sul PC Sembra Ottimo, ma sul Telefono Forse No

È comune che gli stili risultino disallineati o che i pulsanti non siano cliccabili su un telefono reale, anche se funzionano nel simulatore. Le dimensioni dello schermo e il tatto rispetto al mouse sono diversi.

Per averlo sul telefono, fai clic su un solo pulsante: Preview.

Lo strumento genera un codice QR. Scansionalo con WeChat e il tuo Mini Program si apre sul telefono.

Qui è dove le persone si confondono: Preview, Real Machine Test e Remote Debugging generano tutti codici QR. Qual è la differenza?

⚠️ Non usare Preview come test finale. Preview serve solo per una rapida occhiata; non significa che tutto funzioni. Usa Real Machine Test per conferma.

⚠️ Un'altra cosa: per facilitare lo sviluppo, alcuni controlli sono disabilitati nello strumento, ma sui dispositivi reali sono ancora attivi. A volte funziona sul PC ma fallisce sul telefono.

Ora hai: un Mini Program che si apre sul tuo telefono.

Probabilmente non vedi l'ora di inviare il codice a un amico. Aspetta: esegui prima questi cinque controlli, o potrebbe essere pieno di bug! 😂

V. Non Far Testare i Tuoi Bug agli Amici

Cinque minuti. Esegui questi cinque controlli da solo:

1. Aggiunta: aggiungi una nuova voce; appare nell'elenco?
2. Stato: passa da completato a non completato; funziona?
3. Riapertura: esci dal Mini Program e riaprilo; i dati che hai appena aggiunto sono ancora lì?
4. Eliminazione: elimina una voce; rimane eliminata dopo l'aggiornamento?
5. Valori vuoti: fai clic su aggiungi senza compilare nulla; dovrebbe mostrare un avviso e non creare un record vuoto.

Gli elementi 3 e 5 vengono spesso trascurati se non li testi esplicitamente.

Dopo aver sistemato un elemento, riesegui tutti e cinque. Sistemare A spesso rompe B.

⚠️ Superare tutti e cinque significa solo che non andrà in crash all'istante. È un processo di rifinitura in cui ti imbatti in problemi strani o arrivano nuove idee. Alla fine avrai una versione di cui sei soddisfatto.

Ora hai: un Mini Program rifinito che ti soddisfa.

Ora ti serve solo un'ultima cosa per inviarlo agli amici: un'identità ufficiale.

VI. Invia un Codice che gli Amici Possano Scansionare

Per permettere ad altri di scansionarlo, ti serve un AppID ufficiale. Ecco come registrarlo:

1. Apri la piattaforma WeChat degli Official Accounts e segui la procedura di registrazione. Esistono diversi tipi: Official Accounts, Mini Programs, Mini Games. Scegli Mini Program. ⚠️ Se scegli quello sbagliato non puoi cambiarlo; dovresti cancellare e ricominciare.
2. Usa un'email pulita. Inserisci l'email, fai clic su attiva, inserisci il codice di verifica inviato alla tua casella di posta e imposta una password.

1. Seleziona il soggetto. Per uso personale, scegli "Individual". Richiede la verifica dell'identità e una scansione WeChat; è gratuito.
2. Accedi al backend, trova l'AppID in Development Management. Inizia con "wx"; copialo.

Quando hai l'AppID, invia questo messaggio al tuo WorkBuddy:

1Cambia l'AppID nel progetto con il mio AppID: [la tua stringa wx...]

Poi torna a WeChat Developer Tools e fai clic su "Upload" in alto a destra.

Ti chiederà un numero di versione e delle note. Usa 0.0.1 per la prima volta. Dopo il caricamento, vai alla pagina Version Management nel backend di WeChat. Vedrai la versione; fai clic sulla freccia in giù per trovare la "Trial Version". Una volta impostata, ti darà un codice QR di prova.

Ora puoi mostrare il tuo Mini Program agli amici! Possono usarlo scansionando il codice, senza che tu debba pubblicarlo o superare una revisione ufficiale.

Due cose da tenere a mente:

In primo luogo, caricare non significa pubblicare. Il caricamento mette solo la versione di sviluppo nel backend. Non è ancora indicizzato nei risultati di ricerca; solo chi ha il codice può entrare.

In secondo luogo, le Trial Version hanno una scadenza. Di solito sette giorni. Basta ricaricare per ottenere un nuovo codice. È perfetto per demo o per condividere con pochi amici.

⚠️ Per molti questo basta. Se è solo per uso personale o per gli amici, la Trial Version funziona benissimo. Spiegherò la certificazione e la registrazione nei prossimi capitoli.

Ora hai: un codice QR di prova da inviare agli amici.

Hai creato un vero Mini Program. Ma se un amico aggiunge dati e chiude l'app, questi spariscono. Come salviamo i dati?

VII. Non Perdere i Dati Quando Chiudi

Non abbiamo ancora risolto dove vengono archiviati i tuoi dati.

Se i dati esistono solo localmente sul telefono, si perdono se cambi telefono o vuoi condividerli. Ti serve un backend. Impostare il tuo backend comporta server, database, domini, HTTPS e pratiche di registrazione. Evitiamo la seccatura e usiamo Cloud Development. Il database e la logica sono nel cloud; il Mini Program li richiama direttamente.

1. Fai clic su "Cloud Development" in alto nello strumento → Attiva → Annota l'Environment ID.

Quando fai clic su Attiva, potrebbe mostrare una tariffa di 19,9 RMB al mese, ma aspetta: dovrebbe guidarti automaticamente verso un ambiente di sviluppo gratuito.

1. Copia l'Environment ID e invialo a WorkBuddy per impostare l'ID in globalData.env.

1. Console di Cloud Development → Database → Crea collezioni come categories / habits / checkins. Imposta i permessi su "Creator only can read/write". WorkBuddy ti dirà quali collezioni creare.

1. Fai clic con il tasto destro su cloudfunctions/login → Upload and Deploy: Install cloud dependencies. Questo assicura che la funzione cloud possa trovare i pacchetti di cui ha bisogno.

Un consiglio: se non riesci a trovare cloudfunctions nel progetto, potrebbe essere che la cartella di importazione è sbagliata. Cambiala con la cartella principale.

Ora che l'archivio dati è pronto, ricarica il progetto. Ti chiederà l'AppID e l'Environment ID cloud.

⚠️ Non puoi usare un account di test per questo; ti serve un AppID ufficiale.

⚠️ Cloud development a volte offre promozioni per i nuovi utenti, ma sono a tempo limitato.

Reimporta la versione che salva i dati, incolla il tuo AppID e seleziona "WeChat Cloud Development" come servizio backend. Ora i dati sono connessi.

L'archiviazione dei dati è fatta. Se vuoi che estranei ti trovino o usarlo a livello commerciale, inizia la vera sfida.

VIII. Farsi Trovare dagli Sconosciuti

Superare una Trial Version è diverso dal superare una revisione ufficiale.

Prima esegui questi sei controlli:

1. L'AppID è ufficiale? Gli account di test non possono andare live.
2. Fai clic su ogni pagina. Niente schermate bianche o crash.
3. Configura i domini del server. Se l'app recupera dati esterni, quei domini devono essere configurati nel backend (Development → Development Settings). Sono consentiti solo HTTPS e WSS, e il dominio deve essere registrato (ICP). Gli IP non sono consentiti.
4. Deseleziona "Do not verify request domain..." negli strumenti di sviluppo. Funziona solo nello strumento; i dispositivi reali verificano comunque. Disattivalo e testa di nuovo.
5. Compila la Guida per la protezione della privacy degli utenti. Se la tua app legge avatar, posizione o contatti, devi dichiararlo. Altrimenti, quelle API verranno disabilitate. Salta questo passaggio se non tocchi le informazioni degli utenti.
6. Completa nome, avatar, intro e categoria nel backend. Scegliere la categoria sbagliata è un motivo comune di rifiuto.

💡 Se usi Cloud Development o non usi internet, salta i passaggi 3 e 4.

🔴 Ho preparato questo per te; invialo direttamente a WorkBuddy:

1Sto inviando un Mini Program WeChat per la revisione. Aiutami a verificare questo progetto rispetto a questi punti.
2Sistema ciò che puoi, e dimmi cosa devo compilare manualmente.
3Controlla se l'appid in project.config.json è un account di test.
4Elenca tutti i percorsi delle pagine in app.json così posso controllare le schermate bianche.
5Cerca nel progetto wx.request, wx.uploadFile, wx.downloadFile e wx.connectSocket.
6Estrai tutti i domini e raggruppali in queste quattro categorie.
7Segna quelli che non iniziano con https/wss o che usano IP, così posso configurarli nel backend.
8Cambia urlCheck in project.config.json in true se è false.
9Cerca le API relative alle informazioni utente (avatar, posizione, contatti, ecc.) ed elenca quali file/righe le usano.
10Le userò per la Guida alla protezione della privacy.
11Controlla se ci sono residui di codice di debug console.log.
12Infine, dammi una tabella riassuntiva con: Voce di controllo, Stato attuale e Passo successivo.

⚠️ Non saltare il passaggio 2. Le revisioni ufficiali richiedono un prodotto completo. Il rifiuto per "funzionalità incompleta" è comune.

Poi ci sono 4 ostacoli prima dell'invio:

1️⃣ Informazioni sul Mini Program

• Nome: Qualcosa di riconoscibile (es. "Habit Tracker"). Gli account personali non possono usare "Official" o "WeChat".
• Icona: PNG 1024x1024.
• Intro: Una frase che spiega la funzione.
• Ambito del servizio: Scegli "Tools > Efficiency" o "Life Services".

2️⃣ Categoria

Gli account personali sono limitati. Consigliato: Tools > Efficiency o Notepad. La categoria determina quali API puoi usare.

3️⃣ Registrazione (ICP)

Dal 2024, tutti i Mini Program devono avere la registrazione ICP. Ti serve una foto del documento e la verifica del volto. Richiede 1-3 giorni lavorativi.

4️⃣ Certificazione WeChat (Opzionale ma consigliata)

Gli account personali possono essere certificati per 300 RMB all'anno. Se non vuoi pagare, puoi saltare il passaggio: non ti impedirà di pubblicare, ma non sarai ricercabile.

Motivi comuni di rifiuto: mancanza di qualifiche mediche/finanziarie, mancanza di permessi per lo streaming live o funzionalità incomplete. La revisione di solito richiede 1-7 giorni.

Visto? Ce l'Hai Fatta

Hai parlato con l'IA, e il codice è apparso.

Hai inserito un percorso, e la pagina è comparsa.

Hai rimandato indietro il testo rosso, e si è sistemato da solo.

Hai scansionato un codice, e ha funzionato sul tuo telefono.

Hai fatto clic su Upload, e i tuoi amici hanno potuto scansionarlo.

Dall'inizio alla fine, nessuna conoscenza di programmazione richiesta.

Stasera fai solo una cosa: installa WeChat Developer Tools. Ci vogliono dieci minuti.

Una volta installato, non vedrai l'ora di buttarci dentro qualcosa e farlo girare. A quel punto, avrai già iniziato.

Se conosci qualcuno che vuole creare un Mini Program ma non ha ancora iniziato, inviagli questo articolo. Gli farà risparmiare un weekend.

Io sono Song Song. Continuerò a condividere contenuti utili.