Realize a local culture teaching system based on mui and php

1. Introduction to mui

The definition of mui's official website is : a high-performance front-end framework that is closest to the native APP experience.
The gap between performance and experience has always troubled developers to use HTML5 to develop mobile terminals. On the one hand, the browser’s natural blank screen when cutting pages, unbearable page-turning animations, jittering floating elements, and inability to pull down to refresh smoothly, etc. On the other hand, the browser’s default control styles are few and ugly, making a beautiful The controls are very cumbersome, and there are some ui frameworks that make simple ones but have low performance.
The mui framework effectively solves these problems. It can develop APP very conveniently and quickly. It is also the framework closest to the original App effect at present. Compared with iOS/Android and other developments, it is very easy to get started.
mui provides many UI components, such as folding panels, image carousels, buttons, etc., which can be easily developed using components. See mui official documentation for details .

2.mui realizes the bottom navigation bar

2.1 Achievement effect

Click which tab, the corresponding tab will be activated, and the rest will become inactive, and switch to the corresponding page.

2.2 Implementation code

• html part

The bottom tab bar code of mui, you can customize the icon and text of the tab.

<nav class="mui-bar mui-bar-tab" style="height:53px;">
    <a class="mui-tab-item mui-active">
        <span class="mui-icon iconfont icon-iconindexsel" style="font-size:32px;margin-left: -9px;"></span>
        <span class="mui-tab-label" style="font-size:10px;margin-bottom: 1px;">首页</span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon iconfont icon-compass-discover-fill" style="font-size:32px;margin-left: -9px;"></span>
        <span class="mui-tab-label" style="font-size:10px;margin-bottom: 1px;">发现</span>
    </a>
    <a class="mui-tab-item">
       <img id="study_icon" src="images/study-grey.png" width="40px">
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon iconfont icon-discoveryfill" style="font-size:30px;margin-left: -6px;"></span>
        <span class="mui-tab-label" style="font-size:10px;margin-bottom: 1px;">活动</span>
    </a>
	<a class="mui-tab-item">
	    <span class="mui-icon iconfont icon-muying" style="font-size:32px;margin-left: -7px;"></span>
	    <span class="mui-tab-label" style="font-size:10px;margin-bottom: 1px;">我的</span>
	</a>
</nav>

• js part

js controls page switching, and configures the pages corresponding to the bottom tabs where you need them, and put them in the html folder here

mui.init();
mui.plusReady(function(){
    
    
	var pages = ["html/index.html","html/discovery.html","html/study.html","html/activity.html","html/me.html"];
	var arr = document.getElementsByClassName("mui-tab-item")
	var styles = {
    
    
		top:"82px",//修改subview的显示范围
		bottom:"53px"
	}
	var pageArr = [];
	var slef = plus.webview.currentWebview();
	var icon=document.getElementById("study_icon");
	for(var i=0; i<arr.length; i++){
    
    
		// 有几个选项卡，需要创建几个子页面
		var page = plus.webview.create(pages[i],pages[i],styles);
		pageArr.push(page);
		!function(i){
    
    
			arr[i].addEventListener("tap",function(){
    
    
				// 让当前页面(i)显示，不是当前页面隐藏
				for(var j=0; j<pageArr.length; j++){
    
    
					if(j!=i) pageArr[j].hide();
					else pageArr[j].show();
				}
				/* 让新创建的webview，追加合并到当前的窗口上。合并成一个窗口。
				 * 目的：将父子窗口合并成一个页面，实现同开同关的效果。 避免点击返回安监室，子页面先关闭，而父页面的头部和尾部没有关闭的BUG。
				 */
				slef.append(pageArr[i]);
				//根据页面来改变study图标
				if(i==2){
    
    
					icon.src="images/study.png";
				}else{
    
    
					icon.src="images/study-grey.png";
				}
				//根据页面来变化header
				if(i==3){
    
    
					normal.style.display="none";
					discovery.style.display="block";
					me.style.display="none";
				}
				else if(i==4){
    
    
					normal.style.display="none";
					discovery.style.display="none";
					me.style.display="block";
				}
				else{
    
    
					normal.style.display="block";
					discovery.style.display="none";
					me.style.display="none";
				}
			})
		}(i);
	}
	// 默认触发第0个选项卡的tap事件。
	mui.trigger(arr[0],"tap");
});

• css part

css code to control the bottom tab style

.mui-bar-tab .mui-tab-item.mui-active {
    
    	/*底部菜单栏点击颜色*/
    color: #39d5e3;
}
body{
    
    				/*调节底部菜单栏图标位置*/	
	line-height: 19px;
}
.mui-bar {
    
    		/*底部菜单栏和顶部栏颜色*/
    position: fixed;
    z-index: 10;
    right: 0;
    left: 0;
    height: 82px;/*修改上下导航栏的高度，但是实际显示的部分是没有被sunview遮住的部分*/
    padding-right: 10px;
    padding-left: 10px;
    border-bottom: 0;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,.85);
    box-shadow: 0 0 0px rgba(0,0,0,.85);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

3. Realization of local culture teaching system

3.1 Student mobile terminal

The mobile part is developed using the mui framework, mainly including homepage, discovery, learning, activities and other modules.

• front page

• Personal center module

• activity module

• discovery module

3.2 Back-end management system

The background management part is completed using fastadmin, which is a background development framework based on thinkphp and bootstrap.

• Log in

• Faculty Management and Student Management

It mainly manages the personal information of teachers and students, and can add, delete, modify and check personnel.

• Event Management Module

It is used to publish and manage activities, and the activities can be displayed on the mobile terminal after publishing.