Эта статья была опубликована на моем официальном аккаунте, для получения более оригинальных технических статей, пожалуйста, обратите внимание на мой официальный аккаунт "Byte Reverse Travel"

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

Подводя краткий итог, нижний уровень uniapp интегрирует нативную технологию, то есть движок h5+, который может вызывать нативный API мобильного телефона, поэтому uniapp может разрабатывать приложения с близкой к нативной производительностью, которая является частью движка js. ; это двойной движок, а рендеринг — независимый движок. Этот движок рендеринга разделен на рендеринг nvue и рендеринг webview.nvue на самом деле является интегрированным weex.Те, кто знаком с webview, должны знать, что его ядром является webkit, вы можете прочитать эту статьюстатьяучиться.

экосистема

В uniapp уже есть 35 официальных групп QQ, и все они представляют собой большие группы по 2000 человек. Существуют также различные библиотеки компонентов с открытым исходным кодом, основанные на uniapp, такие как uViewUI, colorui, ThorUI и uCharts.Наиболее полной и известной в настоящее время является uViewUI, а официальная документация относительно полна.вы просматриваете UI.com/.Их официальная группа qq теперь насчитывает 4, вы можете добавить группу, чтобы найти разработчиков для ответов на вопросы. uniapp официально говорит, что разработчиков 6 млн. В целом экология неплохая.

правильная осанка

1. Прочтите официальную документацию

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

2. Используйте рынок плагинов

Плагин содержит различные ресурсы, такие как различные компоненты, SDK, шаблоны проектов и даже связанные плагины uniCloud и HbuilderX. Если официальные базовые компоненты и официальная библиотека компонентов расширения uni-ui не могут удовлетворить ваши потребности, вы можете найти их на рынке подключаемых модулей. Официальный придает большое значение этому рынку плагинов.Например, у uni-ui есть введение официального документа.у вас app.when cloud.IO/component/R…

Глядя на этот рейтинг рынка плагинов, вы также можете примерно понять текущее состояние рынка плагинов, который в целом все еще относительно активен:

В дополнение к более полным библиотекам компонентов, упомянутым выше, на самом деле есть много отличных авторов плагинов, которые фокусируются на определенных областях.Вот несколько рекомендуемых:

• Вероятно, лучшая экология uniappплагин маршрутизации
• должен быть самым мощнымплагин форматированного текста(уже интегрировано uviewui)
• Лично считаю, что текущий лучшийтабличный компонент
• неплоховыбор даты и времени

3. Задавайте вопросы разработчикам через сообщество, группы qq и сообщения плагинов.

Если вы строго следуете документации и по-прежнему сталкиваетесь с проблемами, возможно, вам придется обратиться за помощью к другим. Если это официальная проблема uniapp, ее можно найти по адресуСообществоИщу актуальную информацию, тут довольно много кейсов, и большинство проблем в принципе можно найти;

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

Практическое руководство

Как правильно потреблять официальные ресурсы uniapp мы уже говорили ранее, а теперь давайте представим, как uniapp разрабатывает, отлаживает и выпускает: app, h5 и апплет (апплет WeChat).

1. Строительство окружающей среды

1,Установите hbuilderX

hbuilderx также является продуктом ide, созданным dcloud. Для разработки продуктов на нескольких терминалах с помощью uniapp, для единовременной разработки и выпуска для нескольких терминалов вы должны использовать hbuilderx, артефактную IDE. Вот официальный адрес загрузки сайтаУууу. Когда сборщик cloud.IO/H X. тоже...

2,Установить NoxPlayer

Поскольку вы разрабатываете приложение, вам не обойтись без отладки компьютера.Вы можете подключить свой мобильный телефон или установить эмулятор.Здесь мы рекомендуем эмулятор бога ночи,адрес для скачивания:woohoo woo.nightsight.com/.

3.Среда конфигурации

Подключите hbuilderx к симулятору, выберите Tools--Settings, откройте интерфейс конфигурации и выберите конфигурацию запуска, как показано на рисунке.

Путь adb выбирает адрес adb.exe установочного пакета симулятора, порт симулятора, по умолчанию для симулятора бога ночи 62001, просто заполните его. Если вы не уверены в его порте, вы можете найти файл в каталоге того же уровня, что и adb.exe, дважды щелкнуть для запуска, и вы можете увидеть результат, как показано на рисунке:

Это порт для прослушивания симулятора бога ночи.

4.управление исходным кодом svn

