uniapp简单页面操作：创建与跳转

在页面目录（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中的组件，但只能跳转本地页面。目标页面必须在 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 通常会与 

页面生命周期

文档地址：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

使用 Script Setup

    import { ref } from 'vue'  
    const num = ref(2)
    const setNum = () => { 
        let temValue = num.value + 5
        num.value = temValue
    }  

参考文档

• 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