Что такое быстрое приложение
Проще говоря, быстрое приложение — это приложение нового типа, совместно запущенное десятью ведущими производителями мобильных телефонов в Китае, такими как Xiaomi, Huawei и ov. Не нужно устанавливать, открывается за секунды, опыт сравним с оригиналом. Он также предоставляет такие записи, как нативные приложения: магазин приложений, страница поиска и т. д.
Подготовка перед разработкой
Далее я научу вас создавать, запускать, предварительно просматривать и отлаживать проект быстрого приложения. а такжеофициальная документацияТочно так же здесь я добавил некоторые ямы и решения, с которыми я столкнулся в процессе.
Создать проект
Установить NodeJS
Официальный сказал, что необходимо установить NodeJS версии 6.0 или выше, и рекомендуется v6.11.3, но мой родной NodeJS — это v9.3.0, и я не стал переключаться на 6.0, если не было найдено никаких исключений.
Установить хап-инструментарий
hap-toolkit — это инструмент разработчика для быстрых приложений, который помогает разработчикам выполнять работу по разработке с помощью инструментов командной строки, в основном включая создание проектов-шаблонов, обновление проектов, компиляцию, отладку и другие функции. Похоже на vue-cli.
npm install -g hap-toolkit
После установки проверьте номер версии, чтобы убедиться, что установка прошла успешно.
hap -V
Создать проект
Выполнение следующей команды создаст текущий каталог<ProjectName>каталог в качестве корневого каталога проекта.
hap init <ProjectName>
Этот проект уже содержит исходный код конфигурации проекта и образцы страниц.Основная структура корневого каталога проекта выглядит следующим образом.
├── sign rpk 包签名模块
│ └── debug 调试环境
│ ├── certificate.pem 证书文件
│ └── private.pem 私钥文件
├── src
│ ├── Common 公用的资源和组件文件
│ │ └── logo.png 应用图标
│ ├── Demo 页面目录
│ | └── index.ux 页面文件，可自定义页面名称
│ ├── app.ux APP 文件，可引入公共脚本，暴露公共数据和方法等
│ └── manifest.json 项目配置文件，配置应用图标、页面路由等
└── package.json 定义项目需要的各种模块及配置信息
Установить зависимости
npm install
Стартовый проект
компилировать
npm run build
составленоdistВот конечный продукт:rpkдокумент.
На этом шаге может возникнуть ошибка (я столкнулся с ней).
Cannot find module '.../node_modules/hap-tools/webpack.config.js'
В основном потому, что после создания проектаnode_moduleпапка, естьhap-toolsМешок. еслиnpm installУстановить зависимости, старшая версияnpmможет поставитьnode_moduleОчистите исходный пакет и установите зависимости, а затем просто установите его вручную.hap-toolsпросто хорошо
npm install hap-tools
Если вы хотите следить за изменениями исходного кода и автоматически компилировать его, вы можете запустить команду watch.
npm run watch
На данный момент запаковано быстрое приложение hello world, далее его нужно запустить на мобильном телефоне.
предварительный просмотр
Сначала нужно установить телефонОтладчик.
Если вы установите только этот быстрый отладчик приложений, вы обнаружите, что все кнопки выше серые и не нажимаются.В настоящее время вам необходимо установить отладчик предварительной версии платформы.КорочеБыстрая документация по приложениюДля отладки должен быть установлен отладчик мобильного телефона.
После установки отладчика установите на телефон пакет быстрой установки приложения.
Установка скан-кода
Необходимо запустить локальный HTTP-сервер.
npm run server
Если нет ответа после сканирования QR-кода в командной строке, вы можете открыть адрес в браузере и попробовать отсканировать код (это я), так как QR-код в командной строке может быть отрисован неправильно.
локальная установка
ПучокrpkПросто загрузите файл на свой телефон и установите его.
Онлайн-обновление
Адрес сервера можно установить в правом верхнем углу быстрого отладчика приложений.Выполняйте следующую команду каждый раз, когда вы меняете код, вы можете щелкнуть онлайн-обновление, чтобы обновить его, не сканируя код и не устанавливая его локально.
npm run server
npm run watch
отладка
Вы можете просмотреть его на своем телефоне, вы также можете использовать интерфейс отладки chrome devtools и просмотреть журнал отладки. Предварительный просмотр на мобильном телефоне, как указано выше, другая отладочная прессаОфициальные шагиПросто прийти.
возможная яма: при отладке с помощью chrome devtools интерфейс отладки может не открываться или интерфейс отладки может быть пустым. На этом этапе нужно проверить:
- Нажмите, чтобы начать отладку в отладчике телефона (нажатие автоматически откроет devtools на ПК с Chrome)
- Убедитесь, что ваш телефон и компьютер находятся в одном сегменте сети.
- Проверьте прокси, отключите прокси, если прокси установлен (я просто установил прокси devtools пустым)
5-минутное руководство по началу работы
Возьмите страницу списка и страницу сведений в качестве примера, чтобы проиллюстрировать код и источник данных быстрого приложения.Обзор фильма «Гром».
Manifest.json
существуетmanifest.jsonПосле настройки маршрутизации в , вы можете написать код, а в сгенерированном шаблоне есть пример. Обратите внимание, что динамическая маршрутизация не может быть настроена.
Обратите внимание на использованиесистемный интерфейсбыть вmanifest.jsonизfeatureзаявление в. СмотретьДокументация для манифестаУзнайте о конкретных элементах конфигурации.
{
"package": "com.xunlei.movie",
"name": "迅雷影评",
"versionName": "1.0.0",
"versionCode": "1",
"minPlatformVersion": "101",
"icon": "/Common/logo.png",
"features": [
{ "name": "system.prompt" },
{ "name": "system.router" },
{ "name": "system.shortcut" },
{ "name": "system.fetch" },
{ "name": "system.webview" }
],
"permissions": [
{ "origin": "*" }
],
"config": {
"logLevel": "debug",
"designWidth": 640
},
"router": {
"entry": "List",
"pages": {
"List": {
"component": "index"
},
"Detail": {
"component": "index"
},
"About": {
"component": "index"
}
}
}
}
список
Список использует компонент списка быстрого приложения.Этот компонент является собственным компонентом, который имеет лучшую производительность прокрутки для длинных списков.Компонент списка также имеет событие onscrollbottom, которое удобно для загрузки раскрывающегося списка.
Компонент изображения аналогичен тегу img во внешнем интерфейсе, но атрибут alt отличается.Альт используется для отображения изображения-заполнителя, которое может быть только локальным изображением, которое отображается до загрузки изображения.
Компоненты типа элемента списка необходимы для достижения мультиплексирования фрагмента DOM, требуют того же типа атрибута DOM идентичной структуры, то же самое предусмотрено, так что атрибут типа элемента списка является ключом для прокрутки списка для оптимизации производительности.
<template>
<list class="list-main" onscrollbottom="loadData">
<list-item class="list-item" type="review" for="{{item in list}}">
<image class ="art-pic"
src="{{item.img}"
alt="../Common/assets/img/default.png">
</image>
<text class="art-title">{{item.title}}</text>
</list-item>
<!-- 加载更多，type属性自定义命名为loadMore -->
<list-item type="loadMore" class="load-more" show="{{hasMore}}">
<progress type="circular" class="round"></progress>
<text>加载更多</text>
</list-item>
</list>
</template>
В сетевом запросе быстрого приложения используется метод fetch в виде обратного вызова, который неудобно вызывать.Официал привел пример инкапсуляции в виде промиса, который можно вызвать через async/await.
Экспорт инкапсулированного метода выборки в app.ux можно использовать глобально, поскольку все интерфейсы, которые я использую, возвращают json, они анализируются непосредственно на этом уровне. При реальной разработке обратите внимание на обработку ошибок JSON.parse.
// app.ux
const natives = {
/**
* 网络请求
* @param options
* @return {Promise}
*/
async fetch (options) {
const p1 = new Promise((resolve, reject) => {
options.success = function (data, code) {
data = JSON.parse(data.data)
resolve({ data, code })
}
options.fail = function (data, code) {
reject({ data, code })
}
nativeFetch.fetch(options)
})
return p1
}
}
// 注入到全局
const hookTo = global.__proto__ || global
hookTo.natives = natives
export default {
natives
}
прыжок по маршруту
<template>
<list>
<list-item onclick="{{goDetail(item.id)}}" for="item in list"></list-item>
</list>
</template>
<script>
import router from '@system.router'
export default {
goDetail (id) {
router.push({
uri: '/Detail',
params: { id }
})
}
}
</script>
webview
Страница сведений просто загружает веб-просмотр и использует идентификатор, переданный со страницы списка, для запроса сведений о обзоре фильма.Тело обзора фильма — это адрес, хранящийся в CDN. использоватьwebперед компонентомmanifest.jsonОбъявите с помощью интерфейса веб-просмотра.
<!-- Detail/indev.ux -->
<template>
<!-- template里只能有一个根节点 -->
<div>
<web src="{{review.body_url}}" id="web"></web>
</div>
</template>
<script>
import api from '../Common/api/index.js'
export default {
data: {
id: '', // 列表页传过来的id
review: {}
},
onMenuPress() {
this.$app.showMenu()
},
onInit () {
this.getReview()
},
async getReview () {
try {
let data = await api.getReview(this.id)
this.review = data.cinecism_info || {}
this.$page.setTitleBar({ text: this.review.title })
} catch (error) {
console.log(error)
}
}
}
</script>
По сравнению с фронтенд-разработкой
Самая большая разница между быстрым приложением и фронтенд-разработкой — это части html и css, потому что быстрое приложение реализовано нативно, но не реализует все теги html, а те же теги, что и html, имеют некоторые отличия в использовании.
html
Многие html нельзя использовать в быстрых приложениях, таких как no p, h1~h2 и т. д., потому что они только имитируют некоторые теги html, которые в конечном итоге будут преобразованы в нативные компоненты.
Более того, в быстром приложении есть ограничения на вложенность подкомпонентов в компоненты, не все компоненты могут вкладывать подкомпоненты, при неправильной вложенности будет выдаваться ошибка при компиляции. Например, неправильно написано следующее:
<!--错误-->
<a href="">
<image src="http://pic.com/1.jpg"></image>
</a>
текстовый компонент
Используйте только a, span, text, label для размещения текстового содержимого
компонент изображения
Компонентом изображения является изображение, а не img. Использование похоже на img, но значение alt отличается. В быстром приложении alt относится к замещающему изображению перед загрузкой изображения, которое может быть только локальным адресом.
<image src="http://pic.com/1.jpg" alt="1.jpg"></image>
разное
Компоненты форм, видеокомпоненты и т. д. соответствуют внешнему интерфейсу, и есть некоторые компоненты, специфичные для быстрых приложений, такие как компоненты звездного рейтинга, компоненты индикатора выполнения, компоненты списка и т. д.
css
- дисплей может быть только гибким или ни одним
- положение может быть только фиксированным или никаким
- Единицы длины - только px и %
В отличие от традиционных веб-страниц, px — это единица относительно базовой ширины конфигурации проекта, которая была адаптирована к мобильному экрану, и ее принцип аналогичен rem. Ширину базовой линии можно настроить в файле mainifest.json.
javascript
Можно использовать базовый синтаксис, также можно использовать ES6, и в проекте установлена зависимость babel. Некоторые API для конкретных браузеров могут отличаться. Например, хранилище данных использует быстрое хранилище интерфейса приложения.
Сравните с Вью
Поскольку наша команда в основном разрабатывает стек технологий Vue, мы сравниваем общие черты и различия между быстрым приложением и Vue в синтаксисе. Быстрые приложения похожи на Vue, но все же есть большие отличия.
- У всех есть концепция инструкции, но метод написания отличается.В настоящее время вы не можете настроить инструкцию.
<!--左边是 vue 语法 右边是快应用语法-->
v-for => for
v-show => show
v-if => if
template => block
slot => slot
- Маршрутизация быстрого приложения осуществляется через файл конфигурации.
manifest.jsonНастроено, использование в экземпляре соответствует vue-router - Оба имеют концепцию компонентов, и способ введения компонентов немного отличается.
// vue
import child from './childComponent'
// 快应用
<import name="child" src="./childComponent"></import>
- Мониторинг и запуск событий аналогичен Vue.
$on$off$emit, события прослушивания нативных компонентов пишутся иначе
<!--vue-->
<div v-on:click="handleClick"><div>
<div @click="handleClick"><div>
<!--快应用-->
<div onclick="{{handleClick()}}"><div>
- Связь между компонентами похожа на чистый Vue, который можно передавать через реквизиты или монтировать на глобальный объект.
- Нельзя использовать экосистему Vue, такую как Vuex, в настоящее время нет механизма плагинов.
Преимущества и недостатки
преимущество
- Предоставляет множество системных функций, таких как совместное использование, уведомление, сканирование QR-кода, добавление значков на рабочий стол.
- Удобный пользовательский интерфейс, нет необходимости загружать, открытие за секунды, небольшое использование памяти
- Нативные приложения могут быть связаны
недостаток
- Каждая платформа должна зарегистрировать учетную запись
- Нет интегрированной среды разработки, отладка затруднена, а инструменты разработки сильно застревают.
- rpk файл максимум 1M
- Запущен отечественными производителями мобильных телефонов, естественно больше не поддерживают ios
Суммировать
При написании демки я все же столкнулся с множеством ям, в основном html и css частей. Например, в нашей компании фронтенд и рефакторинг разделены, рефакторинг отвечает только за написание html+css, а фронтенд отвечает за написание логики, интерфейса и прочего прочего, форма быстрого приложения и небольшой программы очень хлопотный для рефакторинга, и написать его невозможно, код используется везде.
Также есть проблема, когда на странице сведений отображается текст рецензии на фильм. Основная часть нашего обзора фильма представляет собой набор html-тегов в CDN без стиля, и могут быть некоторые теги, несовместимые с быстрым приложением, поэтому мы используем метод веб-просмотра для загрузки страницы. Но я не знаю, как внедрить css в веб-просмотр, поэтому страница испорчена.
В целом форма быстрого приложения по-прежнему очень удобна для пользователей, и они могут испытать некоторые функции приложения перед загрузкой приложения. Быстрота быстрого приложения в том, что в нем проведено множество нативных оптимизаций, а еще оно маленькое, настолько маленькое, что пользователь его не чувствует, которому суждено быть очень сложным.
кодовый адрес
GitHub.com/green VO/Пожалуйста…
Справочная документация
Документация по быстрой разработке приложений
Пролистайте и обратите внимание на внешний публичный аккаунт Xunlei.
автор: Джиалан
вычитка: передняя часть маленькая и прозрачная