Выберите Tools--Plugin Installation, чтобы открыть панель управления плагинами, как показано на рисунке. Установите подключаемые модули, которые подразделяются на основные подключаемые модули и другие подключаемые модули. Основные подключаемые модули можно обновить с помощью IDE, а другие подключаемые модули отправятся на рынок подключаемых модулей, чтобы найти то, что им нужно. Такие плагины, как svn, по умолчанию недоступны. Вы можете установить плагин svn здесь.

Процесс установки относительно прост, просто нажмите на него. После установки его также можно удалить.

5.Установка плагина Marketplace

Установка плагина маркета плагинов обычно происходит таким образом:

Нажмите эту кнопку, чтобы установить локально. Есть также несколько типов.То, что я знаю, это класс компонента и скомпилированный класс. Как и класс компонента, после нажатия «Установить» он будет установлен непосредственно в открытый в данный момент проект uniapp, и находится он в указанной папке компонентов; как и класс компиляции, это фактически аналог загрузчика веб-пакета, который помещается в установочный пакет hbx.

Во-вторых, uniapp рукопашный бой

1,Создайте новый проект пустого шаблона uniapp

кли режим

Создание проекта с помощью hbx более подробно описано в официальном туториале, здесь я расскажу только о процессе создания проекта с помощью vue-cli. Этапы создания также доступны на официальном сайте.По сравнению с визуальной сборкой hbx сборка с помощью cli намного медленнее.

//安装vue/cli全局依赖
npm install -g @vue/cli

//创建项目模板
vue create -p dcloudio/uni-preset-vue my-project

Если при выполнении скрипта появляется такое сообщение об ошибке: vue: Unable to load file C:....vue.ps1. Это означает, что ваш скрипт запрещен к запуску.Решение состоит в том, чтобы открыть диспетчер ресурсов текущего адреса проекта, щелкнуть файл, и появится диалоговое окно, щелкнуть место, показанное на рисунке.

Появится всплывающее окно, и выполните в нем этот код:

set-ExecutionPolicy RemoteSigned 

После выполнения введите Y или A в соответствии с подсказкой, а затем нажмите выше, чтобы создать проект, это нормально:

Наконец, вам будет предложено выбрать шаблон проекта:

Обычно рекомендуется выбирать шаблон hello uni-app. Если все пойдет хорошо (в идеале), создайте готовый проект, который выглядит так, как показано ниже.

Мы можем наблюдать за его файлом package.json, мы видим, что там много команд для упаковки и запуска, uniapp нам очень помогает!

cd my-project в проект, запустите npm run dev:h5, попробуйте эффект.

Вы можете видеть, что это действительно успешно, откройте стартовую страницу, нажмите F12, чтобы переключить страницу в мобильный режим, и вы увидите эффект.

В этом режиме cli нельзя подключиться к эмулятору для отладки, для отладки версии приложения в реальном времени можно использовать только hbx ide. Помимо отладки версии h5, в режиме cli также можно отлаживать небольшие программы, например, апплет WeChat, который требует подготовки средств разработки.

режим hbuilderx

Учитывая, что приложение является нашим основным продуктом, лучше переключиться на компилятор hbuilderx, привыкнув к нему, он кажется очень полезным. Режим cli подходит для разработки h5 или небольших программ. См. конкретные шагиОфициальный сайтВот и все, это относительно простая, наглядная операция, и пройти ее шаг за шагом не составит труда. Фактически, проект, созданный в режиме cli, также может быть разработан с помощью hbx.Откройте папку на компиляторе hbx и выберите папку src проекта cli, который является стандартным проектом создания hbuilderx.

В этот момент выберите Run--Run to the emulator.

2. Структура каталогов

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

┌─cloudfunctions        云函数目录（阿里云为aliyun，腾讯云为tcb，详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
    

Основное внимание уделяется каталогам или файлам страниц, static, main.js, App.vue, manifest.json, pages.json.

3. Требуемый контент

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

Во-первых, это введение в фреймворк, вы должны прочитать и ознакомиться с содержанием введения в фреймворк.

Во-вторых, начать разработку.В настоящее время очень важно знать, как использовать фреймворк и как настроить файл pages.json! На самом деле, я не могу вспомнить подробности, но вы можете узнать, что происходит, настроив и отладив, и этого знакомства достаточно.

4. Конфигурация страницы маршрутизации uniapp (pages.json)

