Руководство по разработке приложений для персональных мини-программ

Taro
Руководство по разработке приложений для персональных мини-программ

Добавить Автора

Оригинальная постоянная ссылка: https://github.com/AttemptWeb/Record…

Небольшие программы привязаны к основным платформам. Alipay, WeChat, Toutiao, Baidu и другие небольшие программы разрабатываются на платформе, и платформа обеспечивает соответствующую техническую поддержку и пользовательскую среду. Для индивидуальных разработчиков это достаточно удобно, имеет атрибуты трафика и легко распространяется.

Удобная разработка

Недавно я работал над своим собственным апплетом, поэтому подытожу всю статью.Если вы уже разрабатывали небольшие программы, вам не нужно читать эту статью..

Мини программа разработки достаточно удобная, с официальной документацией,Документация по мини-программе WeChat,Документация по программе Alipay Mini, вы можете запустить его локально. Если это просто простое отображение, вам нужно только загрузить его после разработки и дождаться проверки. Имея небольшую предварительную базу, вы можете разработать свою собственную небольшую программу, а студенты, у которых есть идеи, смогут действовать.

Если во время разработки возникнет проблема, вы также можете обратиться за помощью в сообщество Mini Program.Micro-Channel Small Community Program.

Не для официальной рекламы. Если вы хотите разработать собственное приложение, Mini Program — это решение для быстрого запуска, удобная разработка, быстрый выпуск и собственная функция связи.Ниже я выбираю апплет WeChat, чтобы объяснить.

Разработка собственного апплета WeChat

Документация по мини-программе WeChat

<!-- 项目目录结构 -->

|—— component               组件目录
|—— pages                   page页面目录
|   ......more dir           
|   |—— index               index页面
|   |  |—— index.js         index.js- js逻辑文件     
|   |  |—— index.json       index.json- json配置文件
|   |  |—— index.wxml       index.wxml- wxml页面结构
|   |  |—— index.wxss       index.wxss- wxss页面样式
|—— app.js                  全局js文件
|—— app.json                全局json配置文件
|—— app.wxss                全局样式文件
|—— project.config.json     项目配置
|—— sitemap.json            爬虫文件

Импортируйте проект вИнструменты разработки мини-программ, вы можете начать разработку. Чтобы добавить страницу, добавьте новый каталог файлов непосредственно в каталог pages. Ссылка для конкретных деталейДокументация по мини-программе WeChat

Поддержка синтаксиса:

  • На данный момент последняя версия библиотеки уже поддерживает Es6/Es7, async/await и Promise;
  • Инструмент разработки преобразует код в синтаксис Es5, чтобы обеспечить адаптацию стиля различных моделей;
  • Часть синтаксиса похожа на vue и react;

Поддержка компонентов:

Поддержка API:

  • Вы можете вызывать собственные методы инкапсулированной системы, такие как Bluetooth, сетевая информация, сканирование кода и другие методы API;
  • Обычные методы, такие как: Хранение, Запрос, Анимация, Холст и т. Д. Еще можно посмотретьAPI мини-программы WeChat;

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

Таро развития

Документация по разработке Таро, Taro поддерживает многостороннюю разработку, включая апплет WeChat/Baidu/Alipay/Toutiao, H5, React-Native.В настоящее время я разработал только апплет WeChat, апплет Alipay, H5 и другие не пробовал.

|—— config                              开发配置文件
|—— dist                                目标文件目录
|—— src                                 开发目录
|   |—— actions                         redux action文件
|   |—— constants                       常量文件
|   |—— pages                           page页面目录
        ......more dir
|   |   |—— index
|   |   |   |—— index.scss
|   |   |   |—— index.txs
|   |—— reducers                        redux reducers文件
|   |—— store                           redux store文件
|   |—— app.scss                        app全局样式
|   |—— app.tsx                         app全局js
|   |—— index.html                      html文件
|—— .editorconfig                       editor配置文件         
|—— .eslintrc                           eslint配置文件
|—— global.d.ts                         global配置
|—— tsconfig.json                       ts配置文件
|—— package.json
|—— project.config.json
|—— readme.md

Поддержка синтаксиса:

  • поддержка синтаксиса ts;
  • Спецификация синтаксиса React;
  • Поддержка использования прекомпилятора CSS;
  • Поддержка синтаксиса ES6 / ES7, если вам нужно обновить синтаксис, может быть настроен на конфигурации конфигурации;

Поддержка компонентов:

  • Разработка на основе компонентов React, но в конечном итоге она будет скомпилирована в нативный апплет;

нпм-пакет:

  • Поддержка использования npm/yarn management;
  • Может использовать Redux для управления состоянием;

API:

  • Удобнее один раз инкапсулировать API апплета и H5 API;

пакет реагировать + ts + npm, это в основном нормальный ритм фронтенд-разработки. Независимо от того, какую небольшую программу вы разрабатываете, вам нужно только запустить соответствующую команду и в то же время импортировать файл каталога dist в инструмент разработки, и вы увидите эффект.

таро и родные апплеты

Нативные мини-программы: быстрое начало работы Учащиеся, освоившие фронтенд-разработку, могут сразу приступить к работе, практически отсутствуют технические препятствия.. ориентированныйДокументация по мини-программе WeChatпрограммирование.

Разработка Taro: спецификация синтаксиса реакции, разработка компонентов реакции, поддержка синтаксиса ts, поддержка redux. Студентам, предпочитающим реагировать, настоятельно рекомендуется. Если вам нравится реагировать, рекомендуется использовать разработку Таро. (Легко для совместной работы).

Небольшие проблемы с разработкой программы

  • Апплет WeChatФайлы cookie нельзя использовать

  • Апплет WeChatДоменные имена, отличные от HTTPS, не поддерживаются.

  • Апплет WeChatSharing API — это синхронная операция, и в то же время невозможно отследить успех или неудачу обратного вызова.

  • Апплет WeChatAPI wx.setStorageSync и wx.getStorageSync часто сообщают об ошибках.

  • Апплет WeChatПредел 1M данных setData может быть решен путем разделения данных

  • Апплет WeChatОграничение основного пакета составляет 2M, что делает невозможным введение слишком большого количества внешних файлов (использование Taro будет зависеть от пакета npm).

  • Апплет WeChatИнструмент разработки WeChat занимает слишком много ресурсов ЦП, из-за чего компьютер зависает.

Конечно, проблем определенно больше, чем эти.Есть и такие вопросы, как нативные компоненты, API и официальные плагины мини-программ WeChat.Я не буду здесь вдаваться в подробности.Для студентов, которые хотят сделать свой собственный мини -программы, этого в принципе достаточно.

Однако некоторые люди могут спросить, разве о фреймворке до сих пор не говорят? Фактически, используя Tora для разработки апплета, вы просто используете другой синтаксис, пишете апплет, и, наконец, командный инструмент преобразует файл в формат файла родного апплета.

личное заявление

Независимо от того, какой метод вы используете, разработка вашего личного приложения в конечном итоге вернется к самому продукту. Заполните личное приложение в своем уме с помощью технологии и предоставьте приложение пользователю, это конечная цель. (Технология — это только средство, продукт — цель) но я лично пользуюсьTaroРазработка является ранним последователем.

Не много ерунды, надеюсь что исходники личного проекта всем помогут

github: исходный код персонального апплета wxSapp

В настоящее время ремонтируетсяgithub: личное приложение флаттера, можете посмотреть, если интересно.

Смотрите больше сообщений в блоге:

Персональные самородки Больше ссылок на статьи Перейти;

Публикация в блоге GitHub больше ссылок на статьи прыгает;