cordova-template-framework7-vue-webpack开发实战

[qppq54s]

在开始项目前，请安装Nodejs和cordova相关环境变量

创建项目

Template GitHub地址

执行以下代码

cordova create testApp com.qppq54s.testApp TestApp --template cordova-template-framework7-vue-webpack

完成后，你已经创建成功了一个基础App

Web端预览和开发

项目创建成功后，执行以下代码

cd testApp // 进入文件夹
npm install // 安装相关依赖
cordova platform add browser // 添加浏览器平台
cordova platfrom run browser -- --lr // Web端实时自动更新调试开发

创建登录页面

首先我们在 src\assets\vue\pages\ 下创建一个登录页面 login.vue,然后在routes.js添加路由控制代码

{
    path: '/login/',
    component: require('./assets/vue/pages/login.vue')
}

接下来我们想在用户打开App的时候做登录状态判断和页面跳转，将main.vue里组件内的url="/"更改为:url="url"，并且在下方的script标签内加入

export default {
        data() {
            return {
                url: "/"
            }
        },
        created() {
            var currentUser = localStorage.currentUser; // 通过localStorage存储用户信息
            if (currentUser) {
                // 跳转到首页
                this.url = "/";
            } else {
                // currentUser为空时，可打开登录
                this.url = "/login/";
            }
        },
    }

这样一来，就可以实现登陆状态的判断和跳转了。

Android下的返回键控制 backbutton

通常我们通过 document.addEventListener("backbutton", onBackKeyDown, false);控制Android手机上的返回键，但是让人比较疑惑的是，在这个项目里，我们把这段代码加到哪里比较好

我的做法是在main.vue的script标签内加入以下代码

mounted() {
  var self = this;
  var exitSure = false;
  document.addEventListener('backbutton', function () {
      var url = self.$f7.views.main.router.url;
      if (exitSure) {
          navigator.app.exitApp(); // 退出应用
      } else {
          if (url === '/' || url === '/login/') {
              exitSure = true;
              console.log('再按一次退出应用');
              setTimeout(function () {
                  exitSure = false;
              }, 2000)
          } else {
              self.$f7.views.main.router.back(); // 通过这段代码控制返回上一页
          }
      }
  }, false)
},