开发背景
公司需要开发一款移动端的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;
}
}
}
