Слияние кода завершено, страница обновится автоматически
Фреймворк для создания одностраничных приложений (SPA) с использованием Vue.js 2.0
JTaro Tutorial: https://github.com/chjtx/JTaro-Tutorial
<script src='https://unpkg.com/jtaro/dist/jtaro.js'></script>
<script src='https://unpkg.com/jtaro/dist/jtaro.min.js'></script>
npm install jtaro
html и body равной 100%, и скрывая прокрутку, за исключением случаев, когда используется JRoll для прокрутки контента.<!-- Указанный внешний адрес может быть медленным; рекомендуется скачать локально -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/jroll/src/jroll.js'></script>
jtaro_app в body и импортируйте JTaro после негоОбратите внимание: минифицированная версия jtaro.min.js удалена все разработочные данные; во время разработки используйте незаминифицированную версию jtaro.js
<div id="jtaro_app"></div>
<script src='https://unpkg.com/jtaro/src/jtaro.js'></script>
Vue.use(JTaro). Обратите внимание: обязательно зарегистрируйте компонент главной страницы до вызова Vue.use(JTaro)
<script>
Vue.component('home', {
template: '<div id="home">Привет JTaro!</div>'
})
Vue.use(JTaro)
</script>
4. Чтобы узнать больше, обратитесь к примерам.
git clone https://github.com/chjtx/JTaro.git
cd JTaro
npm install
npm run dev
npm installслишком медленно? Просто выполнитеclone, а затем перетянитеindex.htmlв браузер. Не используйтеcnpm, так как это приведёт к отсутствию многих зависимостей.
Vue.use(JTaro)
// или передайте параметры конфигурации
Vue.use(JTaro, {
el: '#jtaro_app',
default: 'home',
distance: 0.3,
duration: 200,
JRoll: window.JRoll,
vueOptions: {
store: store
} // новое в версии 0.7.0
})
```| Параметр | По умолчанию | Описание |
|:---------|:------------:|:---------|
| el | '#jtaro_app' | Элемент, к которому будет привязан Vue |
| default | 'home' | По умолчанию главная страница |
| distance | 0.1 | Кратность складывания страницы, где ширина экрана равна 1, диапазон значений: 0 <= distance <= 1 |
| duration | 200 | Время перехода между страницами |
| JRoll | window.JRoll | Для асинхронной загрузки JRoll, используется, если порядок загрузки JRoll и JTaro не гарантируется |
| vueOptions | Объект | Для передачи начальных параметров Vue, полезно для проектов с использованием `Vuex`. Параметры `el`, `render`, `template` игнорируются |
### Пример JTaro.vm
Вы можете получить основной экземпляр Vue через `JTaro.vm`.
### Переход this.go
```js
Vue.component('home', {
methods: {
goPage: function () {
// Перейти на страницу page
this.go('page')
// или вернуться на предыдущую страницу
this.go(-1)
// или использовать параметры URL для перехода на страницу page
this.go('page?a=1&b=2')
// или использовать объект параметров для перехода на страницу page
this.go('page', {a: 1, b: 2})
}
}
})
Vue.component('page', {
afterEnter: function (params) {
console.log(params)
}
})
```- этот метод `this.go` принимает два параметра, первый обязательный, второй необязательный.
- Первый параметр — строка или число. При передаче строки происходит рендеринг соответствующего компонента, при передаче числа вызывается метод `history.go`.
- Второй параметр — объект параметров, который сохраняется в `JTaro.params` и передается следующей странице через хук `afterEnter`.
- Поддерживается передача параметров через URL в формате `?a=1&b=2`, также сохраняется в `JTaro.params`.
- Приоритет передачи параметров через URL выше, чем передача через объект параметров.
## Роутинг route### Описание роутинга
- Обрабатывает хэши, разделённые символом `#`, но не поддерживает `history.pushState`.
- Каждому хеш-роуту должна соответствовать Vue-компонента. Например, при переходе в браузере по адресу `index.html#home`, JTaro автоматически будет искать компонент Vue с названием `home` и отображать его внутри `div#jtaro_app`. При переходе по адресу `index.html#sub/abc`, будет автоматически найдена компонента Vue с названием `sub__abc`.
- Роуты не должны повторяться. Если есть четыре страницы A, B, C и D, и они посещаются последовательно A -> B -> C -> D, то при переходе со страницы D обратно на страницу B, будут доступны только две страницы A -> B.
- Для возврата на предыдущую страницу можно использовать метод `this.go` с передачей параметров. Если используется `history.back` или кнопка "назад" в браузере, то после возврата параметры метода `afterEnter` будут равны null.
- При обновлении любой страницы кроме главной, автоматически загружается история переходов. То есть, если были посещены страницы A -> B, а затем на странице B была выполнена перезагрузка F5, то снова будут загружены страницы A -> B. В случае ручного изменения URL могут возникнуть неожиданные эффекты, поэтому может потребоваться удаление данных `JTaro.history` из `sessionStorage`.
### Хуки роутинга
- [beforeEnter](#beforeenter)
- [afterEnter](#afterenter)
- [beforeLeave](#beforeleave)
#### beforeEnterВыполняется до входа в роут (слайдера страницы)
```js
Vue.component('home', {
beforeEnter: function () {
// НЕЛЬЗYO получить экземпляр компонента страницы `this`
// так как он ещё не создан при выполнении этого хука
return true
}
})
// или
Vue.component('home', {
beforeEnter: function (cb) {
// НЕЛЬЗYO получить экземпляр компонента страницы `this`
// так как он ещё не создан при выполнении этого хука
setTimeout(function () {
cb()
}, 3000)
}
})
Метод beforeEnter блокирует выполнение роутинга и позволяет выполнять как синхронный, так и асинхронный код. Поэтому требуется вернуть true или вызвать коллбэк cb() для продолжения выполнения следующего кода. Для синхронного использования используйте return true, а для асинхронного или когда требуется использование экземпляра компонента страницы this, используйте cb().
beforeEnter не может получить экземпляр компонента страницы this, так как он ещё не создан при выполнении этого хука. Можно передать метод в cb(), который будет выполнен сразу после создания экземпляра компонента.
Vue.component('home', {
beforeEnter: function (cb) {
console.log(this) // JTaro
/** v0.5.x */
// cb(function (vm) {
// console.log(this) // Экземпляр компонента `<home>` `this`
// console.log(vm) // Экземпляр компонента `<home>` `this`
// })
} /** с версии v0.6.0 vm был заменён на params */
cb(function (params) {
console.log(this) // экземпляр компонента `<home>`
console.log(params) // параметры, переданные через this.go из предыдущего экрана
})
}
})
```#### afterEnter
После входа в маршрут (страница уже пролистана, без анимационной части) выполнение
```js
Vue.component('home', {
afterEnter: function (params) {
// Здесь получаем параметры, переданные через this.go из предыдущего экрана
console.log(params)
}
})
Метод afterEnter не блокирует выполнение маршрута
Перед выходом из маршрута (страница пролистывается назад) выполнение
/** старый способ до версии v0.6.0 */
Vue.component('home', {
beforeLeave: function (cb) {
// setTimeout(function () {
// // ...
// cb()
// }, 1000)
}
})
/** новый способ начиная с версии v0.6.1 */
Vue.component('home', {
beforeLeave: function (resolve, reject) {
if (confirm('У вас есть незаписанные данные, действительно хотите покинуть страницу?')) {
resolve()
} else {
reject()
}
}
})
С версии v0.6.1 метод beforeLeave был улучшен, теперь требуются выполнение resolve() или reject(). Вызов resolve() позволит успешно перейти на следующий экран, а вызов reject() прекратит переход и вернёт текущий маршрут.
Порядок выполнения четырёх хуков:
beforeEnter-> (mounted) ->afterEnter->beforeLeave
**Обратите внимание:**1. mounted — это хук жизненного цикла Vue, который выполняется при первом открытии страницы, после чего JTaro кэширует эту страницу, и этот хук больше не будет выполняться. 2. beforeEnter, afterEnter, beforeLeave выполняются каждый раз при изменении маршрута.### Техники использования хуков
JTaro.beforeEnter.add('hook', function() { ... });
JTaro.afterEnter.add('hook', function() { ... });
JTaro.beforeLeave.add('hook', function() { ... });
JTaro.[globalHook].add(имя, метод)
add, remove или run.JTaro.beforeEnter.remove('hook');
JTaro.afterEnter.remove('hook');
JTaro.beforeLeave.remove('hook');
JTaro.beforeEnter.run();
JTaro.afterEnter.run();
JTaro.beforeLeave.run();
Примечание: метод run обычно не требует вручательного вызова; JTaro автоматически его вызывает в нужный момент.## Коммуникация между компонентами страницы Communication
this.postMessage(<msg>, <page>) для отправки сообщений/* postMessage(<msg>, <name>)
* @param msg содержимое сообщения
* @param name имя Vue компонента
*/
Vue.component('about', {
mounted: function () {
// Отправляем сообщение modifyTitle на страницу home для изменения заголовка
this.postMessage('modifyTitle', 'home')
}
})
onMessage для получения сообщенийVue.component('home', {
onMessage: function (event) {
console.log(event) // {message: 'modifyTitle', origin: 'about'}
}
})
Примечание: только компоненты страницы (компоненты, связанные с маршрутами) могут использовать postMessage и onMessage,
Вопрос: Почему нет метода для получения экземпляра страницы? Например, getPageByName('home') для получения страницы home, а затем выполнения действий над ней с помощью this.postMessage. Какие преимущества имеет использование this.postMessage?
Ответ: Для удобства обслуживания каждое изменение должно иметь историю. Поэтому рекомендуется, чтобы каждый компонент страницы работал только со своими данными. Если требуется работа с данными других страниц, достаточно отправить сообщение цели и позволить ей обрабатывать его. Это и есть необходимость коммуникации между компонентами страницы.
JTaro Module — плагин для управления модулями при разработке приложений JTaro, который можно удалить перед деплоем.
Необходим NodeJS версии 6 и выше. Если его нет, установите с официального сайта.
Создайте пустую директорию, затем введите командную строку cd в эту директорию, выполните инициализацию проекта и установите JTaro, JTaro Module и JTaro Bundle.
# Инициализация
npm init
# Введите имя проекта
name: (jtaro-demo) jtaro-demo
# Все остальные поля нажмите Enter
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
# Подтвердите установку
Is this ok? (yes) yes
# Установите JTaro
npm i -D jtaro jtaro-module jtaro-bundle
index.html
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Hello JTaro</title>
<script src="./node_modules/jtaro-module/src/client.js"></script>
<script src="./node_modules/jroll/src/jroll.js"></script>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="jtaro_app"></div>
<script src="./node_modules/jtaro/dist/jtaro.js"></script>
<script>
Vue.use(JTaro, {
default: 'pages/home'
});
</script>
</body>
</html>
Создайте новую директорию с произвольным именем, например pages. В будущем вы можете скомпилировать её в один файл pages.js.Директория pages должна находиться на одном уровне с index.html. Внутри директории pages создайте файлы home.js и home.html.
home.js
import html from './home.html'
export default {
template: html,
data: function () {
return {
title: 'Привет, JTaro'
}
}
}
home.html
<style>
.this {
padding-top: 50px;
text-align: center;
font-size: 42px;
}
</style>
<div class="this">
{{title}}
</div>
Запустите следующую команду:
node ./node_modules/jtaro-module/src/server.js
Откройте браузер и перейдите по адресу http://localhost:3000/, чтобы проверить успешность запуска. Вы должны видеть текст "Привет, JTaro".
JTaro Bundle — это плагин, используемый при развертывании JTaro-приложений для объединения и сжатия отдельных частей кода.
www/index_template.html
Создайте папку www, которая будет использоваться для хранения кода для запуска в продакшене, в той же директории, что и index.html. Внутри папки www создайте файл index_template.html.
Обратите внимание: для запуска в продакшене можно использовать сжатую версию jtaro.min.js.
Файл www/index_template.html:
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Hello JTaro</title>
<script src="./node_modules/jroll/build/jroll.min.js"></script>
<script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="jtaro_app"></div>
<script src="./node_modules/jtaro/dist/jtaro.min.js"></script>
<script src="./pages.js"></script>
<script>
Vue.use(JTaro, {
default: 'pages/home'
})
</script>
</body>
</html>
```Этот файл index.html для запуска в продакшене (генерируется автоматически на основе файла index_template.html) отличается от файла index.html для разработки следующими моментами:
- Отсутствие client.js; версия для запуска в продакшене может работать без Node.js.
- Присутствие файла pages.js; при сборке JTaro Bundle преобразует папку pages в один файл pages.js.
- Используются минифицированные версии jroll, Vue и JTaro.
#### Шаг 2: Сборка
Создайте файл `build.js` в корневой директории проекта.
Код файла build.js:
```js
var jtaroBundle = require('jtaro-bundle')
jtaroBundle.bundle({
origin: 'index.html',
target: 'www/index_template.html'
})
Запустите команду в консоли:
node build.js
JTaro Bundle автоматически найдёт все необходимые файлы относительно указанного пути в файле index_template.html, а также попробует скопировать соответствующие папки в виде JS-файлов.
Вы должны заметить, что в папке www появились файлы pages.js, index.html и папка node_modules/. Затем вы можете перетянуть www/index.html в браузер для проверки работы приложения. Если всё сделано правильно, вы должны видеть такой же результат, как и во время разработки.
https://github.com/chjtx/JTaro/blob/master/LOG.md
postMessage и onMessage
display:block, остальные имеют display:none, что эффективно решает проблему медленной отрисовки при большом количестве страниц на устройствах AndroidbeforeEnter, afterEnter и beforeLeave для маршрутовJTaro.boot({...})
v0.7.0.Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )