Примечание для разработчиков
Это техническая статья, посвященная фактическому кодированию последних мини-программ Wechat. Вы можете ознакомиться с другими моими статьями: Введение в мини-программы и с пошаговым руководством по регистрации для разработки собственной мини-программы.
Прямо из Руководства Wechat для разработчиков мини-программ (только на китайском) я делюсь здесь примером кода, предоставленным Wechat, в надежде дать вам несколько идей о том, как работать с этим новым продуктом.
Пример кода поможет вам завершить мини-программу, которую можно просмотреть на телефоне. На главной странице мини-программы будет отображаться приветствие и фотография текущего пользователя; когда вы нажмете на выстрел в голову, вы увидите журнал запуска этой мини-программы.
Получите AppID для своей мини-программы
Перейдите на http://mp.weixin.qq.com, войдите в систему, используя свои учетные данные Mini Program (см. Руководство по регистрации здесь). Перейдите в Настройки (设置) ， и Настройки разработчика (开发 者 设置) ，, где вы сможете найти AppID своей мини-программы.
Создать проект
Во-первых, вам необходимо скачать официальную программу разработки: windows 64 、 windows 32 、 mac
Откройте программу и с помощью WeChat администратора отсканируйте QR-код запуска для входа в систему. Выберите «Создать проект» (创建 项目).
Введите AppID вашей мини-программы, «Имя проекта» (项目 名称) ， и папку для сохранения журнала кодирования (项目 目录). И нажмите «Добавить проект» (添加 项目) для завершения.
Предназначен для быстрого ознакомления новичков с базовыми структурами кодирования мини-программ Wechat, когда целевая папка журнала пуста, появляется запрос с вопросом «Вы хотите создать проект« быстрого старта »» (是否 需要 创建 一个 quick start 项目 ). Когда вы нажмете «да» (是) ，, программа разработки поможет вам создать простую демонстрацию в папке назначения.
После создания проекта мы можем щелкнуть и войти в интерфейс кодирования. В левом столбце навигации вы можете нажать «Изменить» (编辑), чтобы просмотреть и отредактировать код. В «Тест» (调试) вы можете протестировать и смоделировать, как программа выглядит в пользовательском интерфейсе. В «Проект» вы можете отправить программу на мобильный телефон для предварительного просмотра.
Кодирование
Создайте мини-программу -
Нажмите «Изменить» (编辑) в левом столбце навигации, мы увидим, что демонстрационная программа уже содержит несколько простых кодов. Наиболее важные три элемента: app.js, app.json, app.wxss.
.js обозначает файл сценария, .json обозначает файл конфигурации, а .wxss обозначает таблицу стилей.
Давайте рассмотрим функции этих трех типов файлов, чтобы помочь вам в написании кода.
app.js - это файл сценария мини-программы. Мы можем отслеживать и обрабатывать функцию жизненного цикла (生命 周期 函数) и объявлять глобальные переменные (全局 变量) в этом файле. Доступен широкий спектр API. В этом примере используются синхронизация чтения локальных данных и синхронизация сохранения локальных данных (同步 存储 本地 数据 & 同步 读取 本地 数据). Чтобы узнать больше о доступном API, отметьте здесь.
Файл app.json позволяет настроить мини-программу на макроуровне. Вы можете определить страницы своей мини-программы, настроить цвет фона окна программы, выбрать стиль панели навигации, задать заголовок по умолчанию. Примечание: вы не можете добавлять аннотации к этому файлу. Подробнее об элементах конфигурации здесь.
Файл app.wxss - это общая таблица стилей для всей мини-программы. Вы можете напрямую использовать правила стиля, объявленные app.wxss на каждой странице программы.
Создавать страницы -
В этом руководстве по коду есть две страницы: страница индекса и страница журналов, то есть страница приветствия и страница отображения журнала запуска. Оба они находятся в каталоге страницы.
Путь + имя страницы каждой страницы должен быть записан в страницах файла app.json, а первая страница - в разделе pages всегда должна быть домашней страницей мини-программы.
Каждая мини-страница программы состоит из четырех разных файлов с одинаковыми именами по одному и тому же пути, например, index.js, index.wxml, index.wxss, index.json.
.js - файл сценария страницы, .json - файл конфигурации страницы, .wxss - таблица стилей страницы, а . wxml - это файл структуры страницы.
Файл index.wxml выглядит следующим образом. В этом примере ‹view›, ‹image›, ‹text› используются для создания страницы, привязки данных и обработки функций.
index.js - файл сценария страницы. В этом файле мы можем отслеживать и обрабатывать «функцию жизненного цикла» (生命 周期 函数), получать «мини-демонстрацию программы» (小 程序 实例), «объявлять и обрабатывать данные» (声明 并 处理 数据), реагировать на «интерактивные события». (交互 事件) и т. Д .:
index.wxss - таблица стилей страницы. Это не обязательно. Если он есть, таблица стилей страницы будет охватывать правила стиля app.wxss ’. Если вы не укажете таблицу стилей страницы, app.wxss можно напрямую применить к странице.
index.json - файл конфигурации страницы. Это тоже не обязательно. Тот же случай, что и в примере выше index.wxss.
Структура страницы для журналов показана ниже .
На странице Журналы используйте ‹block /› для упорядочивания кода. В ‹block /› используйте wx: for для привязки данных журналов и используйте данные журналов для циклического развертывания узлов.
Результаты при запуске программы:
Предварительный просмотр на телефоне
На левой панели навигации выберите «Проект» (项目) и нажмите «Предварительный просмотр» (预览). Отсканировав запрос QR-кода, вы сможете просмотреть мини-программу в своем интерфейсе Wechat.
Есть форум, посвященный мини-программе по всем вопросам. Но он на китайском… поэтому WeChat не облегчает работу международных разработчиков. Надеюсь, что это изменится, поскольку WeChat стремится завоевать большую долю рынка за пределами Китая.
