uniapp weex模式开发app踩坑记录——已解决

前言

uniapp是一个非常流行的前端开发框架，它允许开发人员使用一套代码开发出iOS、Android、H5和小程序应用。uniapp还提供了一个weex模式，允许开发人员使用Weex框架开发跨平台应用。

踩坑记录

在使用uniapp weex模式开发app时，我遇到了以下几个踩坑问题：

1. 底部被截断

   在从页面A跳转到页面B后，页面B的底部会被截断，正好是底部虚拟按钮的高度。同时，页面B还会显示页面A的底部。

2. 显示页面A的底部

   在从页面A跳转到页面B后，页面B的底部会显示页面A的底部。

解决方案

针对以上踩坑问题，我找到了以下解决方案：

1. 禁用动画

   uniapp.navigateTo有默认动画，禁用动画后，页面跳转就不会出现底部被截断、显示页面A的底部等问题。

   禁用动画的方法是在navigateTo方法中设置animation参数为false，例如：

   uni.navigateTo({
     url: '/pages/b',
     animation: false
   })
   

2. 使用getCurrentRoute

   使用getCurrentRoute方法可以获取当前页面的路径，然后可以使用这个路径来判断当前页面是否为页面A。如果是页面A，则在跳转到页面B时禁用动画。

   const currentPage = uni.getCurrentRoute()
   
   if (currentPage.path === '/pages/a') {
     uni.navigateTo({
       url: '/pages/b',
       animation: false
     })
   }
   

最终解决方案

经过上述尝试，最终确定了解决方案为：

1. 新建一个页面，命名为PageTransition，代码如下：

export default {
  methods: {
    navigateToB() {
      uni.navigateTo({
        url: '/pages/b',
        animation: false
      })
    }
  }
}

2. 在页面A中，使用uni.navigateTo方法跳转到PageTransition页面，代码如下：

uni.navigateTo({
  url: '/pages/page-transition'
})

3. 在PageTransition页面中，使用uni.navigateTo方法跳转到页面B，代码如下：

this.navigateToB()

这样就可以实现从页面A跳转到页面B时，页面B不会出现底部被截断、显示页面A的底部等问题。

总结

本文介绍了使用uniapp weex模式开发app时遇到的踩坑问题以及解决方案，包括底部被截断、显示页面A的底部等问题，并提供了禁用动画、使用getCurrentRoute等解决方法。希望本文能帮助到其他使用uniapp weex模式开发app的开发人员。