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’ }

  }

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

  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' }
  }
  

  3. 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 // 返回一级页面 }); `