MUI、 HTML5+、 HBuilder 介绍

MUI 介绍

http://dev.dcloud.net.cn/mui/
MUI 是一个轻量级的前端框架。 MUI 以 iOS 平台 UI 为基础，补充部分 Android 平台特有的 UI 控件。 MUI 不依赖任何第三方 JS 库，压缩后的 JS 和 CSS 文件仅有 100+K 和 60+K，可以根据自己的需要，自定义去下载对应的模块。并且 MUI 编写的前端，可以打包成 APK 和 IPA 安装文件，在手机端运行。也就是，编写一套代码，就可以在 Android、IOS 下运行。
API 地址： http://dev.dcloud.net.cn/mui/ui/

H5+

H5+提供了对 HTML5 的增强，提供了 40WAPI 给程序员使用。使用 H5+ API 可以轻松开发二维码扫描、摄像头、地图位置、消息推送等功能
API 地址： http://www.html5plus.org/doc/zh_cn/accelerometer.html#

Android/IOS 的安装包。
http://www.dcloud.io/

MUI 前端开发.

创建项目/页面/添加 MUI 元素

创建 MUI 移动 App 项目

页面创建，添加组件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8"> mui.init(); </script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">登录页面</h1>
		</header>
		<div class="mui-content">
			<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-royal">确认</button>
					<button type="button" class="mui-btn mui-btn-danger">取消</button>
				</div>
			</form>
		</div>
	</body>

</html>

获取页面元素/添加点击事件

获取页面元素

mui.plusReady(function() {
				var username = document.getElementById("username");
				var password = document.getElementById("password");
				var confirm = document.getElementById("confirm");
				
				mui(".mui-button-row").on('tap', '.mui-btn', function() {
					alert("按下按钮")
				})

				alert(username.value);
			});

批量绑定页面元素的点击事件

mui(".mui-button-row").on('tap', '.mui-btn', function() {
					alert("按下按钮")
				})

使用原生 JS 的事件绑定方式

// 绑定事件
confirm.addEventListener("tap", function() {
	alert("按下按钮");
});

发起 ajax 请求

前端

当我们点击确认按钮的时候，将用户名和密码发送给后端服务器

//发送ajax请求
mui.ajax('http://192.168.1.103:9000/login', {
	data: {
		username: username.value ,
		password: password.value
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 10000, //超时时间设置为10秒；
	headers: {
		'Content-Type': 'application/json'
	},
	success: function(data) {
		//可以使用console.log打印数据，一般用于调试
		console.log(data)
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

后端

基于 SpringBoot 编写一个 web 应用，主要是用于接收 ajax 请求，响应一些数据到前端

新建一个springboot项目，导入相关依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>cn.xzzz2020</groupId>
    <artifactId>demo_1</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.5.RELEASE</version>
    </parent>


    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
        </dependency>
    </dependencies>

</project>

编写一个controller与app进行响应

@RestController
public class LoginController {

    @RequestMapping("login")
    public Map login(@RequestBody User user){
        System.out.println(user);
        Map<String, Object> map = new HashMap<String, Object>();
        if ("tom".equals(user.getUsername()) && "123".equals(user.getPassword())){
            map.put("success",true);
            map.put("messqge","登陆成功");
        }else {
            map.put("success",false);
            map.put("messqge","登陆失败，请检查用户名和密码是否正确");
        }
        return map;
    }
}

编写pojo实体类User

@Data
public class User {
    private String username;
    private String password;
}

响应结果：

字符串转 JSON 对象以及 JSON 对象转字符串

将 JSON 对象转换为字符串

// 使用JSON.stringify可以将JSON对象转换为String字符串
console.log(JSON.stringify(data));

将字符串转换为 JSON 对象

var jsonObj = JSON.parse(jsonStr)

页面跳转

if(data.success) {//如果登录成功
	//打开关于页面
	mui.openWindow({
		url: 'login_success.html',
		id: 'login_success.html'
	});
} else {
	//打开关于页面
	mui.openWindow({
		url: 'login_failed.html',
		id: 'login_failed.html'
	});

}

App 客户端缓存操作

大量的 App 很多时候都需要将服务器端响应的数据缓存到手机 App 本地。.

在 App 中缓存的数据，就是以 key-value 键值对来存放的。

将数据放入到本地缓存中

var user = {
	username: username.value,
	password: password.value
}
//将对象数据放到缓存中，需要转换成字符串
plus.storage.setItem("user",JSON.stringify(user))

从本地缓存中读取数据，并显示到页面上

mui.plusReady(function(){
	//从本地缓存中获取数据
	var userStr =  plus.storage.getItem("user");
	var user = JSON.parse(userStr);
	var username = document.getElementById("username");
	username.innerHTML = user.username;
})

测试

Netty网络编程--MUI基础

目录