cordova-framework7-pushstate

起因

最近在开发一个 app, 技术栈是: cordova + framework7 + vue, 当把 APP (android 版) 放到真机上运行时发现: 返回键或者返回手势 (全面屏) 无法正常工作, 会直接退出 APP, 这个问题的解决思路有两个:

1. 绑定 backbutton 事件 - cordova docs
   但是注意: 该事件 ios 平台不支持
2. 启用 pushstate, 让 webview 的导航 (前进/后退) 功能生效

framework7 的作者推荐方法 1, 他说:

Guys i will advise you to DISABLE push state in cordova apps! Why do you need it there? Only to be able to go back with hardware back button on Android devices only? There is more flexible solutions for this using backbutton event:

$(document).on('backbutton', function (e) {
  e.preventDefault();
  // for example, based on what and where view you have
  mainView.router.back();
})

但是方法一存在兼容性问题, ios 不支持 backbutton 事件, 所以我更倾向于方法二, 只要设置 framework7 的 main view 的 pushState 属性为 true 就好了, 但是设置后发现 APP 在真机上会出现白屏问题

pushState=true 导致真机白屏问题

原因

原因是路由不匹配, 在真机上 webview 的地址是类似这样的串: file:///Users/something/someapp/www/index.html

解决方法

// template
<f7-view v-bind="viewParams"></f7-view>

// script
export default {
  data() {
    return {
      viewParams: {
        ...
        // pushState & pushStateRoot => 解决: "在真机上路由无法匹配,不显示任何内容" 的问题
        pushState: true,
        pushStateRoot: document.location.pathname.split('index.html')[0],
      }
    }
  }
}

{
  path: '/',
  component: Home,
  // 解决: "在真机上路由无法匹配,不显示任何内容" 的问题
  alias: '/index.html'
}

参考

cordova-phonegap-build-white-page-now