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，兼容性的問題沒有測試
• 代碼
• 第一次寫博客，好緊張