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）
getOpenerEventChannel 传参

使用 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' }
      });
    }

4. getOpenerEventChannel 传参

组件a给B传

uni.navigateTo({
url: ‘/pages/PageB/PageB’,
events: {
// 事件回调函数
acceptDataFromOpenerPage: function(data) {
console.log(data)
}，

ok: function(res) {
if(options.ok) options.ok(res.data);
},

},
success: function(res) {
// 通过eventChannel向被打开页面传递数据
res.eventChannel.emit(‘acceptDataFromOpenerPage’, { data: ‘test data from PageA’ })
}
})

在 PageB 中，通过 getOpenerEventChannel 获取事件通道，并监听从 PageA 传递的数据。

export default {
onLoad() {
const eventChannel = this.getOpenerEventChannel();

// eventChannel.emit(‘ok’, { data: data }); 这是触发event里面设置的事件回调函数，返回事件
eventChannel.on(‘acceptDataFromOpenerPage’, function(data) {
console.log(data); // { data: ‘test data from PageA’ } 这里是获取
});
}
}

uni.navigateTo：用于跳转到新页面，同时传递一个 events 对象，用于定义事件回调函数。

eventChannel.emit：在跳转成功后的 success 回调中，通过 eventChannel 发射事件，传递数据给新页面。

getOpenerEventChannel：在新页面中调用，获取事件通道，并通过 eventChannel.on 监听事件，接收数据。

uniapp跳转的几种方式

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

标签：uniapp

uniapp踩坑记录

uniapp跳转的几种方式