Як створити міні-програму WeChat за допомогою WorkBuddy: посібник для початківців

Якщо ти хочеш створити мініпрограму WeChat, тебе, найімовірніше, одразу заблокує купа речей: інструменти розробника WeChat, каталоги проєкту, AppID, хмарні середовища розробки, бази даних, завантаження та керування версіями на бекенді.

Що це все таке? Ти ще не написав жодного рядка коду, а вже застряг на цих технічних деталях.

Неважливо. Навіть якщо ти ніколи не писав код, не створював мініпрограм або не знаєш, що таке AppID, ця стаття написана саме для тебе.

Як це — створити мініпрограму за один вечір

Прочитавши цю статтю, ти дізнаєшся, як:

• Імпортувати код в інструменти розробника WeChat (без необхідності спершу реєструвати AppID)
• Відкрити його на власному телефоні
• Згенерувати QR-код, щоб надіслати друзям для тестування
• Подати на перевірку, запустити в продакшн і стати доступним для пошуку

Спершу подивись на мій готовий результат.

Виглядає непогано, правда? Поїхали.

I. Десять хвилин перед стартом

Відкрий WorkBuddy, знайди експерта «Розробник мініпрограм WeChat» у колонці «Експерти», «Навички» або «Конектори» та виклич його.

А потім не кажи просто «Допоможи мені створити мініпрограму».

1Я хочу створити мініпрограму для щоденного відстеження звичок для власного користування.
2Перший крок — що мені потрібно з тобою обговорити? Не пиши код; спершу обговоримо.

Заміни «щоденне відстеження звичок» на свою ідею.

Далі він запитає тебе, як ти хочеш зберігати дані, наскільки повною має бути перша версія, який метод розробки ти плануєш використати, чи потрібні щоденні нагадування, які типи звичок, часовий крок нагадувань, уподобання щодо візуального стилю, а наприкінці попросить уточнити виміри категоризації, архівування/видалення та статистичні цикли.

Він допомагає тобі продумати всі ці питання, про які ти не задумувався, і задає напрямок.

Не прагни досконалості на початку; дозволь йому спершу створити версію 1.0. Коли в тебе буде базовий каркас, можна буде повільно його налаштовувати та змінювати. Щойно напрямок визначено — дай йому почати працювати.

Поки він пише код, ти можеш установити інструменти розробника WeChat.

Це офіційний інструмент від WeChat, адже саме звідси твоя мініпрограма буде запускатися, попередньо переглядатися та завантажуватися. Знайди «Інструменти розробника WeChat» на офіційній сторінці завантажень, обери Stable Version, дотримуйся підказок для встановлення та ввійди, відсканувавши QR-код. Усередині це виглядає так:

Кілька моментів, на які варто звернути увагу:

💡 Вперше обмежся однією-двома функціями. Що більше функцій, то більше сторінок потрібно згенерувати та більше помилок може виникнути. Спочатку виправ основне.

💡 Перемкни модель на HY3, не залишай на автовиборі. Зараз вона безкоштовна обмежений час і без лімітів використання. (Перевір у бекенді, чи акція ще активна, коли ти читатимеш це.)

⚠️ Назви меню часто відрізняються від того, що я описую. Ці інструменти часто оновлюються. Якщо виникне проблема, просто надішли скріншот у WorkBuddy, і він підкаже, куди натискати.

Коли код буде готовий, він надасть тобі шлях до папки проєкту. Запам'ятай цей шлях — він знадобиться на наступному кроці. Зазвичай він надає інструкції з імпортування; якщо ні, просто запитай: «Код готовий, як імпортувати його в інструменти розробника WeChat?»

Тепер у тебе є: повний набір коду мініпрограми та встановлені інструменти розробника WeChat.

Усе готово. Час переглянути напівготовий продукт.

II. Перегляд напівготового продукту

Відкрий щойно завантажені інструменти розробника WeChat, ввійди, відсканувавши код, і натисни кнопку «+».

Потім заповни ці три поля:

1. Project Name: Будь-яка назва, яка тобі подобається, головне, щоб ти її впізнавав.
2. Directory: Встав адресу з попереднього кроку.
3. AppID: Може показуватися червоним; це нормально. Натисни «Test Account», щоб продовжити без проблем.

Для Backend Service обери «Do not use cloud services». Натисни Create, а потім «Trust and Run». Інструмент почне автоматичне збирання.

⚠️ Коли потрібно перейти на справжній AppID: Якщо ти хочеш використовувати хмарну розробку WeChat, завантажувати код у бекенд або дати можливість іншим спробувати, зареєструй безкоштовний за допомогою електронної пошти. Розділ 6 пояснює це детально.

