阅读 1417

vue项目中使用mui

前言

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

准备

vue搭建环境、HBuilder编辑器。(我不喜欢用Hbuilder写代码,在使用VScode)

搭建vue项目

   使用的是vue-cli脚手架。

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

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

基本的页面准备工作完成

在项目中使用mui.js

  • 首先修改config/index.js
    avatar
assetsPublicPath: './'  // 之前是 '/' 改为 './'  使build之后的项目能在本地运行

productionSourceMap: false   // 删除打包之后生产的map文件,减少打包之后的大小
复制代码

acatar

  • 在index.html 引入mui.min.js
  • 注意在body中引入,不要在body的下面。
  • 之后就可以在项目中使用mui的一些方法了
mounted(){  
        console.log(mui)
    },
复制代码
  • 打印的结果
    acatar
toast(){
            mui.toast('mui.toast')
        }
复制代码
  • 使用 mui.toast() 方法 页面显示 (在web端运行结果不正常)
    acatar

对项目打包生成app

(写完发现很墨迹,会的直接略过吧)

  1. npm run build
  2. 得到 dist 文件夹
  3. 复制一份到新的文件夹下面 vue-mui-app
  4. 使用HBuilder 打开该文件夹
  5. 在项目上右键生成移动项目
    acatar
  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)
				}
			}
		}
	}
}
复制代码
  1. 项目刚建,以后遇到特别的问题再补充。

总结

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