uni-app в последнее время был очень популярен, и все основные требования к набору персонала добавили uni-app к требованиям к работе, поэтому я взял на себя обязательство разработать проект публичного аккаунта WeChat компании с uni-app.
Эта статья подходит для чтения тем, у кого есть опыт разработки Vue.
1. Подготовка
1. Скачайте редактор HBuilderX
Загрузите редактор HBuilderX. HBuilderX является официальной рекомендацией uni-app, которая включает в себя визуальное создание проектов uni-app, запуск проектов, а также упаковку и компиляцию проектов.
Скачать адресную точкуздесь, потому что я разрабатываю только проект общедоступной учетной записи WeChat, который также является проектом H5.Все, что вы можете сделать, это загрузить стандартную версию.
2. Решить проблему, что редактор HBuilderX не может отформатировать файл less
Я использую less в качестве прекомпилируемого языка для css, если вы выберете прекомпилированный язык для sass в качестве css, вы можете пропустить этот шаг.
Изменение конфигурации этих двух файлов может решить эту проблему.
Просто добавьте содержимое в красную рамку.
2. Создайте проект с единым приложением
Создать проект в редакторе HBuilderX можно всего за два шага.
Рекомендуется выбирать встроенный шаблон проекта uni-ui, в который встроено большое количество общих компонентов, и не удалять слишком много бесполезных файлов и кодов.
Структура каталогов проекта после создания показана на рисунке
- компоненты Разместите встроенные компоненты.
- страницы Место разработки страниц.
- статические Статические ресурсы.
- Главный вход на странице проекта App.vue App.vue довольно проект Vue.
- main.js эквивалентен main.js проекта Vue.
- manifest.json Некоторая конфигурация, связанная с упаковкой и компиляцией.
- pages.json настроить маршрутизацию, стиль окна, встроенную панель навигации, нижнюю встроенную панель вкладок.
- uni.scss настраивает общие переменные стиля, встроенные в uni-app.
3. Запустите проект уни-приложения
Запуск проекта uni-app также очень прост в редакторе HBuilderX и выполняется за один шаг.
начать компиляцию
Скомпилировано успешно
открыть в браузереhttp://loaclhost:8080/, если страница выглядит так, как показано на рисунке ниже, проект успешно запущен.
4. Стадия разработки
1. Как убрать родную панель навигации
В моем прототипе проекта нет встроенной панели навигации, поэтому я должен сначала удалить ее.
Метод находится в документации здесьэто место.
когдаnavigationStyleустановить какcustomилиtitleNViewустановить какfalse, собственная панель навигации не отображается. Таким образом, есть два способа удалить родную панель навигации на стороне H5.
находятся в файле pages.json
Унифицированное удаление родной панели навигации
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "uni-ui基础项目"
}
}
],
Либо убрать родную панель навигации только для стороны H5.
"pages": [
{
"path": "pages/index/index",
"style": {
"h5":{
"titleNView":false
}
}
}
],
На следующем рисунке показан эффект после перехода на родную панель навигации.
2. Конфигурация маршрутизации
В настоящее время большинство фронтенд-проектов используют роутинг для управления переходами по страницам, поэтому при входе в новый фреймворк нужно сначала указать, как настроить роутинг этого фреймворка.
Метод настройки маршрутизации uni-app очень похож на апплет.Если вы знаете апплет, настройка проще.
Маршрутизация проекта uni-app по-прежнему настраивается в свойстве pages в файле pages.json, фактически применено вышеописанное.
Значением атрибута pages является массив, каждый элемент массива — это json-объект, и каждый маршрут настраивается в json-объекте, где атрибут path — это путь к странице, а style — это стиль страницы конфигурации, мы не будем смотреть на это сначала.
В проекте uni-app мы обычно пишем страницы в папке pages, например, добавляем страницу с именем в папку pagse.home.vueфайл, содержание файла следующее
<template>
<view>我是home页面</view>
</template>
<script>
</script>
<style>
</style>
Затем мы должны настроить это так в pages.json.
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/home",
"style": {
"navigationStyle": "custom"
}
}
],
Обновите страницу, вы обнаружите, что нет我是home页面.
Конечно, это не ошибка конфигурации. Просто в юни-приложении есть регламентПервый элемент узла страниц — это страница входа в приложение (т. е. домашняя страница).. Так что будем менять.
"pages": [
{
"path": "pages/home",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom"
}
},
],
В этот момент вы обнаружите, что компиляция не удалась.Причина в настройке файла в uni-app,Конечный хвост каждого элемента не может быть добавлен
,(запятая)., уберите запятую, обновите страницу после компиляции и всё получится, вы увидитеhome.vueконтент на этой странице.
Теперь мы ставимhome.vueЕсли этот файл будет удален, при компиляции будет сообщено об ошибке, и компиляция не будет успешной.
Подскажите не можем найтиhome.vueэтот файл, такПри добавлении/уменьшении страниц вам необходимо изменить массив страниц!
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom"
}
},
],
Перекомпилируйте, скомпилируйте успех.
3. Как представить значок Али
Иконки Али используются практически в каждом проекте.
В проекте Vue мы вводим значок Ali в качестве файла index.html в общей папке, который импортируется по ссылке.
Но в проекте uni-app файла index.html нет, так куда его вводить.
Как упоминалось ранее, App.vue — это основная запись на странице проекта, поэтому мы можем попытаться представить ее здесь.
В файле .vue проекта Vue мы вводим такой стиль
<style lang="less" scoped>
@import "./css/index.less";
</style>
Перейдите в MDN, чтобы запросить использование @import (Вход) и обнаружил, что @import можно использовать следующим образом.
@import url("chrome://communicator/skin/");
Затем попробуйте ввести значок Ali в App.vue следующим образом.
<style>
@import url("https://at.alicdn.com/t/font_1811528_5xzkmbymkb7.css");
</style>
Затем используйте его так в файле pages/index/index.vue.
<template>
<view class="container">
<text class="iconfont iconSIMCard"></text>
</view>
</template>
Обновите страницу и обнаружите, что внедрение прошло успешно.
4. Об использовании ярлыков
Если вы знаете, как разрабатывать небольшие программы, вы можете игнорировать это.
Ранее мы разработали официальную учетную запись WeChat, которая была разработана с помощью H5 и, естественно, может использовать теги html5. по-прежнемуdiv,span,img.
Затем вы можете использовать только собственные теги компонентов в проекте uni-app, например<view></view>довольно<div></div>,<text></text>довольно<span></span>,,<image></image>довольно<img/>, нажмите здесь, чтобы узнать подробностиздесьСмотреть.
5. О проблеме пути к изображению
Говоря об этом пути, мы должны сначала понять несколько здравого смысла.
~представляет корневой каталог веб-приложения,/Также означает корневой каталог,../Указывает каталог верхнего уровня текущего каталога,./Представляет текущий каталог.
Чтобы импортировать изображения в проект uni-app, используйте тег встроенного компонента<image></image>, его атрибут src предназначен для настройки пути к изображению, поддерживаются только относительные пути, абсолютные пути, поддерживается код base64, но он используется в пользовательских компонентах<image>Когда src использует относительный путь, поиск пути может завершиться ошибкой, поэтому рекомендуется использовать абсолютный путь.
В проекте я помещаю ресурсы изображений в папку assets/images корневого каталога. Если ваша страница имеет глубокий путь в папке страниц, например.
Так ты собираешься написать это на странице?
<template>
<view>
<image src="../../../../assets/images/indeximg1.png"></image>
</view>
</template>
На самом деле мы можем использовать~Давайте внесем изменения.
<template>
<view>
<image src="~assets/images/indeximg1.png"></image>
</view>
</template>
Использование фона в меньшем количестве также может использовать преимущества~
.home{
background:url(~images/card/home.png) no-repeat;
}
Этого можно избежать, потому что меньше или больше../Полученный путь неверный, и его легко настроить.
Кроме того, мы можем добавить файл vue.config.js в корневой каталог, как в проекте Vue, для настройки веб-пакета.Конечно, существуют различия между конфигурацией в проекте uni-app и конфигурацией в проекте Vue, вы можно нажатьздесьСмотреть.
Мы настраиваем псевдоним пути в файле vue.config.js, и метод настройки такой же, как и в проекте Vue.
const path = require('path');
function resolve(dir) {
return path.resolve(__dirname, dir)
}
module.exports = {
configureWebpack: config => {
return baseConfig = {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'assets': resolve('assets'),
'css': resolve('assets/css'),
'images': resolve('assets/images'),
}
},
}
},
}
6. Об использовании сторонних компонентов
Сторонние компоненты, используемые в уни-приложении, загружаются в папку компонентов. Так что практика внедрения сторонних компонентов такая же, как и при разработке проекта Vue.
Чтобы использовать всплывающий слой Popup, импортируйте его следующим образом.
components: {
uniPopup: () => import('@/components/uni-popup/uni-popup.vue'),
uniPopupDialog: () => import('@/components/uni-popup/uni-popup-dialog.vue'),
},
7. О переходах между страницами
- проход страницы
существуетuni.navigateTo()серединаurlПараметр - это путь, по которому могут следовать параметры, которые используются для передачи параметров на страницу, а параметры находятся на новой странице.onLoadФункция ловушки получает, как показано в следующем примере.
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
- стопка страниц
Фреймворк управляет всеми текущими страницами в виде стеков, помните, что стеки идут в порядке очереди.
Запускается, когда пользователь нажимает кнопку «Назад» в верхнем левом углу, а пользователь Android нажимает физическую кнопку «Назад».uni.navigateBack, закрыть текущую страницу, то есть извлечь текущую страницу из стека, и вернуться на предыдущую страницу, то есть вернуться на верхнюю страницу в стеке страниц. Конечноuni.navigateBackсерединаOBJECT.deltaВы можете контролировать количество возвращаемых страниц в стеке страниц. Можно использоватьgetCurrentPages()Можно получить объекты всех стеков страниц.
uni.navigateTo(), сохранить текущую страницу, поместить текущую страницу в стек, а затем перейти к новой странице.
uni.redirectTo(), закрыть текущую страницу, не помещать текущую страницу в стек, а затем перейти на новую страницу.
uni.navigateTo(), uni.redirectTo()Можно открывать только страницы без tabBar.
Вы не можете выполнять переходы между страницами в App.vue. Если вы обновите всю страницу в браузере, текущий стек страниц будет очищен.
8. Об использовании всплывающих окон сообщений
При взаимодействии с сервером вы должны использовать всплывающее окно сообщения, например, выдавать сообщение об ошибке при сообщении об ошибке. Платформа uni-app инкапсулирует следы нескольких всплывающих окон сообщений.
uni.showToast()Отображает всплывающее окно с подсказкой сообщения.uni.hideToast()Скрыть окно подсказки сообщения.uni.showModal()Отображает модальное всплывающее окно, похожее на стандартное окно сообщения html: предупреждение, подтверждение.
10. Об использовании анимации загрузки
uni.showLoading()Показать окно загрузки, нужно активно звонитьuni.hideLoading()чтобы закрыть окно подсказки.
uni.hideLoading()Скрыть всплывающую подсказку загрузки.
showToast и showLoading являются одним и тем же нижним слоем, поэтому showToast и showLoading будут перекрывать друг друга, иuni.hideLoading()Также отключает showToast, поэтому обратите внимание на порядок вызова.
11. О проблеме Invalid Host header при использовании обратного прокси nginx
Нажмите на файл manifest.json и установите его в параметре devServer в h5."disableHostCheck": true.
12. Об использовании интерфейса запроса формата formData
используется в уни-приложенииuni.request()общаться с сервером. вdataПараметр — это данные, передаваемые на сервер.
Данные, окончательно отправленные на сервер, имеют тип String. Если входящие данные не имеют типа String, они будут преобразованы в String. Правила преобразования следующие:
- Для метода GET данные преобразуются в строку запроса. Например, {имя: 'имя', возраст: 18} Преобразованный результат: имя=имя&возраст=18.
- Для данных с методом POST и заголовком['content-type'] как application/json будет выполнена сериализация JSON.
- Для данных с методом POST и заголовком ['content-type'] является application/x-www-form-urlencoded, данные будут преобразованы в строку запроса.
найдуuni.request()Данные типа formData не могут быть отправлены на серверную часть. Если вы хотите отправить данные типа formData, используйтеuni.uploadFile(), его роль заключается в загрузке локальных ресурсов на сервер разработчика, а клиент инициирует запрос POST, где тип содержимого — multipart/form-data.
formDataиспользуются параметрыuni.uploadFile()Загрузить другие дополнительные данные формы в локальные ресурсы.
uni.uploadFile()несколько обязательных параметров, таких какurl,filePath,nameВы можете заполнить все, что хотите. так доступноuni.uploadFile()Инициируется запрос интерфейса с форматом данных formData.
13. О приобретении размера элемента
Поскольку uni-app не поддерживает внедрение подключаемых модулей DOM, таких как jQuery, когда оно является кроссплатформенным, платформу H5 можно внедрить и использовать посредством условной компиляции. Так что лучше не внедрять jQuery в юни-приложение, можно использоватьuni.createSelectorQuery()СоздаватьSelectorQueryЭкземпляр объекта для получения информации DOM.
Например, чтобы получить<view class="p-list"></view>высота.
const _this = this;
uni.createSelectorQuery().select(".p-list").boundingClientRect(data => {
_this.height = data.height;
}).exec();
14. О реализации функции обновления региональных подтягиваний
Реализовано с помощью встроенных компонентов прокрутки в uni-app и сторонних компонентов uni-load-more.
Обратите внимание, что фиксированная высота должна быть установлена в представлении прокрутки, чтобы она вступила в силу.
<template>
<view class="p-list">
<scroll-view scroll-y="true" @scrolltolower="lower" :style="{height:height+'px'}">
<view v-for="item in list">{{item}}</view>
<uni-load-more :status="status" iconType="auto" v-show="isShow"></uni-load-more>
</scroll-view>
</view>
</template>
<script>
export default {
data(){
return {
current:1,//页码
list:[],
height: 0,//列表区域高度
isShow:false,
status: 'loading',//加载更多的状态
}
},
components: {
uniLoadMore: () => import('@/components/uni-load-more/uni-load-more.vue'),
},
mounted() {
this.getViewHeight();
},
methods: {
getViewHeight() {
const _this = this;
uni.createSelectorQuery().select(".p-list").boundingClientRect(data => {
_this.height = data.height;
}).exec();
},
lower() {
if (this.isShow) return;
this.isShow = true;
this.current++;
this.getList();
},
getList(){
let data = new Object;
data.current = this.current;
data.size = 15;//每次加载条数
API.getRenewRecord(data)
.then(res => {
this.isShow = false;
if (res.code == 200) {
this.list = [...this.list, ...res.data]
if (res.data.length == 0) {
this.status = 'noMore';
this.isShow = true;
}
}
})
.catch(err => {
this.isShow = false;
})
}
}
}
</script>
15. О реализации функции регионального выпадающего обновления
Если заголовок страницы имеет фиксированное содержимое, обновление по запросу может быть реализовано только с помощью встроенного компонента прокрутки. Обратите внимание, что фиксированная высота должна быть установлена в представлении прокрутки, чтобы она вступила в силу.
<template>
<view class="p-list">
<scroll-view scroll-y refresher-enabled
:refresher-triggered="triggered"
:refresher-threshold="100"
@refresherrefresh="onRefresh" :style="{height:height+'px'}">
<view v-for="item in list">{{item}}</view>
</scroll-view>
</view>
</template>
<script>
export default {
data(){
return {
current:1,//页码
list:[],
height: 0,//列表区域高度
triggered:false,//下拉刷新状态，true开启下拉刷新，false结束下拉刷新
}
},
mounted() {
this.getViewHeight();
},
methods: {
getViewHeight() {
const _this = this;
uni.createSelectorQuery().select(".p-list").boundingClientRect(data => {
_this.height = data.height;
}).exec();
},
onRefresh() {
if (this.triggered) return;
this.triggered = true;
this.current++;
this.getList();
},
getList(){
let data = new Object;
data.current = this.current;
data.size = 15;//每次加载条数
API.getRenewRecord(data)
.then(res => {
this.triggered = false;
if (res.code == 200) {
this.list = [...res.data,...this.list]
}
})
.catch(err => {
this.triggered = false;
})
}
}
}
</script>
Потому что в браузере WeChat вся страница будет скользить вниз при вытягивании вниз, а затем зависает выпадающее обновление прокрутки. Решить следующими методами
Сначала включите раскрывающийся мониторинг обновления страницы в pages.json.
{
"pages":[
{
"path": "testList",
"style": {
"enablePullDownRefresh": true
}
},
]
}
Затем прослушайте раскрывающееся обновление на странице и немедленно выполните раскрывающееся обновление.uni.stopPullDownRefreshНемедленно отключите функцию обновления по запросу.
onPullDownRefresh() {
uni.stopPullDownRefresh()
},
При этом в App.vue скрыть эффект выпадающего обновления страницы
<style>
uni-page[data-page=websms] uni-page-refresh {
display: none;
}
</style>
16. Решение, чтобы страница не сползала вниз после того, как IOS убирает программную клавиатуру
<template>
<view>
<input v-model.trim="value" @blur="handleblur"/>
</view>
</template>
<script>
export default{
methods: {
handleblur() {
uni.pageScrollTo({
scrollTop: 0,
duration: 0
});
},
}
}
</script>
17. IOS6 не может растягивать родительскую высоту, используемую вложенностью display:flex.
добавить к родительскому элементуmin-heightАтрибуты. или избегать вложенности
18. О пользовательской упакованной странице index.html
В проектах uni-app по умолчанию нет index.html, в отличие от проектов Vue с index.html по умолчанию. Итак, как использовать CND для импорта сторонних библиотек?
Во-первых, в корневом каталоге создайте новый файл index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Затем добавьте следующую конфигурацию в manifest.json.
"h5":{
"template": "index.html",
}
19. Операция по оптимизации первого экрана
Включить оптимизацию встряхивания дерева и предварительную загрузку Затем добавьте следующую конфигурацию в manifest.json.
"h5":{
"optimization": {
"prefetch": true,
"preload": true,
"treeShaking": {
"enable": true
}
}
}
20. По поводу медленной загрузки первого экрана IOS.
5. Этап развертывания
1. Релиз Н5
настроить сначала
Затем упаковать и скомпилировать
Наконец, сгенерированные файлы упаковываются и размещаются на сервере.