⚠️ Також добре подумай про категорію перед реєстрацією. Тобі доведеться обирати між мінііграми та всім іншим, і це не можна буде змінити пізніше.

Якщо все йде добре, ти побачиш свою мініпрограму в інструменті: симулятор зліва та код справа.

Тепер у тебе є: мініпрограма, яка працює на твоєму комп'ютері.

Або ж ти можеш побачити екран, повний червоного тексту з помилками. Не панікуй; це легко виправити.

III. Усюди червоний текст? Дай автору виправити

Помилки під час першого збирання — це нормально.

Рішення просте: нехай той, хто писав код, його й виправляє. 😂

А саме:

1. Знайди панель Debugger в інструментах розробника WeChat; усі червоні помилки там.
2. Скопіюй повідомлення про помилку повністю — не надсилай частковий скріншот і не переказуй своїми словами.
3. Надішли його у WorkBuddy. Тобі навіть не потрібно нічого пояснювати; він виправить це за тебе.

Проаналізувавши, він або одразу виправить код, або проведе тебе через необхідні налаштування.

Два моменти, на які варто звернути увагу:

⚠️ Один тип «помилок» насправді не є помилкою: мініпрограми не підтримують деякі вебстилі коду (наприклад, певні селектори або hover-ефекти). Якщо на комп'ютері щось виглядає дивно, це тому, що мініпрограма це не підтримує. Просто скажи ШІ: «Мініпрограми не підтримують цей ефект, використай інший спосіб.»

⚠️ Інша — «фейкова» помилка: зміни не застосовуються. Не сумнівайся одразу в ШІ; натисни кнопку оновлення «Compile» поруч із «Normal Compilation» у верхньому правому куті. Зазвичай це вирішує проблему.

Тепер у тебе є: бездоганна мініпрограма без білих екранів та проблем.

На комп'ютерному симуляторі вона виглядає чудово, але на реальному телефоні все може бути інакше.

IV. На ПК виглядає добре, але на мобільному — можливо, ні

Часто буває, що на реальному телефоні стилі з'їжджають або кнопки не натискаються, навіть якщо в симуляторі все працює. Розміри екранів і сенсорне керування проти миші — це зовсім різні речі.

Щоб запустити її на телефоні, натисни одну кнопку: Preview.

Інструмент генерує QR-код. Відскануй його через WeChat — і твоя мініпрограма відкриється на телефоні.

Ось де люди плутаються: Preview, Real Machine Test і Remote Debugging — усі вони генерують QR-коди. У чому різниця?

⚠️ Не використовуй Preview як фінальний тест. Preview — це лише швидкий перегляд; він не означає, що все працює. Використовуй Real Machine Test для підтвердження.

⚠️ І ще одне: щоб полегшити розробку, деякі перевірки вимкнені в інструменті, але на реальних пристроях вони все одно активні. Іноді на ПК усе працює, а на мобільному — ні.

Тепер у тебе є: мініпрограма, яка відкривається на твоєму телефоні.

Тобі, напевно, уже кортить надіслати код другові. Зачекай — спершу пройди ці п'ять перевірок, інакше вона буде повна багів! 😂

V. Не давай друзям тестувати твої баги

Це займе п'ять хвилин. Пройди ці п'ять пунктів самостійно:

1. Додавання: додай новий запис; чи з'являється він у списку?
2. Статус: перемикай між виконаним і невиконаним; чи працює?
3. Повторний вхід: закрий мініпрограму та відкрий її знову; чи дані, які ти щойно додав, досі на місці?
4. Видалення: видали запис; чи він зникає назавжди після оновлення?
5. Порожні значення: натисни «додати», не заповнюючи нічого; має з'явитися підказка, а порожній запис не має створюватися.

Пункти 3 і 5 часто пропускають, якщо спеціально їх не тестувати.

Після виправлення будь-якого пункту пройди всі п'ять знову. Виправлення A часто ламає B.

⚠️ Проходження всіх п'яти пунктів означає лише, що програма не впаде одразу. Це процес шліфування, під час якого ти знайдеш дивні проблеми або отримаєш нові ідеї. Зрештою, ти отримаєш версію, якою будеш задоволений.

Тепер у тебе є: відшліфована мініпрограма, яка тобі подобається.

Тепер тобі потрібна лише одна річ, щоб надіслати її друзям: офіційна ідентичність.

VI. Надішли код, який друзі можуть відсканувати

Щоб інші могли його відсканувати, тобі потрібен офіційний AppID. Як зареєструватися:

1. Відкрий офіційну платформу WeChat Official Accounts Platform і пройди процес реєстрації. Є кілька типів: Official Accounts, Mini Programs, Mini Games. Обери Mini Program. ⚠️ Якщо обереш неправильно, це не можна буде змінити; доведеться видаляти все та починати спочатку.
2. Використай чисту електронну пошту. Введи email, натисни «активувати», введи код підтвердження, надісланий на скриньку, та встанови пароль.

1. Обери суб'єкта. Для особистого використання обери «Individual». Це вимагає верифікації ID та сканування через WeChat; це безкоштовно.
2. Увійди в бекенд і знайди AppID у розділі Development Management. Він починається з «wx»; скопіюй його.

Щойно в тебе буде AppID, надішли це у WorkBuddy:

1Зміни AppID у проєкті на мій AppID: [твій рядок wx...]

Потім повернися в інструменти розробника WeChat і натисни «Upload» у верхньому правому куті.

Воно запитає номер версії та нотатки. Для першого разу використай 0.0.1. Після завантаження перейди на сторінку Version Management у бекенді WeChat. Ти побачиш версію; натисни стрілку вниз, щоб знайти «Trial Version». Після налаштування отримаєш Trial QR-код.

Тепер ти можеш похизуватися мініпрограмою перед друзями! Вони можуть користуватися нею, просто відсканувавши код, без необхідності публікувати чи проходити офіційну перевірку.

Два моменти, на які варто звернути увагу:

По-перше, завантаження — це не публікація. Завантаження лише розміщує версію для розробників у бекенді. Вона ще не доступна для пошуку; зайти можуть лише ті, хто має код.

По-друге, пробні версії мають термін дії. Зазвичай сім днів. Просто завантаж код повторно, щоб отримати новий QR-код. Це ідеально для демо або поширення серед кількох друзів.

⚠️ Для багатьох цього достатньо. Якщо це лише для особистого використання або для друзів, пробна версія працює чудово. Я поясню сертифікацію та ліцензування в наступних розділах.

Тепер у тебе є: пробний QR-код, який можна надіслати друзям.

Ти створив справжню мініпрограму. Але якщо друг додасть дані та закриє застосунок, вони зникнуть. Як зберегти дані?

VII. Не втрачай дані під час закриття

Ми ще не розв'язали питання, де зберігаються твої дані.

Якщо дані існують лише локально на телефоні, вони втрачаються під час зміни телефону або якщо ти хочеш ними поділитися. Тобі потрібен бекенд. Налаштування власного бекенду передбачає сервери, бази даних, домени, HTTPS та ліцензування. Оминемо ці клопоти та скористаємося хмарною розробкою. База даних і логіка — у хмарі; мініпрограма викликає їх безпосередньо.

1. Натисни «Cloud Development» угорі інструмента → Activate → Занотуй Environment ID.

Коли ти натиснеш «активувати», може показати плату 19,9 RMB/міс, але зачекай — він має автоматично скерувати тебе до безкоштовного середовища розробки.

1. Скопіюй Environment ID і надішли його у WorkBuddy, щоб налаштувати ID у globalData.env.

1. Cloud Development Console → Database → Створи колекції на кшталт categories / habits / checkins. Встанови права доступу «Лише творець може читати/записувати». WorkBuddy підкаже, які колекції створити.

1. Клацни правою кнопкою на cloudfunctions/login → Upload and Deploy: Install cloud dependencies. Це гарантує, що хмарна функція знайде необхідні пакети.

Порада: якщо ти не можеш знайти cloudfunctions у своєму проєкті, можливо, ти імпортував неправильну папку. Зміни її на батьківську.

Тепер, коли збереження даних готове, перезавантаж проєкт. Він запитає AppID та Cloud Environment ID.

⚠️ Для цього не можна використовувати тестовий акаунт — тобі потрібен офіційний AppID.

⚠️ Хмарна розробка іноді має акції для нових користувачів, але вони обмежені в часі.

Переімпортуй версію, яка зберігає дані, встав свій AppID і обери «WeChat Cloud Development» для бекенд-сервісу. Тепер дані підключено.

Збереження даних готове. Якщо ти хочеш, щоб незнайомці могли тебе знайти, або плануєш комерційне використання — починається справжній виклик.

VIII. Дозволь незнайомцям знайти тебе

Проходження пробної версії відрізняється від проходження офіційної перевірки.