Откройте файл pages.json, который представляет собой файл конфигурации проекта uniapp в формате json. Если контента много, можно правой кнопкой мыши - отобразить схему структуры документа, видно, что базовая структура этого файла следующая:

Страницы — это все конфигурации страниц, используемые в проекте. Первый элемент — это начальная страница приложения для входа, которое обычно размещается на странице входа или на домашней странице. Можно указать и другие.официальная документацияПосмотрите инструкцию и вручную задайте параметры, и вы поймете эффект. subPackages — конфигурация загрузки подпакетов, подготовленная для апплета. Апплет предъявляет требования к общему размеру пакета (в настоящее время 16M) при публикации загружаемого кода, а также указывает, что весь пакет является подпакетом. Каждый подпакет не может, если он превышает 2M , здесь требуется загрузка подпакета конфигурации. globalStyle Это для установки глобального стиля.Как правило, здесь будет единый стиль стиля, который можно установить здесь, включая панель навигации, заголовок и цвет фона окна. TabBar также очень важен. Это стандартная конфигурация приложения, которая эквивалентна панели навигации первого уровня. Возьмем, к примеру, наш проект hello uniapp, обрамленная часть — это содержимое tabBar.

В каждой группе tabBar может быть максимум 5 элементов и минимум 2 элемента, все из которых настраиваются в элементе списка.

Посмотрите на конкретное содержимое элемента списка

5. Жизненный цикл

Здесь по степени детализации он подразделяется на жизненный цикл приложения, жизненный цикл страницы и жизненный цикл компонента.Документация. Жизненный цикл компонента такой же, как жизненный цикл компонента vue. Конкретное использование следует использовать в сочетании с бизнес-сценарием.

6. Управление статусом

государственное управлениеЕсть несколько способов сделать это,

• vuex

  Использование vuex такое же, как и в проекте vue. Единственное, на что следует обратить внимание, это то, что хранилище импорта предложений из './store/store.js' может быть записано только в main.js, и оно выдаст ошибку при ссылке в другом месте? !

• uni.storage

Давайте посмотрим на конкретное использование соответствующего API.Эти данные состояния являются постоянными, если вы не вызовете его понятный интерфейс, данные всегда будут кэшироваться локально.

• globalData

Это используется меньше, это для определения глобальных переменных на странице app.vue, в частностииспользованиеследующее:

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>

//在其他页面调用/修改全局变量
getApp().globalData.text = 'test'

7. Глобальные события

Документация API uniapp очень подробная и даже инкапсулирует глобальные события, мы можем использовать ее напрямую

8. Инкапсуляция запроса интерфейса

Этот фрагмент контента находится в модуле APIИнтернетСтолбец, общий запрос интерфейса может использовать uni.request(object). Для обычных вызовов интерфейса этого достаточно, если нужно использовать перехват запросов, то нужно идти на рынок плагинов, чтобы найти подходящий плагин. Рекомендуется здесьluch-request, Документ очень четкий, и функция относительно завершена.

9. Маршрутный прыжок

Переход по маршруту, соответствующийAPIВы можете посмотреть официальные документы, которые в основном широко используются. Здесь предполагается, что текущая страница должна быть настроена в файле pages.json, чтобы вызывать эти API перехода. Еще одна вещь, которую следует отметить, это то, что страницу панели вкладок можно перепрыгнуть только с помощью uni.switchTab. Мы знаем, что vue имеет vueRouter для поддержки переходов маршрутизации и защиты маршрутизации, но uniapp не поддерживает этот плагин.Если вы хотите реализовать его в uniapp, рекомендуется здесьuni-simple-router

10. Глобальные стили

Есть много мест, на которые стоит обратить внимание на стиль, я выделил эти места, в частности:

• измерительное устройство

Текущие общие единицы размера uniapp — это px и rpx, px — это пиксельная единица, которую мы обычно понимаем; rpx — это адаптивная единица, которая вычисляет значение пикселя в соответствии с шириной экрана и соотношением заданного значения.

Вышеупомянутая страница pages.jsonglobalStyleНастройте узел, вы можете управлять параметрами расчета rpx через конфигурацию

• css переменные и фиксированные значения

На эти параметры в основном нужно обращать внимание при управлении стилем кросс-энда, часто бывает, что макет приложения почти такой же, а затем к концу h5 стиль неправильный, или он ненормальный в апплете. Глядя на приведенную выше таблицу, главное обратить внимание на разные значения этих трех переменных в разных средах, поэтому уделите особое внимание. Следующая таблица является дополнением к приведенной выше.Если нет нативной верхней панели навигации и tabBar на стороне h5, это пользовательский div.Мы должны ссылаться на фиксированные значения этих переменных при настройке стилей.

