更多详细内容,请微信搜索“前端爱好者
“, 戳我 查看 。
页面简单操作
创建页面
在页面目录(pages
),鼠标右键点击 新建页面(P),即可进入新建页面面板。
详细界面如下:
页面创建成功后,会自动创建页面信息到页面配置文件 (pages.json
创建底部导航栏
页面效果如下:
uni-app 的 底部导航栏 和微信小程序的配置很类似 查看微信小程序tabbar配置
具体操作:
在 pages.json文件 下引入如下配置即可
...
"tabBar": {
"color": "#333",
"selectedColor": "#f90",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/c1.png",
"selectedIconPath": "static/c3.png"
},
{
"text": "个人中心",
"pagePath": "pages/personalCenter/index/index",
"iconPath": "static/c2.png",
"selectedIconPath": "static/c4.png"
}
],
}
...
页面跳转
navigator标签
该组件类似HTML中的<a>
组件,但只能跳转本地页面。目标页面必须在 pages.json
中注册。
navigateto api
- uni.navigateTo(OBJECT)
- uni.redirectTo(OBJECT)
- uni.reLaunch(OBJECT)
- uni.switchTab(OBJECT)
- uni.navigateBack(OBJECT)
//在起始页面跳转到test.vue页面并传递参数
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); //打印出上个页面传递的参数。
}
}
组合式 API(Composition API)
通过组合式 API,我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中,组合式 API 通常会与 <script setup>
搭配使用。
这个 setup attribute 是一个标识,告诉 Vue 需要在编译时进行一些处理,让我们可以更简洁地使用组合式 API。
比如,<script setup>
中的导入和顶层变量/函数都能够在模板中直接使用。
从 vue 包内导入并使用基础的组合式API,具体 API 可以参考:Vue 官网
从 @dcloudio/uni-app 包内导入 uni-app 应用生命周期 及 页面的生命周期。
应用生命周期
文档地址:https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle
App.vue是uni-app的主组件,所有页面都是在App.vue下进行切换的,是 页面入口文件。
但 App.vue本身不是页面,这里不能编写视图元素 ,也就是没有<template>
。
这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData
应用生命周期仅可在App.vue中监听,在页面监听无效。
uni-app 支持如下应用生命周期函数:
示例代码
<script>
// 只能在App.vue里监听应用的生命周期
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
页面生命周期
文档地址:https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
uni-app会将 pages.json -> pages配置项中的第一个页面,作为当前工程的首页(启动页)。
uni-app 页面除 支持 Vue 组件生命周期 外还支持下方页面生命周期函数,当以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。
使用组合式 API
使用 Setup
<template>
<view class="container">
<button @click="setNum">{{num}}</button>
</view>
</template>
<script>
import { defineComponent,ref } from 'vue'
export default defineComponent({
setup(props, context) {
const num = ref(2)
const setNum = () => {
let temValue = num.value + 5
num.value = temValue
}
return {
num,
setNum
}
}
})
</script>
<style>
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
</style>
使用 Script Setup
<template>
<view class="container">
<button @click="setNum">{{num}}</button>
</view>
</template>
<script setup>
import { ref } from 'vue'
const num = ref(2)
const setNum = () => {
let temValue = num.value + 5
num.value = temValue
}
</script>
<style>
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
</style>
参考文档
- https://uniapp.dcloud.net.cn/component/navigator.html
- https://uniapp.dcloud.net.cn/api/router.html#navigateto
- https://uniapp.dcloud.net.cn/tutorial/vue3-composition-api.html#%E4%BD%BF%E7%94%A8-script-setup