Рука об руку, используйте uni-app для разработки видеоапплета с нуля (подготовка в серии)

Апплет WeChat

серия статей

предисловие

Давно это было, я давно не обновлял свой блог.Некоторое время назад я был в командировке в Шэньчжэне, и Ху Чихай долгое время был декадентом.Установите компилятор и начните разрабатывать и проверять его. Я надеюсь, что это поможет вам, кто плохо знаком с апплетом.

Опыт сканирования кода, краткий обзор

Вы можете отсканировать QR-код апплета WeChat, чтобы ощутить эффект от разработки.

Адрес источника:

GitHub : https://github.com/Tzlibai/uni-app-video -- Star 100+

Адрес рынка плагинов uni-app: https://ext.dcloud.net.cn/plugin?id=1839-- Более 1000 загрузок плагинов

Подготовка перед разработкой

Распространенные в настоящее время схемы разработки для разработки небольших программ: нативная разработка WeChat wxml, wepy, mpvue, taro, uni-app и т. д. Подробное сравнение преимуществ и недостатков см."Лаборатория JD Bump"этой статьи:Всесторонняя оценка многотерминальной структуры небольших программ;

Хороших слов не много.Давайте перейдем к теме.Вот простой Xmind.На самом деле разработка небольших программ не так сложна как себе представляли.Далее я буду потихоньку интерпретировать этот небольшой программный проект с нуля и приведу вас к основная тема. :

Остальной контент я предполагаю, что у вас есть базовые знания HTML, CSS и JavaScript. И если у вас есть определенная основа Vue, если вы только начинаете изучать фронтенд-разработку, использовать эту статью в качестве первого шага может быть не лучшей идеей!

1 аккаунт апплета WeChat

1.1 Регистрация учетной записи апплета WeChat

Если вы зарегистрировали учетную запись в мини-программе, вы можете пропустить этот шаг~

Предполагая, что учетной записи Mini Program нет:

  1. мы можем пройтиПлатформа публичного аккаунта WeChatВерхний правый угол →Войти Сейчас→ Тип зарегистрированной учетной записи → Выберите тип апплета для регистрации
  2. Войтистраница регистрации→ Введите адрес электронной почты → пароль → проверочный код → активируйте адрес электронной почты → заполните информацию о предмете (в зависимости от выбранного вами типа: физическое лицо, предприятие, правительство, СМИ и т. д.) → зарегистрируйте соответствующую информацию для регистрации;

"Примечания к регистрации:": В качестве учетной записи для входа вам необходимо указать адрес электронной почты, который не зарегистрирован на общедоступной платформе WeChat и не привязан к личной учетной записи WeChat.Каждый почтовый ящик может применяться только для одного апплета;

1.2 Войдите в фон апплета WeChat

1."Полная соответствующая информация"Дополнить информацию об имени апплета, загрузить изображение апплета, заполнить введение апплета и выбрать объем услуги в соответствии с содержанием последующей разработки;

2."Привязать разработчика"Войдите в апплет общедоступной платформы WeChat, введите идентификатор пользователя-разработчика и добавьте связанных разработчиков и опытных пользователей. (Эксперимент означает, что Мини-программа может быть использована Экспериментом до того, как Мини-программа будет официально выпущена после утверждения);

3."Получить идентификатор приложения"Войдите в апплет общедоступной платформы WeChat и перейдите в «Настройки — Информация об учетной записи (нижняя часть настроек)», чтобы получить информацию об AppID. (AppID WeChat необходимо использовать для разработки мини-программ позже, а AppID разработчика необходимо заполнить перед разработкой мини-программ).

1.3 Загрузите инструменты разработчика WeChat

  1. идти кСтраница загрузки инструментов разработчика, Загрузите соответствующий установочный пакет в соответствии с вашей операционной системой и установите его. Рекомендуется установить текущую стабильную версию установочного пакета. На самом деле, инструмент разработчика WeChat может не только разрабатывать небольшие программы, но также может использоваться для создания Мини-игры WeChat. Заинтересованные друзья могут найти соответствующие данные, разработать собственную небольшую игру ~

  2. После установки инструмента разработчика WeChat дважды щелкните, чтобы открыть программное обеспечение и войти в систему. Поскольку мы используемuni-appДля разработки апплета, поэтому здесь вы можете сначала открыть логин, а затем мы будем использовать соответствующие инструменты для автоматической компиляции апплета;

1.4 Резюме

