vue项目中使用mui

前言

公司要实现一套web管理系统和一套员工运维系统，最开始的时候后台使用VUE搭建，因为运维app使用的都是内部人员，所以就使用mui来写了。
后来老大发现两端代码有部分重叠，就准备使用一套代码，然后我就开始了对vue项目的mui改造，主要是为了调用mui中提供的原生API

准备

vue搭建环境、HBuilder编辑器。（我不喜欢用Hbuilder写代码，在使用VScode）

搭建vue项目

使用的是vue-cli脚手架。

这个就不多BB了，之后对文件做了简单的调整。还是直接贴图吧

page 中放了三个vue文件，简单模拟了一下主页和附页
tools 中是存放一些功能js文件的地方在main.js 对 app.js 进行了引入
1. app.js 对一些公共方法在vue.prototype.$上进行了绑定
2. getImage.js 在手机中获取图片的方法

基本的页面准备工作完成

在项目中使用mui.js

首先修改config/index.js

assetsPublicPath: './'  // 之前是 '/' 改为 './'  使build之后的项目能在本地运行

productionSourceMap: false   // 删除打包之后生产的map文件，减少打包之后的大小

在index.html 引入mui.min.js
注意在body中引入，不要在body的下面。
之后就可以在项目中使用mui的一些方法了

mounted(){  
        console.log(mui)
    },

打印的结果

toast(){
            mui.toast('mui.toast')
        }

使用 mui.toast() 方法页面显示 (在web端运行结果不正常)

对项目打包生成app

（写完发现很墨迹，会的直接略过吧）

npm run build
得到 dist 文件夹
复制一份到新的文件夹下面 vue-mui-app
使用HBuilder 打开该文件夹
在项目上右键生成移动项目
在本地运行，就能在手机上看到了

在项目中使用plus

mounted(){
        mui.plusReady(()=>{
            console.log('plus加载完成')
            console.log(JSON.stringify(plus))
        })
    },
methods:{
        goBack(){
            this.$router.go(-1)
        },
        Photograph(){
            getImage(res=>{
                this.imgSrc = res
            })
        }
    }

其中的 Photograph() 是我之前项目封装的，利用plus方法，拍照或者在相册中选择，获取图片的base64，因为懒，然后就直接拿过来用了。

运行环境判断

如果项目运行在web和app两端（例如我自己的项目），需要对项目的运行环境做相应的判断。
代码封装在app.js 中。没有使用mui的，怕兼容性不好。

//判断是否是ios环境
function isIos() {
	if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
		return true
	} else {
		return false
	}
}

//判断是否是安卓环境
function isAndroid() {
	if (/Android/i.test(navigator.userAgent)) {
		return true
	} else {
		return false
	}
}

利用判断可以在web项目中不执行或者隐藏一些按钮或者功能
在web项目中 plus 不会被定义的，需要判断该方法不执行

我的项目中遇到的问题

在app端，项目被设计为第一个页面为登录，登录之后为首页，那么在主页的时候点击安卓的物理返回键应该提示退出，不应该返回到登陆页面。

解决想法：在 router 为主页的时候（demo里面是first）。修改mui.back 为再按退出，其他的页面使用vm.$router.go(-1)

watch:{
	$route:{
		deep: true,
		immediate:true,
		handler:function(value){
			let vm = this
			if(value.path == '/first' || value.path == '/home'){
				var first = null;
				mui.back = function() {
					if (!first) {
						first = new Date().getTime();
						mui.toast('再按一次退出应用');
						setTimeout(function() {
							first = null;
						}, 1000);
					} else {
						if (new Date().getTime() - first < 1000) {
							plus.runtime.quit();
						}
					}
				}
			}else{
				mui.back = function(){
					vm.$router.go(-1)
				}
			}
		}
	}
}

项目刚建，以后遇到特别的问题再补充。

总结

之前一直在查阅大神写的东西，老能学习到一些东西
最近公司老大要把项目进行整合，然后就出现了vue + mui 的混合使用，在网上查阅了一下，没有什么完整的例子，在摸索着完成了项目基本构架之后，回头写了这篇博客，希望能对初学的人有一点帮助。
因为手上只有一台小米mix，兼容性的问题没有测试
代码
第一次写博客，好紧张