开发那点事(五)vue开发移动端app案例

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

开发那点事(五)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; }  }}
源文地址:https://www.guoxiongfei.cn/csdn/1547.html
0