- 前面我还说过,除了有应用程序的生命周期和页面的生命周期以外,其实还有组件的生命周期,组件的生命周期我就不介绍了
- 为什么呢?因为 UniApp 当中组件的生命周期和 Vue 的组件的生命周期是一样的,所以这里就不再介绍了
创建一个全新的项目:
然后在配置一下,微信小程序的 AppId,直接去之前的项目中拷贝一下即可,找到之前项目的 manifest.json
文件,然后选择微信小程序配置,复制一下即可。
这里我创建三个页面来进行演示,分别是 one, two, three,然后在 pages.json
文件中配置一下,我直接将对应的代码粘贴在下方快速搭建起来,主要是看 UniApp 中路由的知识点。
one 页面:
<template>
<view>
<text>one</text>
</view>
</template>
two 页面:
<template>
<view>
<text>two</text>
</view>
</template>
three 页面:
<template>
<view>
<text>three</text>
</view>
</template>
首页:
<template>
<view>
<text>首页</text>
</view>
</template>
pages.json 配置:
{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false
}
},
{
"path": "pages/one/one",
"style": {
"navigationBarTitleText": "one",
"enablePullDownRefresh": false
}
},
{
"path": "pages/two/two",
"style": {
"navigationBarTitleText": "two",
"enablePullDownRefresh": false
}
},
{
"path": "pages/three/three",
"style": {
"navigationBarTitleText": "three",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/one/one",
"text": "one"
}, {
"pagePath": "pages/two/two",
"text": "two"
}, {
"pagePath": "pages/three/three",
"text": "three"
}]
}
}
什么是路由呢?路由就是页面之间的跳转,比如说我们现在在首页,然后我们点击了一个按钮,然后跳转到了 one 页面,这个过程就是路由
那么在 UniApp 中怎么进行路由跳转呢?这个时候就需要我们打开官方文档进行查阅了,官方文档地址:https://uniapp.dcloud.net.cn/tutorial/page.html#路由
经官方介绍,uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转。
首先我们来看 调用API跳转
。
打开调用API跳转官方文档:https://uniapp.dcloud.net.cn/api/router.html#
这里我介绍一下常用的几个 API:
更改 index.vue 文件,添加一个按钮,点击按钮跳转到 one 页面:
<template>
<view>
<button @click="onJumpOne">navigateTo</button>
</view>
</template>
<script>
export default {
methods: {
onJumpOne() {
uni.navigateTo({
url: '/pages/one/one'
})
}
}
}
</script>
当我运行测试发现,控制台报错了,错误信息是 navigateTo:fail can not navigateTo a tabbar page
,意思是说不能跳转到 tabBar 页面,我们需要将 pages.json 文件中的 tabBar 配置去掉,为什么要去掉呢?因为 tabBar 页面是底部导航栏,是不能跳转的,所以我们需要将其去掉,然后再次运行测试,发现可以正常跳转了。
这里我将 one/two 的 tabBar 配置去掉,然后再次运行测试,发现可以正常跳转了。
更改 index.vue 文件,添加一个按钮,点击按钮跳转到 two 页面:
<template>
<view>
<button @click="onJumpOne">redirectTo</button>
</view>
</template>
<script>
export default {
methods: {
onJumpOne() {
uni.redirectTo({
url: '/pages/two/two'
})
}
}
}
</script>
更改 index.vue 文件,添加一个按钮,点击按钮跳转到 three 页面:
<template>
<view>
<button @click="onJumpOne">switchTab</button>
</view>
</template>
<script>
export default {
methods: {
onJumpOne() {
uni.switchTab({
url: '/pages/three/three'
})
}
}
}
</script>
到这,通过调用 API 的方式,我们就可以实现页面之间的跳转了。大概就先介绍这么多,接下来我们来看看第二种方式。
打开官方文档:https://uniapp.dcloud.net.cn/component/navigator.html#
废话不多说,直接将上面的代码转换为 navigator 组件的方式,navigator 中最主要是属性就是 url 与 open-type。
更改 index.vue 文件,添加三个按钮,分别跳转到 one、two、three 页面:
<template>
<view>
<navigator url="/pages/one/one" open-type="navigate">
<button type="default">navigate</button>
</navigator>
<navigator url="/pages/two/two" open-type="redirect">
<button type="default">redirect</button>
</navigator>
<navigator url="/pages/three/three" open-type="switchTab">
<button type="default">switchTab</button>
</navigator>
</view>
</template>
如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等,可点击“私信”按钮向作者进行反馈;如作者无回复可进行平台仲裁,我们会在第一时间进行处理!
加入交流群
请使用微信扫一扫!