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

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

1. npm run build
2. 获得 dist 文件夹
3. 复制一份到新的文件夹下面 vue-mui-app
4. 使用HBuilder 打开该文件夹
5. 在项目上右键生成移动项目

   

6. 在本地运行，就能在手机上看到了

在项目中使用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 不会被定义的，须要判断该方法不执行

个人项目中遇到的问题

1. 在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)
				}
			}
		}
	}
}
复制代码

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

总结

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