• значок шрифта
  • Обычно поддерживаемые форматы включают формат base64, сетевой путь — онлайн-шрифт (должен начинаться с https)
  • Апплет не поддерживает ссылки на локальные файлы в CSS, включая изображения или шрифты.
  • uniapp автоматически преобразует файлы шрифтов размером менее 40 КБ в base64, uniapp не будет компилировать содержимое статической папки

Другие, такие как импорт стилей, встроенные стили и т. д., аналогичны разработке веб-приложений. Следует также отметить, что если вы хотите установить глобальный стиль, вы можете установить его в App.vue или импортировать внешний стиль с помощью @import.

11. Компоненты и библиотека компонентов

Компоненты очень важны, для uniapp, включая дизайн фреймворка и базовые принципы, это душа и скелет, различные правила и конфигурации, упомянутые выше, — это поведенческие привычки и рекомендации, а также вышеупомянутое управление состоянием, роутинг, события, стили, запросы интерфейса, и т. д., так же необходимы, как кровеносные сосуды и лимфа; компонентами являются внутренние органы и мышцы, и конкретная роль зависит от их расположения.

Официальная документация будеткомпонентыСпециально перечислил в виде столбца, можно примерно посмотреть, какие компоненты там есть. Обычно базовые функции в основном удовлетворяются официально предоставленными комплектующими. Библиотека компонентов с открытым исходным кодом также является вторичным пакетом, основанным на официальных компонентах.Общий принцип заключается в том, чтобы отдавать приоритет официальным компонентам.Если официальные компоненты не поддерживаются или неудобны в использовании, то перейдите на рынок с открытым исходным кодом, чтобы найти плагины с открытым исходным кодом.

12.Войдите, чтобы перейти на главную страницу

Далее мы разрабатываем функцию входа в систему. Ранее мы создали проект с vuecli, это hellouni, и содержание немного больше, теперь мы пересобираем пустой шаблон проекта, чтобы сделать его более понятным. Шаги такие же, как и раньше, просто выберите шаблон по умолчанию при выборе шаблона.

Разработать функцию входа

Попытка разработать функцию входа в пустой проект шаблона обычно требует следующих шагов:

• Создайте новую страницу входа и настройте параметры маршрутизации страниц страниц.

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
            "path" : "pages/login/login",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        },{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
    ]

• Подготовьте доступный интерфейс входа в систему и инкапсулируйте его

uni.request({
					// #ifdef H5
					url: '/data-receive/v1/login',
					// #endif
					// #ifndef H5
					url: 'http://##.##.##.##:##/data-receive/v1/login',
					// #endif
					method: 'POST',
					data: {
						username: this.name,
						password: this.password
					},
					dataType: 'json',
					success(res) {
						if (res.statusCode == 200 && res.data.code == 200) {
							//跳转到首页
							uni.navigateTo({
								url: '../index/index'
							})
						}
					}
				})

• Создайте новую страницу входа, завершите макет, стиль и логику входа.

<template>
	<view class="content">
		<view class="logo">
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<view class="list">
			<view class="title">
				用户名
			</view>
			<view class="input">
				<input type="text" placeholder="请输入用户名" v-model="name" />
			</view>
		</view>
		<view class="list">
			<view class="title">
				密码
			</view>
			<view class="input">
				<input type="text" placeholder="请输入密码" v-model="password" />
			</view>
		</view>
		<button type="default" @tap="dologin">登录</button>
	</view>
</template>

• Разделите запрос интерфейса входа в систему на два случая: среда h5 и среда не-h5.

// #ifdef H5
url: '/data-receive/v1/login',
// #endif
// #ifndef H5
url: 'http://##.##.##.##:##/data-receive/v1/login',
// #endif

• Среда H5 использует прокси для решения междоменных проблем.

"h5" : {
        "router" : {
            "base" : "./"
        },
        "devServer" : {
            "proxy" : {
                "/data-receive" : {
                    "target" : "http://##.##.##.##:##/data-receive",
                    "pathRewrite" : {
                        "^/data-receive" : ""
                    }
                }
            }
        }
    }

• прыжок страницы

uni.navigateTo({
				url: '../index/index'
			})