Спершу пройди ці шість самоперевірок:

1. Чи є AppID офіційним? Тестові акаунти не можна публікувати.
2. Натисни кожну сторінку. Жодних білих екранів або падінь.
3. Налаштуй серверні домени. Якщо твій застосунок отримує зовнішні дані, ці домени мають бути налаштовані в бекенді (Development → Development Settings). Дозволені лише HTTPS і WSS, а домен має бути ліцензований (ICP). IP-адреси не дозволені.
4. Зніми позначку «Do not verify request domain...» в інструментах розробника. Це працює лише в інструменті; реальні пристрої все одно перевірятимуть. Вимкни це та протестуй знову.
5. Заповни User Privacy Protection Guide. Якщо твій застосунок читає аватари, геолокацію або контакти, ти маєш це задекларувати. Інакше ці API будуть вимкнені. Пропусти цей пункт, якщо не працюєш із даними користувачів.
6. Заповни назву, аватар, опис і категорію в бекенді. Неправильно обрана категорія — часта причина відмови.

💡 Якщо ти використовуєш хмарну розробку або не користуєшся інтернетом, пропусти пункти 3 і 4.

🔴 Я підготував це для тебе; просто надішли у WorkBuddy:

1Я подаю мініпрограму WeChat на перевірку. Допоможи мені перевірити цей проєкт за цими пунктами.
2Виправ усе, що можна, і скажи, що мені потрібно заповнити вручну.
3Перевір, чи appid у project.config.json не є тестовим акаунтом.
4Перелічи всі шляхи сторінок у app.json, щоб я міг перевірити на білі екрани.
5Пошукай у проєкті wx.request, wx.uploadFile, wx.downloadFile і wx.connectSocket.
6Згрупуй усі домени в ці чотири категорії.
7Познач усі, що не починаються з https/wss або використовують IP, щоб я міг налаштувати їх у бекенді.
8Зміни urlCheck у project.config.json на true, якщо він false.
9Пошукай API для роботи з даними користувача (аватар, геолокація, контакти тощо) та перелічи, у яких файлах/рядках вони використовуються.
10Я використаю це для Privacy Protection Guide.
11Перевір, чи не лишилися debug-коди console.log.
12Насамкінець дай мені зведену таблицю: Пункт перевірки, Поточний статус і Наступний крок.

⚠️ Не пропускай пункт 2. Офіційна перевірка вимагає завершеного продукту. Відмова через «неповну функціональність» — поширена практика.

Далі — 4 перешкоди перед поданням:

1️⃣ Інформація про мініпрограму

• Назва: щось упізнаване (наприклад, «Відстеження звичок»). Особисті акаунти не можуть використовувати «Official» або «WeChat».
• Іконка: PNG 1024x1024.
• Опис: одне речення, що пояснює функцію.
• Сфера послуг: обери «Tools > Efficiency» або «Life Services».

2️⃣ Категорія

Особисті акаунти мають обмеження. Рекомендовано: Tools > Efficiency або Notepad. Категорія визначає, які API ти можеш використовувати.

3️⃣ Ліцензування (ICP)

Починаючи з 2024 року, усі мініпрограми мають пройти ICP-ліцензування. Тобі знадобиться фото ID та верифікація обличчям. Це займає 1–3 робочі дні.

4️⃣ Сертифікація WeChat (необов'язково, але рекомендовано)

Особисті акаунти можуть отримати сертифікацію за 300 RMB/рік. Якщо не хочеш платити, можна пропустити — це не завадить публікації, але ти не будеш доступним для пошуку.

Поширені причини відмови: відсутність медичної/фінансової кваліфікації, відсутність дозволів на трансляції або неповна функціональність. Перевірка зазвичай триває 1–7 днів.

Бачиш? У тебе вийшло

Ти поговорив зі ШІ — і код з'явився.

Ти вставив шлях — і сторінка відобразилася.

Ти надіслав назад червоний текст — і він виправився.

Ти відсканував код — і все запрацювало на твоєму телефоні.

Ти натиснув «завантажити» — і друзі змогли відсканувати.

Від початку до кінця — жодних знань програмування не потрібно.

Зроби лише одну річ сьогодні ввечері: установи інструменти розробника WeChat. Це займе десять хвилин.

Щойно встановиш — тобі не терпітиметься щось у них запустити. А значить, ти вже почав.

Якщо хтось із твоїх знайомих хоче створити мініпрограму, але ще не почав, надішли йому цю статтю. Це зекономить їм вихідні.

Я — Song Song. Продовжую ділитися корисним контентом.