MUI 视频教程

MUI 介绍、新项目创建、基础布局

MUI 为何诞生

1、性能和体验的差距,一直是 mobile app 开发者放弃 HTML5 的首要原因。
2、浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题,这些都让 HTML5 开发者倍感挫败,尤其在 Android 低端机运行。
3、浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的 ui 框架但性能低下。mui 框架有效的解决了这些问题,这是一个可以方便开发出高性能 App 的框架,也是目前最接近原生 App 效果的框架。

MUI 的定位是:最接近原生体验的移动 App 的 UI 框架

基于 mui 的定位,产生了 mui 的几个特点,轻、小、只涉及 UI、只为移动 App 而生、界面风格原生话。

1、mui 不是 jq,不封装 dom 操作

与 ui 无关的 mui 不做,可以用 jq 或 zepto 就用,并不冲突。
但并不建议在 移动 App 里引入 jq 或 zepto 这些框架,原因如下:
为了性能,层层封装的框架,尤其是遍历 dom 时,影响效率,尤其在低端 Android 手机上。

原生 JS 挺简单,为何需要 jq ?

手机上只有 webkit 浏览器(忽略 wp,反正 mui 不支持 wp),根本就不需要 jq 这种封装来操作 dom。
而且 HBuilder 提供了代码块来简化开发,敲 dg、dq,直接生成 document.getElementById(“”)、document.querySelectorAll(“”),非常快捷方便,而且执行性能非常高,而且没有浏览器兼容问题。

2、mui、HTML5+、5+ Runtime 的关系说明

mui 是一个前端框架,HTML5+ 是一套 HTML5 能力扩展规范,HTML5+ Runtime 是实现 HTML5+ 规范的强化浏览器引擎。

开始体验 MUI

1、安装新版本 HBuilder

HBuilder

2、新建 app 项目

创建 MUI 项目

基础布局

头部

核心 css mui-bar mui-bar-nav

1
2
3
4
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">test</h1>
</header>

主体部分

核心 css mui-content

1
2
3
<div class="mui-content">
test...
</div>

代码效果

组件

折叠面板

1
2
3
4
5
6
7
8
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
</ul>

代码效果

常用按钮

1
2
3
4
5
6
<button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button>

代码效果

操作表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="mui-content">
<button type="button" class="mui-btn" onclick="handleClick()">操作表</button>
</div>
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
<!-- 可选择菜单 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">菜单1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">菜单2</a>
</li>
</ul>
<!-- 取消菜单 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#sheet1"><b>取消</b></a>
</li>
</ul>
</div>
<script>
mui.init();
mui.plusReady(function () {});
function handleClick() {
mui("#sheet1").popover("toggle");
}
</script>

代码效果

数字角标

1
2
3
4
5
6
7
8
9
10
11
12
<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>
<span class="mui-badge mui-badge-inverted">1</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>

代码效果

单选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div class="mui-content">
<div class="mui-input-row mui-radio">
<label>radio</label>
<input name="radio2" type="radio" />
</div>
<div class="mui-input-row mui-radio">
<label>radio</label>
<input name="radio2" type="radio" />
</div>
<div class="mui-input-row mui-radio mui-left">
<label>面条</label>
<input class="radio1" name="radio1" type="radio" value="面条" />
</div>
<div class="mui-input-row mui-radio mui-left">
<label>包子</label>
<input
class="radio1"
name="radio1"
type="radio"
value="包子"
checked="checked"
/>
</div>
<ul class="mui-table-view mui-table-view-radio">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell mui-selected">
<a class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 3</a>
</li>
</ul>
<button type="button" class="mui-btn" onclick="getVals()">获取值</button>
</div>
<script>
mui.init();
mui.plusReady(function () {});
function getVals() {
let res = getRadioRes("radio1");
if (res == null) {
mui.toast("请选择");
return;
}
mui.toast(res, { duration: "long", type: "div" });
}
function getRadioRes(className) {
let rdsObj = document.getElementsByClassName(className);
let checkVal = null;
for (let i = 0; i < rdsObj.length; i++) {
if (rdsObj[i].checked) {
checkVal = rdsObj[i].value;
}
}
return checkVal;
}
</script>

代码效果

复选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="mui-content">
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox左侧显示示例</label>
<input name="checkbox1" class="checkbox1" value="Item 1" type="checkbox" />
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox左侧显示示例</label>
<input name="checkbox1" class="checkbox1" value="Item 2" type="checkbox" />
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox左侧显示示例</label>
<input
name="checkbox1"
class="checkbox1"
value="Item 3"
type="checkbox"
checked="checked"
/>
</div>
<button type="button" class="mui-btn" onclick="getVals()">获取值</button>
</div>
<script>
mui.init();
mui.plusReady(function () {});
function getVals() {
let res = getRadioRes("checkbox1");
if (res.length == 0) {
mui.toast("请选择");
return;
}
mui.toast(res, { duration: "long", type: "div" });
}
function getRadioRes(className) {
let rdsObj = document.getElementsByClassName(className);
let checkVal = [];
for (let i = 0; i < rdsObj.length; i++) {
if (rdsObj[i].checked) {
checkVal.push(rdsObj[i].value);
}
}
return checkVal;
}
</script>

代码效果

