同步操作将从 BarZu/JTaro 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
An H5 SPA framework for Vue.js 2.0
<script src='https://unpkg.com/jtaro/dist/jtaro.js'></script>
<script src='https://unpkg.com/jtaro/dist/jtaro.min.js'></script>
npm install jtaro
1、 创建index.html文件并在head里引入Vue、JRoll
<!-- 国外网址,访问较慢,建议下载到本地 -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/jroll/src/jroll.js'></script>
2、 在body里创建id为jtaro_app
的div,并在其后引入JTaro
<div id="jtaro_app"></div>
<script src='https://unpkg.com/jtaro/src/jtaro.js'></script>
3、 在div#jtaro_app
之后编写Vue组件,并执行Vue.use(JTaro)
启动应用
注意:务必确保首页组件在Vue.use(JTaro)之前注册
<script>
Vue.component('home', {
template: '<div id="home">Hello JTaro!</div>'
})
Vue.use(JTaro)
</script>
4、 将index.html文件拖到浏览器访问
要了解更多请查看示例
git clone https://github.com/chjtx/JTaro.git
cd JTaro
npm install
npm run dev
npm install
下载太慢?那就直接clone
之后将index.html
拖到浏览器即可。不要用cnpm
,会导致很多依赖缺失
Vue.use(JTaro)
// or 传入选项参数
Vue.use(JTaro, {
el: '#jtaro_app',
default: 'home',
distance: 0.3,
duration: 200,
JRoll: window.JRoll
})
选项 | 默认值 | 说明 |
---|---|---|
el | '#jtaro_app' | 给Vue挂载的元素 |
default | 'home' | 默认首页 |
distance | 0.1 | 页面折叠距离倍数,以屏幕宽度为1,取值范围为0 <= distance <= 1 |
duration | 200 | 页面切换过渡时间 |
JRoll | window.JRoll | 用于异步引入JRoll,不能确保JRoll和JTaro顺序时使用 |
Vue.component('home', {
methods: {
goPage: function () {
// 跳到page页
this.go('page')
// or 返回上一页
this.go(-1)
// or Url带参跳到page页
this.go('page?a=1&b=2')
// or 键值对带参跳到page页
this.go('page', {a: 1, b: 2})
}
}
})
Vue.component('page', {
afterEnter: function (params) {
console.log(params)
}
})
?a=1&b=2
形式,最终也是保存在JTaro.params里#
分割的hash,不支持history.pushState
index.html#home
,JTaro将自动查找以home
命名的Vue组件并渲染到div#jtaro_app
里。访问index.html#sub/abc
,将自动查找以sub__abc
命名的Vue组件this.go
可带参数返回之前的页面,如果使用history.back或浏览器后退键,回退页的afterEnter接收到的参数为nullJTaro.history
this.go
进行页面跳转,其作用有:
进入该路由(页面滑入)之前执行
Vue.component('home', {
beforeEnter: function () {
// 不!能!获取页面组件实例 `this`
// 因为当钩子执行时,组件实例还没被创建
return true
}
})
// or
Vue.component('home', {
beforeEnter: function (cb) {
// 不!能!获取页面组件实例 `this`
// 因为当钩子执行时,组件实例还没被创建
setTimeout(function () {
cb()
}, 3000)
}
})
beforeEnter
会阻断路由,可执行同步或异步代码,因此需要return true
或者执行回调cb()
继续执行后面的代码,同步使用return true
,异步或需要使用页面组件实例this
时请用cb()
beforeEnter
不能获取页面组件实例this
,因为当勾子执行时,组件实例还没被创建,可将方法传进cb()
,实例创建后会立即执行该方法
Vue.component('home', {
beforeEnter: function (cb) {
console.log(this) // JTaro
cb(function (vm) {
console.log(this) // <home>组件实例`this`
console.log(vm) // <home>组件实例`this`
})
}
})
进入该路由(页面已滑入,不含动画过程)后执行
Vue.component('home', {
afterEnter: function (params) {
// 这里获取上一个页面使用this.go携带的参数
console.log(params)
}
})
afterEnter 不会阻断路由执行
离开该路由(页面滑出)之前执行
Vue.component('home', {
beforeLeave: function (cb) {
setTimeout(function () {
// ...
cb()
}, 1000)
}
})
beforeLeave 和 beforeEnter 一样都会阻断路由执行,因此需要return true
或者执行回调cb()
来继续执行后面的代码。不同的是beforeLeave能够获取到this,因而在cb()
里传入function是无效的。
四个钩子执行顺序 beforeEnter -> (mounted) -> afterEnter -> beforeLeave
注意:
JTaro.beforeEnter.add('hook', function () { ... })
JTaro.afterEnter.add('hook', function () { ... })
JTaro.beforeLeave.add('hook', function () { ... })
JTaro.[globalHook].add(name, method)
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会在适当的时候自动调用
this.postMessage(<msg>, <page>)
发送消息/* postMessage(<msg>, <name>)
* @param msg 消息内容
* @param name Vue组件名称
*/
Vue.component('about', {
mounted: function () {
//向home页面发送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页面,然后可以在其它页面操作home页面,用this.postMessage
有什么好处?
答:为了方便维护,每处修改都有据可寻,因此建议每个页面组件只操作自身的数据,如果需要操作其它页面的数据,只需要向目标页面发送消息,让目标页面去处理。这也是页面组件通讯的必要性
JTaro嵌入了微型加速点击代码,效果类似于fastclick.js,用于解决IOS8以下苹果机和旧安卓系统的点击300ms延迟问题。
该优化只针对普通的div/span/a等非控件元素起作用,忽略AUDIO|BUTTON|VIDEO|SELECT|INPUT|TEXTAREA等多媒体或表单元素
JTaro Module 是开发JTaro应用时用于管理模块的插件,上线时可删除
需要 nodejs 6 以上版本,若未安装,请访问http://nodejs.cn/
创建一个空文件夹,然后在命令行里cd到该文件夹,初始化工程,然后安装JTaro、JTaro Module、JTaro Bundle
# 初始化
npm init
# 输入项目名称
name: (jtaro-demo) jtaro-demo
# 以下选项一路回车即可
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
# 输入yes结束
Is this ok? (yes) yes
# 安装JTaro
npm i -D jtaro jtaro-module jtaro-bundle
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<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文件夹打包成一个pages.js文件
pages文件夹与index.html同级,在pages文件夹里新建home.js、home.html
home.js的内容就是一个Vue组件,JTaro以页面组件为单元进行开发
home.js
import html from './home.html' //该路径是相对于home.js的,不能忽略./,否则在rollup.js打包时会出错
export default {
template: html,
data: function () {
return {
title: 'Hello JTaro'
}
}
}
home.html
<style>
this {
padding-top: 50px;
text-align: center;
font-size: 42px;
}
</style>
<div>
{{title}}
</div>
在命令行运行
node ./node_modules/jtaro-module/src/server.js
在浏览器上运行localhost:3000/
,能够看到Hello JTaro
文字表示成功了
JTaro Bundle 是部署JTaro应用时用于将零散的开发代码合并压缩的插件
在工程文件夹(即是与index.html同级)新建一个www
文件夹,用于存放上线代码,在www文件夹下新建index.html
www/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<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.html区别在于
在工程文件夹新建一个build.js
build.js
var jtaroBundle = require('jtaro-bundle')
jtaroBundle.bundle({
origin: 'index.html',
target: 'www/index.html'
})
在命令行运行
node build.js
JTaro Bundle 会自动根据www/index.html里的内容去查找相对index.html的文件并拷贝,如果该文件不存在,则查找对应名称的文件夹,如果文件夹存在,即尝试将该文件夹里的文件打包成一个与文件夹同名的js文件
将会看到www文件夹下多了pages.js和node_modules/文件夹,然后将www/indwx.html拖到浏览器访问,能看到与开发环境一致的效果表明成功了
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。