Выше сказано о регистрации апплета и загрузке инструмента разработчика WeChat.Статья относительно краткая.Если вам нужно более глубокое понимание апплета, вы можете проверить его.Wechat Mini Program Официальная открытая документация, В официальной документации есть очень систематическое объяснение конфигурации фреймворка, введения компонентов, API и возможностей расширения апплета, что очень подходит для начинающих изучать апплет;

2 HBuilderX, аспекты универсального приложения

предисловие

Может быть, всеHBuilderX,uni-appЯ мало что знаю об этом; оба являются продуктами под эгидой DCloud.

У DCloud 5 миллионов пользователей-разработчиков, сотни тысяч случаев применения, 1 миллиард мобильных активных пользователей в месяц, тысячи подключаемых модулей для универсальных приложений, более 70 групп WeChat/QQ, разработчики могут с уверенностью выбирать.

HBuilderX

HBuilderXЭто редактор, специально созданный для Vue, с архитектурой C++, скоростью запуска, скоростью открытия больших документов и подсказками для кодирования, и все это довольно хорошо. Этот редактор — то, что мы используем сегодня для разработки небольших программ. Я впервые столкнулся с Зеленая мягкая тема Vue.js кажется очень освежающей и удобной; на самом деле, мы также можем увидеть его на официальном сайте Vue.js.

uni-app

uni-appЭто фреймворк для разработки всех интерфейсных приложений с использованием Vue.js Разработчики пишут набор кодов, которые можно публиковать в iOS, Android, H5 и различных небольших программах (WeChat/Alipay/Baidu/Toutiao/QQ/DingTalk/ Taobao), Quick Apps и другие платформы. После личного опыта контакта можно быстро начать работу и получить высокий эффект;

"В начале наша следующая небольшая программа разрабатывается с помощью редактора HBuilderX и фреймворка uni-app."

2.1 Загрузка и использование HBuilderX

Загрузка HBuilderX

мы можем посетитьОфициальный адрес загрузки HBuilderX: https://www.dcloud.io/hbuilderx.htmlДля загрузки рекомендуется выбрать версию разработки приложения для загрузки, а затем вы можете скомпилировать набор кода на несколько платформ для использования, эффект очень приятный

下载完成后是一个Zip文件，解压后选中目录中的HBuilderX.exe

→ 点击HBuilderX.exe鼠标右键出现菜单

→ 点击菜单项：发送到

→ 点击桌面快捷方式，即可把图标放到桌面

→ 双击即可正常使用；

Простое использование HBuilderX

Использование HBuilderx на самом деле похоже на такие редакторы, как VScode, WebStorm, Atom и т. д. Если вы обращались к вышеперечисленным редакторам, то это должно быть для вас очень просто!

3 Новый проект

Мы загрузили версию для разработки приложений ранее и можем использовать ее для запуска программного обеспечения HBuilderX.

  1. Далее давайте создадим проект uni-app, нажмите File -> New -> Project на панели инструментов:

  2. Выберите тип универсального приложения, введите имя проекта, выберите шаблон и нажмите «Создать», чтобы успешно его создать. Шаблон Hello uni-app, который поставляется с uni-app, является официальным компонентом и примером API. Другим важным шаблоном является шаблон проекта uni-ui, который рекомендуется для ежедневной разработки.В него встроены некоторые официальные общие компоненты.

  3. После успешного создания мы можем запустить его в инструменте разработки WeChat. Войдите в проект, который мы только что создали,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具, вы можете испытать универсальное приложение в инструментах разработчика WeChat.

  4. Затем он начнет компилироваться и откроет инструмент разработчика WeChat.Когда вы увидите следующую страницу, это означает, что вы新建项目Этот шаг выполнен!

  5. Найдите в созданном каталоге UNI-APPmanifest.jsonФайл, Основные настройки -> Заполнить uni-appid, ID можно получить после регистрации и авторизации, который будет использоваться в последующих файлах.

"Меры предосторожности"

  • Поскольку мы используем HBuilderX для запуска инструмента разработчика WeChat, нам нужно держать инструмент разработчика WeChat открытым в процессе разработки.

  • Это первый раз, когда мы используем его, и нам нужно настроить соответствующий путь инструмента разработчика мини-программы, прежде чем он сможет успешно работать.点击工具栏的工具 -> 设置 -> 运行配置 -> 小程序运行配置Как показано ниже, вам необходимо ввести путь установки инструмента разработчика WECHAT в поле ввода.

  • Его необходимо установить в апплете при разработке в первый раз.微信开发者工具 -> 设置 -> 安全设置，将服务端口开启, вы можете использовать соответствующие инструменты вызова командной строки.

  • uni-app компилирует проект в каталог распаковки корневого каталога по умолчанию.

  • После успешной компиляции нам нужно заполнить appID апплета WeChat в инструменте разработчика WeChat, как показано ниже:

3.1 Анализ каталога и введение компонента пользовательского интерфейса 

├─ colorui           # 本项目引入了colorui组件，用于引入美化样式组件
├─ components        # 用于存放组件的目录，可以自行添加组件
├─ pages/            # 业务页面文件存放的目录，后续开发的页面都会存放于此
│ ├─ home/
│ │ ├─ index.vue     # home页面
│ │ ......
├─ static            # 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─ unpackage/        # 打包目录
├─ App.vue           # 应用配置，用来配置App全局样式以及监听
├─ main.js           # Vue初始化入口文件
├─ manifest.json     # 配置应用名称、appid、logo、版本等打包信息
├─ package.json      # 配置页面路由、导航条、选项卡等页面类信息

Этот проект представляет два компонента:mi-loading、ColorUI

3.1.1 Загрузка компонентов пользовательского интерфейса

Я считаю, что все видели анимацию загрузки в работе с апплетом.Здесь представлен компонент загрузки.mi-loading

  • Загрузите файл пакета Zip по ссылке выше, разархивируйте загруженный исходный код и скопируйте корневой каталог проекта./mi-loadingпапка в ваш проектcomponents目录в
  • Открытьmi-loading.vueВ этом файле анимация загрузки в нем может быть настроена с помощью изображения Gif.Вы можете просмотреть четвертую строку исходного кода.Адрес изображения, настроенный img, является пользовательским Loding.mi-загрузка исходного адреса, я поместил пользовательское изображение в:/static/img/loading.gif,Адрес карты:Нажмите здесь, чтобы просмотреть 
# 使用方法
this.$refs.Loading.show() // 打开
this.$refs.Loading.hide() // 关闭

3.2.2 Компоненты пользовательского интерфейса — ColorUI

Этот проект представляет рынок плагиновБиблиотека компонентов ColorUI-UniApp, способ введения следующий:

  • Загрузите файл Zip-пакета по ссылке выше, разархивируйте загруженный исходный код и скопируйте папку /colorui корневого каталога проекта в корневой каталог вашего проекта.
  • Файл App.vue представляет ключ Cssmain.css,icon.css, пусть компонент пользовательского интерфейса станет общедоступным css каждой страницы
<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    ....
</style>

Мы можем использовать панель навигации, инкапсулированную в библиотеке пользовательского интерфейса, для проверки эффекта.

  1. существуетApp.vue文件Добавьте следующую конфигурацию, чтобы получить информацию о системе, исходный адрес этого файла:App.vue 
// onLaunch: 当小程序加载完毕后就执行的方法
onLaunch: function() {
 uni.getSystemInfo({
  success: function(e) {
    // #ifndef MP
    Vue.prototype.StatusBar = e.statusBarHeight;
    if (e.platform == 'android') {
       Vue.prototype.CustomBar = e.statusBarHeight + 50;
    } else {
    Vue.prototype.CustomBar = e.statusBarHeight + 45;
  };
// #endif
// #ifdef MP-WEIXIN
  Vue.prototype.StatusBar = e.statusBarHeight;
  let custom = wx.getMenuButtonBoundingClientRect();
  Vue.prototype.Custom = custom;
  Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
  // #endif       
  // #ifdef MP-ALIPAY
  Vue.prototype.StatusBar = e.statusBarHeight;
  Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
  // #endif
  }
})}
  1. pages.json文件Настройте панель навигации системы отмены, адрес исходного кода исходного файла:pages.json 
# 复制下面命令需要把注释删除，否则会报错
{
 "globalStyle": {
  "navigationStyle": "custom", // custom为自定义模式
  "navigationBarTextStyle": "white", // 标题文字设为白色
  "navigationBarTitleText": "uni-app", // 标题名称
  "navigationBarBackgroundColor": "#007AFF", // 更改导航背景色
  "backgroundColor": "#FFFFFF" // 全局背景色
 }
}

После успешной операции все будет так, как показано на следующем рисунке:

Итак, мы успешно внедрили библиотеку пользовательского интерфейса. В настоящее время вы можете увидеть эффект в инструменте разработчика WeChat без ручного обновления. Когда мы добавим код, сохраненный в HBuilderX, код будет автоматически скомпилирован, и инструмент разработчика WeChat будет автоматическое обновление;

Суммировать

Вышеизложенное является подготовкой к разработке нашего апплета.В следующей статье мы перейдем к разработке самого проекта с нуля, от создания нового проекта до просмотра и загрузки кода апплета.

Категории