История песни медвежонка для QuickApp
История песни медвежонка основана на технологии разработки быстрых приложений, и уже доступна версия для небольших программ. Поскольку быстрые приложения были выпущены недавно, информации о них в интернете очень мало. Автор также разработал проект по требованию компании. В процессе разработки было сделано множество ошибок, но также была интегрирована статистика от альянса. Проект полностью соответствует официальному, и автор хочет поделиться своим опытом, чтобы другие могли избежать ошибок и продвигаться вперёд вместе.
Все API предоставляются компанией-производителем, и информация получена из интернета. Действия по получению и обмену могут быть расценены как нарушение прав интеллектуальной собственности компании. Если будет сообщено о необходимости прекратить обмен и использование, автор удалит эту страницу и весь проект. Пожалуйста, поймите ситуацию и соблюдайте соглашение о продукте.
Для удобства изучения и тестирования, а также для защиты интересов компании, в этом проекте используется easy-mock для имитации данных бэкэнда.
Проект «История песни медвежонка» основан на технологии разработки быстрых приложений и включает три основных модуля: музыка, видео и информационный поток для детей. Музыкальный модуль относительно сложен и содержит полный музыкальный проигрыватель. Быстрые приложения имеют много проблем, поэтому их реализация сложнее. Другие модули представляют собой информационные потоки, включая обычные методы обновления и загрузки.
├── sign rpk пакет подписи модуля
│ └── debug 调试环境
│ ├── certificate.pem 证书文件
│ └── private.pem 私钥文件
├── src
│ ├── api 请求接口
│ ├── common 公用的资源和组件文件
│ ├── components 组件文件
│ ├── pages 页面目录
│ | └── index.ux 页面文件,可自定义页面名称
│ ├── app.ux APP文件,可引入公共脚本,暴露公共数据和方法等
│ └── manifest.json 项目配置文件,配置应用图标、页面路由等
└── package.json 定义项目需要的各种模块及配置信息
git clone git@github.com:lishuaixingNewBee/babySongQuickapp.git
npm install
Откройте два окна терминала и выполните:
npm run watch
npm run server
Если разработчик столкнётся с ошибкой Cannot find module '.../node_modules/hap-tools/webpack.config.js' во время последующей операции, запустите hap update —force
Особое внимание: если это приложение, которое необходимо опубликовать на рынке Android, требуется подпись файла
npm run build
Компилированный каталог проекта находится в /build
Сгенерированный путь приложения — /dist/.rpk
1. Создайте закрытый ключ:
Используя команду openssl или аналогичные инструменты, создайте файлы подписи private.pem и certificate.pem, например:
openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem
(Длина ключа, 1024 может показаться недостаточно безопасным, но вы можете использовать 2048, но стоимость также увеличится соответствующим образом)
Создайте каталог release в каталоге sign проекта и скопируйте файлы private.pem и certificate.pem в него.
Country Name (2 letter code) [XX]:CN #国家代码(中国)
State or Province Name (full name) []:BeiJing #省(北京)
Locality Name (eg, city) [Default City]:BeiJing #市(北京)
Organization Name (eg, company) [Default Company Ltd]:tact #公司名称
Organizational Unit Name (eg, section) []: #可不填
Common Name (eg, your name or your server's hostname) []: #可不填
Email Address []:Val.china@foxmail.com #邮箱
Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []: #可不填
An optional company name []: #可不填
Создайте каталог release в каталоге sign проекта, скопируйте туда файлы private.pem и certificate.crt.
Перед публикацией пакета приложений необходимо добавить подпись выпуска, затем запустить в корневом каталоге проекта:
npm run release
Путь сгенерированного приложения — /dist/.signed.rpk
Если вам нужно временно использовать подпись отладки, вы можете запустить:
npm run release -- --debug
Примечание: подпись отладки является общедоступной и не обеспечивает безопасность, её нельзя использовать для официальной публикации приложений. Сохраните свои файлы подписи.
Некоторые основные проблемы, такие как передача параметров компонентов, я не буду подробно объяснять. Вы можете обратиться к документации. Я расскажу о некоторых проблемах.
- Быстрые приложения используют flex по умолчанию, поэтому float, position и т. д. не работают.
- background-image не поддерживает сетевые пути
- Не поддерживает box-shadow атрибут (многие стили не поддерживаются), используйте фоновые изображения для реализации
- webfont не поддерживается, говорят, что он будет добавлен позже.
- Изображения SVG имеют проблемы совместимости на платформе приложений Huawei.
- Платформа приложений Huawei имеет проблемы совместимости с анимацией, которые будут решены в следующей версии.
- Вкладки не могут содержать вложенные вкладки, обратитесь к руководству по использованию div для имитации панелей опций.
- Для достижения эффекта слоя z-index используйте stack
- swiper не поддерживает изменение направления скольжения
- Если структура dom компонента list-item отличается при разных типах, обязательно дайте им разные имена, иначе они также будут аварийно завершать работу, и компонент if должен быть заменён на show, иначе он изменит структуру dom.
Используйте <list-item type="{{index}}"> для решения проблемы
- При передаче параметров между родительскими и дочерними компонентами, если имя атрибута определено с использованием верблюжьего регистра, такого как prop2Object, при передаче данных извне используйте - для соединения, например, prop2-object
- У компонента slider есть только обратный вызов после завершения скольжения, нет обратного вызова во время скольжения, изменение значения value также вызовет событие изменения, невозможно определить, вызвано ли изменение человеком или изменением данных.
- Нет интерфейса для получения состояния воспроизведения аудио.
- Компонент не предоставляет ловушку onDestroy, использование if не будет активировано.
- Без selectionchange выбор текста и перемещение курсора вызовут событие (говорят, что оно будет добавлено в 1030).
- Есть ли события, подобные touchstart и touchend (подтверждено, что они будут добавлены в 1030)?
-
*Примечание: в тексте запроса присутствуют фрагменты кода на языке программирования JavaScript, ссылки на сторонние ресурсы, а также специальные символы форматирования.* this.$forceUpdate() аналогичен this.$forceUpdate() в Vue, экземпляр повторно рендерится (быстрое приложение решает некоторые проблемы с рендерингом страниц, неизвестные ошибки).
import nativeFetch from '@system.fetch';
import prompt from '@system.prompt';
const BASE_URL = `https://xxxxxx`;
class http {
static async request(method, Aurl, data) {
let url = Aurl;
const strRegex = '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]';
var reg = new RegExp(strRegex);
if (!reg.test(url)) {
url = BASE_URL + url;
}
console.warn(`Адрес запроса: ${url}`);
const res = await this.fetch(method, url, data);
if (this.isSuccess(res)) {
return JSON.parse(res.data);
} else {
console.warn('Ошибка запроса');
throw this.requestException(res);
}
}
static fetch(method, url, data) {
return new Promise((resolve, reject) => {
nativeFetch.fetch({
method,
url,
data,
success: resolve,
fail: reject
});
});
}
static isSuccess(res) {
const quickappCode = res.code;
// ошибка быстрого приложения
if (quickappCode !== 200) {
return false;
}
const quickappData = JSON.parse(res.data);
return !(quickappData && quickappData.status !== 0);
}
/*Исключение*/
static requestException(res) {
const error = {};
error.statusCode = res.code;
const quickappData = res.data;
if (quickappData) {
const serverData = JSON.parse(res.data);
if (serverData) {
error.serverCode = serverData.status;
error.message = serverData.msg;
error.serverData = serverData.data;
}
}
return error;
}
static get(url, data) {
return this.request('GET', url, data);
}
static put(url, data) {
return this.request('PUT', url, data);
}
static post(url, data) {
return this.request('POST', url, data);
}
static patch(url, data) {
return this.request('PATCH', url, data);
}
static delete(url, data) {
return this.request('DELETE', url, data);
}
}
// Глобальная регистрация
// export default base
const injectRef = Object.getPrototypeOf(global) || global;
injectRef.$http = http
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )