uni-app和vue开发的区别

单位

推荐使用rpx

钩子函数

import { onLaunch } from "@dcloudio/uni-app"

• onLaunch: 在应用初始化时触发，适用于小程序和网页。
• onShow: 在应用启动或从后台进入前台时触发，适用于小程序和网页。
• onHide: 在应用从前台进入后台时触发，适用于小程序和网页。
• onError: 在应用发生脚本错误或 API 调用出现报错时触发，适用于小程序和网页。
• onUnload: 在页面被关闭或小程序被卸载时触发，适用于小程序和网页。
• onLoad: 在页面加载时触发，适用于小程序和网页。
• onReady: 在页面初次渲染完成时触发，适用于小程序和网页。
• onResize: 在页面尺寸变化时触发，适用于小程序和网页。
• onShareAppMessage: 在小程序页面转发时触发，适用于小程序。

页面跳转

在uni-app组件中进行跳转，需要我们使用uni提供的特定的API

uni.navigateTo({
        url: '/pages/index/index' // 首页的路由路径
    });
uni.redirectTo({
        url: '/pages/index/index' // 首页的路由路径
      });
// 如果是跳转到tabbar page页面，则需要使用switchTab
uni.switchTab({
        url: '/pages/index/index' // 首页的路由路径
      });

路由设置方式

所有的路由配置需要在pages.json里面进行配置

底部导航栏👇👇👇👇

"tabBar": {
    "color":"#000",
    "selectedColor":"#3DC5FB",
    "list": [
      {
        "text":"首页",
        "pagePath":"pages/index",
        "iconPath":"static/tabbar/home-default.png",
        "selectedIconPath":"static/tabbar/home.png"
      },
      {
        "text":"订单",
        "pagePath":"pages/Tenant/userOrder",
        "iconPath":"static/tabbar/order-default.png",
        "selectedIconPath": "static/tabbar/order-active.png"
      },
      {
        "text":"我的",
        "pagePath":"pages/Tenant/my",
        "iconPath":"static/tabbar/my-default.png",
        "selectedIconPath":"static/tabbar/my-active.png"
      },
      {
        "text": "帮助",
        "pagePath":"pages/help",
        "iconPath":"static/tabbar/help-default.png",
        "selectedIconPath":"static/tabbar/help-active.png"
      }
    ]
  },

页面之间传参

使用uni.$on 和 uni.$set进行页面之间的传值

1. 页面配合uni.navigateBack使用

 uni.navigateBack({
    delta: 1, // 回退的层数
    success: () => {
      uni.$emit("dataBack", {
        regionId: id,
        titleFull: showCity.value,
      });
    },
  });

2. 接收参数的页面在钩子函数中

onLoad( () => {
    uni.$on("dataBack", function (data) {
        searchObject.value.region = data.regionId;
        address.value = data.titleFull;
  });
})