系统日期选择框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<button type="button" class="mui-btn" onclick="pickDate()">获取日期</button>
<script>
function pickDate() {
let dDate = new Date();
// 设置当前日期(不设置默认当前日期)
dDate.setFullYear(2016, 7, 16);

let minDate = new Date()
// 最小时间
minDate.setFullYear(2010, 1, 1);
let maxDate = new Date();
// 最大时间
maxDate.setFullYear(2020, 11, 31);
plus.nativeUI.pickDate(
function(e) {
let d = e.date;
mui.toast('您选择的日期是:' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate());
},
function(e) {
mui.toast('你没有选择日期');
}, {
title: '请选择日期',
date: dDate,
minDate: minDate,
maxDate: maxDate
})
}
</script>

代码效果

系统时间选择框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button type="button" class="mui-btn" onclick="pickTime()">获取时间</button>
<script>
function pickTime(){
var myDate = new Date();
var h = myDate.getHours();
var min = myDate.getMinutes();
var dTime = new Date();
dTime.setHours(h,min);
plus.nativeUI.pickTime(function(e){
var d = e.date;
mui.toast('您选择的时间是' + d.getHours() + ":" + d.getMinutes());
},function(e){
mui.toast('您没有选择时间')
},{
title:'请选择时间',
is24Hour: true,
time:dTime
})
}
</script>

代码效果

对话框

警告框

1
2
3
4
5
6
7
8
<button type="button" class="mui-btn" onclick="alert()">警告框</button>
<script>
function alert() {
mui.alert('请不要随便点击', '警告消息', '确定', function() {
mui.toast('提示对话框上关闭后的回调函数');
})
}
</script>

确认框

1
2
3
4
5
6
7
8
9
10
11
12
<button type="button" class="mui-btn" onclick="confirm()">确认框</button>
<script>
function confirm() {
mui.confirm('MUI 是个好框架?', 'Hello MUI', new Array('否', '是'), function(e) {
if (e.index == 1) {
mui.toast('感谢您的支持')
} else {
mui.toast('MUI 没有得到你的认可,继续加油!');
}
})
}
</script>

输入对话框

1
2
3
4
5
6
7
8
9
10
11
12
<button type="button" class="mui-btn" onclick="prompt()">输入对话框</button>
<script>
function prompt() {
mui.prompt('请输入您对 MUI 的评语', '性能好', 'Hello MUI', new Array('取消', '确认'), function(e) {
if(e.index == 1){
mui.toast(e.value);
}else{
mui.toast('您取消了输入');
}
});
}
</script>

消息提示框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<button type="button" class="mui-btn" onclick="shorttoast()">短的消息提示框</button>
<button type="button" class="mui-btn" onclick="longtoast()">长的消息提示框</button>

<script>
function shorttoast(){
mui.toast('short 消息提示框',{
"duration" : "short"
})
}

function longtoast(){
mui.toast('long 消息提示框',{
"duration" : "long"
})
}
</script>

表单元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" placeholder="请输入用户名">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" class="mui-input-password" placeholder="请输入密码">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-primary" >确认</button>
<button type="button" class="mui-btn mui-btn-danger" >取消</button>
</div>
</form>

表单

初始化

mui 在 mui.int() 中会自动初始化基本控件,但是动态添加的元素需要重新进行初始化

1
mui('.mui-input-row input').input();

轮播组件

连接模拟器

连接模拟器需要用到 ADB 。

1
2
3
4
5
// 连接模拟器端口
adb connect 127.0.0.1:62001

// 查看连接设备
adb devices

也可以通过 修改 HBuilder 运行配置 Android 模拟器端口 来实现连接。

注意:引入顺序。mui.min.js 需要在 demo渲染前 加载。如果在 demo 渲染后加载会莫名报错

1
2
3
4
5
6
7
8
9
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
</head>

以上是我对下列视频及文章的归纳和总结。
MUI 视频教程


相关资料
HBuilder X 中使用模拟器进行 App 开发
ADB 常用命令及其用法大全
如何查看夜神模拟器的端口
DCloud appid 用途/作用/使用说明
Android 平台签名证书(.keystore)生成指南
Android 平台本地(离线)打包指南 - Android Studio
Android 平台云端打包证书使用说明
manifest.json 文档说明
MUI – plus初始化原理及plus is not defined,mui is not defined 错误汇总
Hbuilderx真机运行失败,失败原因:手机上没有信任本计算机的授权,请在手机上信任该

《Android App开发从入门到精通》

第1章 Android Studio的介绍以及使用

探索Android Studio

基于Gradle的灵活构建系统。• 快速且功能丰富的模拟器。• 可针对所有Android设备进行开发的统一环境。• Instant Run,可将变更推送到正在运行的应用,无须构建新的APK。• 帮助构建应用程序和导入示例代码以及GitHub集成。• 丰富的测试工具和框架。• 可捕捉性能、易用性、版本兼容性以及其他问题的Lint工具。• C++和NDK支持。• 内置对Google云端平台的支持,可轻松集成Google Cloud Messaging和App引擎。

书中案例源码下载
https://github.com/ansen666/book_source_code

Android 从入门到实践开发

P1 Android 开发概述和开发工具

Android 开发概述

Android 是一个开源的,基于Linux的移动设备操作系统,主要使用于移动设备,如智能手机和平板电脑。
Android 是由 Google 及其他公司带领的开放手机联盟开发的操作系统。

Android 编程是基于 Java 编程语言的,因此,如果你理解 Java 编程,这将利于你更好的学习 Android 应用程序开发。

Android官网
学习 Java

Android 开发是移动应用开发的表现形式之一。

Android、iOS、H5 App、Native + H5、RN、Ionic、MUI…

项目流程
完整项目最精简流程

Android 开发工具

  • 下载安装 Java JDK
  • 下载安装 Android Studio
阅读更多
You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.