Apa itu html5 mui-Soal Jawab bahagian hadapan-php.cn

Apa itu html5 mui

青灯夜游

Lepaskan： 2022-06-02 14:27:25

asal

2800 orang telah melayarinya

mui ialah rangka kerja UI bahagian hadapan sumber terbuka berdasarkan spesifikasi HTML5 Ia mengambil kesempatan daripada keupayaan asli sambungan HTML5 untuk menyelesaikan masalah prestasi dan merentas platform bagi kawalan UI biasa sekali dan kemudian terbitkannya sebagai HTML5 iOS dan Apl Android juga boleh diterbitkan ke penyemak imbas mudah alih pada masa yang sama.

Apa itu html5 mui

Persekitaran pengendalian tutorial ini: sistem Windows 7, HTML5 && mui versi 3.7.2, komputer Dell G3.

Rangka kerja MUI HTML5

Rangka kerja gaya yang sepadan dengan HTML5

rangka kerja mui ialah An open sumber rangka kerja UI bahagian hadapan berdasarkan spesifikasi HTML5, yang memanfaatkan keupayaan asli sambungan HTML5 untuk menyelesaikan isu prestasi dan merentas platform kawalan UI biasa.

Reka bentuk komponen UI dalam MUI adalah berdasarkan iOS 7, ditambah dengan beberapa kawalan khusus Android. Rangka kerja MUI secara berkesan menyelesaikan beberapa masalah rangka kerja asal dan boleh membangunkan apl berprestasi tinggi dengan mudah.

Pada masa yang sama, mui juga boleh menyesuaikan secara automatik kepada penyemak imbas biasa tanpa persekitaran HTML5 dan mengurangkannya kepada apl web biasa Ini membolehkan pembangun menggunakan mui untuk membangunkan sekali dan menerbitkannya sebagai apl iOS dan Android HTML5 pada masa yang sama ke penyemak imbas mudah alih.

MUI diletakkan sebagai: rangka kerja UI untuk apl mudah alih yang paling hampir dengan pengalaman asli. Kedudukan inilah yang menimbulkan beberapa ciri MUI: ringan, kecil, hanya melibatkan UI, hanya dilahirkan untuk aplikasi mudah alih dan gaya antara muka asli. MUI berbeza daripada jQuery kerana ia tidak merangkum operasi DOM dan tidak melakukan apa-apa yang tidak berkaitan dengan UI.

laman web rasmi mui:

https://dev.dcloud.net.cn/mui/

Keseluruhan susun atur halaman MUI

Bina reka letak keseluruhan halaman, bar navigasi atas dan bawah ditetapkan dan kandungan khusus diletakkan dalam

Di dalam bekas

Semasa menyemak imbas kandungan, bar navigasi dibetulkan dan hanya bahagian utama kandungan yang berubah

Apa itu html5 mui

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-close mui-pull-right"></a>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">标题</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">Apa itu html5 mui</span>
			</a>
		</nav>
		<div class="mui-content">
			//主体内容
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>

Salin selepas log masuk

Kaedah dan objek terbina dalam

kaedah mui(): setara dengan kaedah $() jQuery, menggunakan pemilih css untuk mendapatkan objek HTML dan mengembalikan susunan objek mui
Tukar objek mui kepada objek DOM:
var obj1 = mui('#title'); //miu object
var obj2 = obj[0]; >
kaedah setiap( ): bersamaan dengan kaedah each() jQuery, melaksanakan operasi traversal
kaedah init(): Rangka kerja MUI menumpukan banyak konfigurasi fungsi dalam kaedah mui.init() Untuk menggunakan fungsi tertentu, anda hanya perlu melengkapkan konfigurasi parameter yang sepadan dalam kaedah mui.init() Pada masa ini, fungsi yang disokong dalam kaedah mui.init termasuk:
Buat subhalaman, tutup halaman, konfigurasi acara gerak isyarat, pratetap Memuatkan, tarik-turun untuk muat semula, tarik-turun untuk memuatkan, tetapkan warna latar belakang bar status sistem
kaedah tatalKe(): tatal skrin tetingkap ke kedudukan yang ditentukan
mui.scrollTo(ypos[ ,duration][,handler])
objek mui.os: digunakan untuk menentukan persekitaran berjalan semasa
mui.os.plus: sama ada ia berjalan dalam pangkalan 5
mui.os .android , mui.os.ios, mui.os.ipad, mui.os.iphone adalah serupa dengan

Pengurusan acara

1 . ketik acara: Klik pencetus

element.addEventListener(&#39;tap&#39;,function(){
        //点击响应逻辑
 },false);

Salin selepas log masuk

2 Pengikatan acara: mui(selecto1).

on(acara,selector2,pengendali);

acara ialah Rentetan. jenis, mewakili Nama acara yang akan dipantau, seperti "ketik", pengendali ialah fungsi panggil balik apabila peristiwa dicetuskan, pemilih1 dan pemilih2 ialah kedua-dua pemilih, tetapi pemilih2 mestilah pemilih keturunan di bawah objek elemen HTML yang diwakili oleh selector1

3 , pembatalan acara: batalkan acara terikat

mui(selector).off()//取消selector所有事件
mui(selector1).off(event,selector2)//取消作用于selector2的所有事件
mui(selector1).off(event,selector2，handler)//取消作用于selector2的特定事件

Salin selepas log masuk

4. pencetus peristiwa: secara dinamik mencetuskan peristiwa mui elemen DOM tertentu.

cetus(elemen , peristiwa, data);

5. Peristiwa gerak isyarat: Memperkenalkan kaedah ekspresi gerak isyarat yang biasa digunakan

窗口管理

HTML5+初始化： mui.plusReady(function(){ … });
打开新窗口：mui.openWindow(参数配置对象);
关闭窗口：MUI框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是:当前Webview为预加载页面，则hide当前Webview；否则，close当前Webview，共有三种方法实现
- 点击class属性中包含"mui-action-back"的控件
- 在屏幕内快速向右滑动：mui.init({swipeBack:true//启用右滑关闭功能})
- Android自动监听back键：

mui.init({
	keyEventBind:{
		backbutton:true//启用右滑关闭功能}
		});

Salin selepas log masuk

预加载：提前创建窗口，在跳转时之间得到窗口，减少加载的过程

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,//页面路径
      id:preload-page-id,//Webview的id
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }
  ],
  preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});

Salin selepas log masuk

子页面：多个窗口合成一个，方便实现局部滚动功能

mui.init({
    subpages:[{
      url:&#39;list.html&#39;,
      id:&#39;list.html&#39;,
      styles:{
        top:&#39;45px&#39;,//mui标题栏默认高度为45px；
        bottom:&#39;45px&#39;//默认为0px，可不定义；
      }
    }]
  });

Salin selepas log masuk