uniapp踩坑小伎俩记录

  1. 页面路径和文件名大小写问题

    // 假设你有一个页面路径是 '/pages/Home/index'
    this.$router.push('/pages/home/index'); // 小写的 'home' 会导致找不到页面

  2. 小程序平台差异

    // 微信小程序中使用
    uni.getSystemInfo({
    success: (res) => {
    console.log(res);
    }
    });
    // 支付宝小程序中使用
    if (uni.getSystemInfoSync().platform === 'devtools') {
    // 特殊处理支付宝小程序
    }

3.uniapp跨页面传值

  • 使用 URL 参数传值
  • 使用全局状态管理(Vuex)
  • 全局对象传值
  • 本地存储传值
  • 使用事件总线(Event Bus)
  1. 使用 URL 参数传值

    uni.navigateTo({
    url: '/pages/detail/detail?id=123&name=Alice'
    });
    //接受页面
    onLoad(options) {
    const { id, name } = options;
    console.log(id, name); // 输出: 123 'Alice'
    }

  2. 全局对象传值 ( 可以使用全局对象 getApp() 或全局变量。 )

const app = getApp();

app.globalData.userInfo = { id: 123, name: 'Alice' };

uni.navigateTo({

url: '/pages/detail/detail'

});

// 接受页

onLoad() {

const app = getApp();

const userInfo = app.globalData.userInfo;

console.log(userInfo); // 输出: { id: 123, name: 'Alice' }

}

  1. 本地存储传值 ( 适用于需要跨页面、甚至跨应用会话的数据传递。 )

    uni.setStorageSync('userInfo', { id: 123, name: 'Alice' });

    uni.navigateTo({
    url: '/pages/detail/detail'
    });
    //接受页面
    onLoad() {
    const userInfo = uni.getStorageSync('userInfo');
    console.log(userInfo); // 输出: { id: 123, name: 'Alice' }
    }

  2. bus传值

    // eventBus.js
    import Vue from 'vue';
    export default new Vue();

    复制代码
     **传值页面:**
    
     ```javascript
     import eventBus from '@/eventBus';
     eventBus.$emit('sendUserInfo', { id: 123, name: 'Alice' });
     uni.navigateTo({
       url: '/pages/detail/detail'
     });
     ```
    
     **接收值页面:**
    
     ```javascript
     import eventBus from '@/eventBus';
    
     onLoad() {
       eventBus.$on('sendUserInfo', (userInfo) => {
         console.log(userInfo); // 输出: { id: 123, name: 'Alice' }
       });
     }

uniapp跳转的几种方式

  1. uni.navigateTo:保留当前页面,跳转到应用内的某个页面,使用 `uni.navigateBack` 可以返回到原页面。 "`javascript uni.navigateTo({ url: '/pages/detail/detail?id=123&name=Alice' });

  2. uni.redirectTo:关闭当前页面,跳转到应用内的某个页面。 "`javascript uni.redirectTo({ url: '/pages/detail/detail?id=123&name=Alice' });

  3. uni.switchTab:跳转到 `tabBar` 页面,并关闭其他所有非 tabBar页面。 uni.switchTab({ url: '/pages/tabbar/index' });

  4. uni.reLaunch:关闭所有页面,打开到应用内的某个页面。 javascript uni.reLaunch({ url: '/pages/detail/detail?id=123&name=Alice' });

  5. uni.navigateBack:关闭当前页面,返回上一页面或多级页面。 `javascript uni.navigateBack({ delta: 1 // 返回一级页面 }); `

相关推荐
aesthetician18 分钟前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
2501_915918412 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手3 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng4 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科4 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20164 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
2501_915909065 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师6 小时前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
90后的晨仔7 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
EndingCoder7 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js