开发那点事（五）vue开发移动端app案例

开发背景
公司需要开发一款移动端的app,奈何团队没有ios技术，工期比较短，所以选择使用vue开发HTML5经过打包处理形成移动端app。
项目构思
1 项目整体使用Vue+HbuilderX开发
2 Vue实现基本页面跳转，增删改查等app基本功能，当需要使用到app原生功能则使用mui.js
3 最后通过HbuilderX将vue项目打包成app包
开发实践
1 运行打包app
这一步的步骤比较简单，首先通过npm run build 命令打包vue项目，下面是vue打包配置
config/index.js

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../demo/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../demo'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: false, // 置为false  减少项目体积
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../page/Login'
import Scroller from '../page/Scroller'
Vue.use(Router)

export default new Router({
  base: 'demo',
  // mode: 'history',   不能为history模式  否则白屏
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Scroller',
      name: 'Scroller',
      component: Scroller
    }
  ]
})

打包完成之后，打开HbuilderX新建项目选5+App类型,新建完成之后，删除项目中除mainfest.json以外的所有文件，将vue项目打包后的文件打包过来，如图
在这里插入图片描述
就能成功运行在手机上

2 引用mui.js
将mui.js导入至vue项目中，在index.html中引用该js ，并在vue文件里测试plus对象的方法，成功调用。

3 vue+mui.js实现再按一次退出功能
这里不多说，直接上干货，哪个页面需要再按一次退出功能直接引用该方法在create方法中调用即可

function hiddenGoback() {

  // html5禁止返回上一页
  history.pushState(null, null, document.URL);
  window.addEventListener("popstate", function () {
    history.pushState(null, null, document.URL);
  });
  // muijs设置再按一次退出
  mui.init(
    {
      keyEventBind: {
        backbutton: true
      }
    }
  );
  let first = null;
  mui.back = function () {
    //判断需要退出的页面
    if (window.location.toString().endsWith('Home') || window.location.toString().endsWith('#/') || window.location.toString().endsWith('Login')) {
      //首次按键，提示‘再按一次退出应用’
      if (!first) {
        first = new Date().getTime();
        mui.toast('再按一次退出');
        setTimeout(function () {
          first = null;
        }, 1000);
      } else {
        if (new Date().getTime() - first < 1000) {
          plus.runtime.quit();
        }
      }
      return false;
    }
  }
}

开发那点事（五）vue开发移动端app案例

猜你喜欢