Версия uniapp для Leju
Основная подготовка
-
Подготовка материалов
-
Гибридная разработка
Используется веб-технологии для реализации пользовательского интерфейса, AJAX для логики взаимодействия с данными, а также Android/iOS для сборки.
- Нативная разработка (например, Honor of Kings) для Android/iOS
- Языки программирования для нативной разработки: Android (Java/Kotlin), iOS (Objective-C/Swift)
- Angular.js, Ionic https://ionicframework.com
- React.js, ReactNative https://reactnative.cn
- Vue.js, Weex https://weex.apache.org/zh/guide/introduction.html
- apiCloud https://www.apicloud.com
- dcloud 5+runtime, который предоставляет множество API для платформы нативных приложений (native.js), не слишком популярный, но HBuilder может собрать Vue в приложение
- uniapp https://uniapp.dcloud.io, который одновременно компилируется для нескольких платформ
- Основные причины выбора uniapp: 1) Vue.js; 2) Реализация большего количества кросс-платформенных приложений; 3) Синхронное разработка WeChat Mini Program
- Официальные примеры uniapp
- Android/iOS
- WeChat Mini Program
- Версия для веба (H5)# Быстрый старт
Добро пожаловать в наше приложение. В этом разделе вы найдете основные инструкции по использованию нашего продукта.
Установка
Перед тем как начать работу с приложением, вам необходимо его установить. Для этого выполните следующие шаги:
- Скачайте последнюю версию приложения с нашего сайта.
- Установите приложение, следуя инструкциям, которые отображаются на экране.
Первый запуск
После установки приложения выполните следующие действия:
- Запустите приложение.
- Следуйте инструкциям, которые отображаются на экране, чтобы завершить настройку.
Основные функции
Функция 1: Создание проекта
Чтобы создать новый проект, выполните следующие шаги:
- Нажмите на кнопку "Создать проект".
- Введите название проекта.
- Выберите тип проекта.
- Нажмите "Создать".
Функция 2: Редактирование проекта
Чтобы редактировать существующий проект, выполните следующие шаги:
- Откройте проект.
- Нажмите на кнопку "Редактировать".
- Внесите необходимые изменения.
- Нажмите "Сохранить".
Поддержка
Если у вас возникли вопросы или проблемы, обратитесь в службу поддержки по адресу support@example.com.
Если у вас возникли дополнительные вопросы, обратитесь к документации или свяжитесь с нашей службой поддержки.+ При установке инструментов выберите "рабочее пространство", не устанавливайте на рабочий стол.
- При первом запуске WeChat Mini Program необходимо настроить соответствующие пути в IDE, чтобы приложение запустилось.
- Измените настройки WeChat Mini Program, чтобы добавить возможность отладки через командную строку и открыть порт.
- Измените настройки WeChat Mini Program, чтобы изменить базовую версию репозитория.
- В файле mainfast.json проекта настройте ID приложения WeChat, войдите в панель управления WeChat Mini Program и настройте разработку. #注意事项 для разработки vue
- Жизненные циклы
- Циклы жизненного цикла приложения https://uniapp.dcloud.io/frame? id=%e5%ba%94%e7%94%a8%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f
- Циклы жизненного цикла страницы
- onLoad используется для получения параметров страницы и вызова инициализирующих API, аналогично created в Vue. В uniapp рекомендуется использовать onLoad вместо created.
- onReady аналогично mounted.
- Поддерживаемые синтаксисы стилей: на платформах, кроме H5, не поддерживаются classObject и styleObject, как описано в официальной документации Vue.
- Единицы px не будут скомпилированы.
- В H5 платформе использование v-for для цикла по целым числам отличается от других платформ. Например, в v-for="(item, index) in 10" на H5 платформе item начинается с 1, а на других платформах с 0. Для поддержания согласованности можно использовать второй параметр index.+ На платформах, кроме H5, циклы по объектам не поддерживают третий параметр, как в
v-for="(value, name, index) in object". Параметр index не поддерживается.
- Маппинг событий. Обратите внимание:
click => tap
- Для совместимости с различными платформами события должны быть привязаны с помощью
v-on или @, не используйте bind и catch для событий на платформе miniapp.
- В App платформе (vue страницы в режиме компиляции V3) и H5 платформе поддерживается
v-html, на других платформах нет. Рич-текст https://ask.dcloud.net.cn/article/35772
- Компоненты: жизненный цикл
created работает (если возникнут проблемы, обсудим позже)
- Неподдерживаемые:
Slot (scoped пока не поддерживается) /динамические компоненты/асинхронные компоненты/keep-alive/transition
- Ограничения названий: не называйте компоненты ключевыми словами, например
span. Файл page.json используется для глобальной конфигурации uni-app, определяет пути к страницам, стили окна, нативное меню, нативную нижнюю панель навигации и т. д.
-
tabBar используется для конфигурации нижней панели навигации, это массив, который может содержать от 2 до 5 вкладок. Вкладки упорядочены в порядке их следования в массиве.
-
icon не должно быть на китайском языке! ! ! Располагайте его в папке static# Инструменты разработки для小程序
- Настройки=> Безопасность=> Серверный порт=> Включить
- appId можно настроить через hbuilderX
- В правом верхнем углу=> Подробная информация=> Не проверять легальные домены√
- В правом верхнем углу=> Подробная информация=> Базовый набор отладки=> Выбрать самую популярную версию (самую новую)
Разработка
- Поддержка axios отсутствует
- uni.request
Три формы отправки данных методом POST: 1) двоичные данные (загрузка); 2) x-www-form-urlencoded (по умолчанию, стандартная форма данных, наиболее часто используемая); 3) json (строка данных, новая форма).
- POST: заголовок 'content-type' равен application/json, данные будут сериализованы в JSON.
- POST: заголовок 'content-type' равен application/x-www-form-urlencoded, данные будут преобразованы в query string.
- Также есть форма двоичных данных.
-
Кросс-платформенная условная компиляция
-
Переходы
- navigator: параметры передаются через ? key=v
- В новой странице параметры должны быть получены в onLoad
-
Интеграция vuex
- Функциональность разделения модулей vuex написана так же, как и в проектах Vue
- Необходимо добавить объект vuex в прототип объекта Vue в main.js+ Авторизация
- Для проверки в приложении для WeChat Mini Programs/iOS App, нельзя требовать обязательной авторизации при входе в приложение, необходимо наличие режима "гостя" для ручной проверки.
- Поскольку в uni-app нет навигационных гвардейцев, необходимо проверять и переходить на страницы, требующие проверки. Однако для авторизации следует использовать переадресацию на страницу авторизации, чтобы избежать возврата.+ Заказы
- Шаблон заказа для uni-app
-
Выбор адреса
- Обратите внимание, что onLoad/onShow будут вызваны при первом входе на страницу, но при возврате будет вызван только onShow.
- Если адрес выбран и пользователь вернулся на предыдущую страницу, onLoad может не быть вызван, поэтому необходимо переопределить значения в onShow.
-
Страница главного экрана
- Рекомендации по категориям временно используются на фронтенде: /api/leju/front/find/seriesAll
- Рекомендации по популярным товарам используются на главной странице.
- Данные для рекомендаций по популярным товарам должны быть внесены вручную в админке, через "Управление товарами" => "Обновить поля" => добавить ishot.
- Классификация управления статьями и управление классификацией одинаковы
- Рекомендация товаров требует обработки с помощью сериальных API, двухуровневого вложения. Внимание: фоновые изображения серий были добавлены вручную вчера, новые серии в будущем могут быть добавлены через API
- Рекомендация товаров требует двухуровневого вложения swiper для реализации
-
Комплементарное обработание
-
В случае возникновения проблем с совместимостью, следует применять специальные методы для решения
-
Условная компиляция https://uniapp.dcloud.io/platform# Пакетирование
-
Маленькие программы
- Библиотека версий редактора маленьких программ
- Не должно быть демо, которое подаётся на одобрение несколько раз.
- Должна быть возможность просмотра для гостей.+ h5
- manifest.json
- Пространство имен
- Маршрутизация
-
Android
- Можно подключиться к телефону через USB для предварительного просмотра
- Предварительное условие: на телефоне должен быть включен режим отладки. Способы включения режима отладки могут отличаться для разных моделей.
- Проблемы: некоторые телефоны могут не подключаться. Это может быть связано с антивирусными программами на компьютере, а также с большим разнообразием моделей Android. Рекомендуется использовать телефоны Xiaomi.
- Также можно создать пакет в облаке xx.apk
- Замена иконки в manifest.json
Проблемы
- Какие различия между веб-приложением на Vue (кино/жилые помещения мобильная версия) и маленькими программами (жилые помещения) от Учителя Чжао/Учителя Чжан и мобильной версией приложения на Uniapp (жилые помещения)?
- Vue - базовые возможности
- Маленькие программы на основе оригинального кода - дополнительные возможности
- Uniapp - перспективность и дополнительные возможности
Комментарии ( 0 )