Дополнительные прыжки см.Маршрутизация и переход по страницам

13. Разработка и отладка

разработка и отладка приложений

разработка и отладка h5

H5 на самом деле является веб-страницей, и эта отладка относительно проста, как и разработка веб-проекта.

• Запустить в браузер (встроенный или другой браузер) на hbx
• f12 и включить режим отладки телефона

Разработка и отладка небольших программ

В первую очередь необходимо понять способ разработки версии апплета uniapp: разработка все равно ведется на hbx, но ее надо запускать на средстве разработки апплета, а затем разработка на hbx будет обновлена ​​до апплета в в реальном времени. То есть инструмент разработки апплетов это всего лишь эмулятор.Чтобы увидеть эффект,вышеприведенный код скомпилирован из версии uniapp,что не очень удобно для разработки.Не рекомендуется модифицировать его на инструменте разработки апплетов. Ниже приведены шаги для разработки апплета WeChat:

• Перейдите на общедоступную платформу WeChat, чтобы зарегистрировать небольшую программу и заполнить соответствующую информацию.
• После того, как настройки разработки завершат привязку разработчика апплета, после создания апплета появится appid апплета, который нужно сохранить
• Загрузите и установите инструменты разработки апплета

Если проект запускается для апплета в первый раз, необходимо привязать appid, ранее зарегистрированный и сохраненный в средстве разработки апплета, и адрес кода апплета (в данном примере newproject\src\unpackage\dist\dev \mp-weixin), После привязки вы можете увидеть статус разработки апплета, например:

Как упоминалось ранее, разработка апплета все еще находится на hbx.Инструмент апплета зависит от эффекта, но отладка и поиск ошибок все равно должны выполняться на инструменте разработки апплета.Модуль отладки находится в правом нижнем углу, аналогично окно отладки Google Chrome. Если вы считаете, что окно слишком маленькое, вы можете нажать кнопку плавающего окна, чтобы открыть окно отладки.

Появилось окно отладки

14. Выпуск пакета

Приложение упаковано и выпущено

Процесс упаковки приложения относительно прост и разделен на две платформы: Android и Apple. Как правило, приложения должны пройти процесс облачной упаковки при подключении к сети.Выберите «Выпуск» -> «Нативная облачная упаковка приложений», и появится это диалоговое окно.

Это пакет Android.Если вам не нужна платформа приложения на рынке, вы можете выбрать метод упаковки общедоступного тестового сертификата.

Это упаковка версии Apple.После того, как Apple будет упакована, она будет подключена к сети.Есть только один способ выйти в сеть.Три файла, связанные с сертификатом, необходимы.

Нажав на пакет, войдите в очередь облачных пакетов и подождите в очереди, после успешного завершения будет указан адрес загрузки:

Версию для Android можно установить и использовать напрямую, а также разместить ее на сервере производственной среды для загрузки пользователями. Если это версия Apple, упакованный файл ipa нельзя использовать напрямую, и его необходимо отправить в магазин приложений на утверждение, прежде чем он может быть выпущен.Этот цикл составляет около недели.

горячее обновление приложения

После того, как приложение будет подключено к сети, последующие обновления версии могут быть обновлены путем горячего обновления без выпуска каждый раз нового полного пакета. Выберите Release-->Native App-Make пакет приложения wgt, и появится диалоговое окно пакета обновления:

После создания wgt поместите файл wgt на сервер, и когда пользователь обнаружит обновление в приложении, пакет обновления будет загружен и обновлен локально.

• При выпуске wgt имя версии приложения и номер версии приложения на странице конфигурации manifest.json должны быть выше последнего установленного значения;

• Проверьте обновлена ​​ли версия, если есть обновление, скачайте пакет обновлений, установите и перезапустите приложение, вот полныйруководство

выпуск пакета h5

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

Выпуск небольшого пакета программ

• субподряд

Пакетирование малых программ имеет ограничение на размер пакета: раньше он составлял 16M, а теперь увеличен до 20M. Для конкретных методов субподряда, пожалуйста, обратитесь к официальномуДокументация, наш субподряд заключается в субподряде на uniapp, обратите вниманиеТребования uniapp к субподряду. я писал оuniapp адаптируется к апплету WeChatВ статье есть инструкции по загрузке подпакетов, вы можете обратиться к ней.

• загрузить код
• Добавить отзыв

Интегрированный выпуск общедоступной учетной записи WeChat

Продолжение следует. . . .