-
开发方式：
原生开发
HTML5 app（开发快，前段、web；BS架构；对系统\底层操控能力低）
混合方式（原生代码+网站）（本课堂使用方式：js html5 css+底层api） -
工具：HBuilder
-
https://www.dcloud.io/ncp.html 开放学习
-
文档：https://ask.dcloud.net.cn/docs/
-
注释快捷键：ctrl+shift+/
一、 项目类型
1. 普通项目：web项目，前端小网站
2. 小程序：开发小程序不仅仅微信的开发工具
3. uni-app：可以一对多端
4. Wap2App：将现有网站转换为APP
5. 5+APP：本课程。Android和IOS的APP、网站
- 5+APP：选择模板：mui项目（APP的舒服的界面）
二、项目管理器结构
关注：css、js
css：样式文件
js：代码文件（类似网站开发：集中，分开）
fonts：字体
index.html：首页面
manifest.json：配置
- 混合开发模式：使用成熟的web开发方式eg：JavaScrip、html5、css构建APP —> 将JavaScript当成代码，html5、css作为前端构建APP，系统编译时编译成原生APP（不关心底层，底层交给编译系统）
- 网页翻译到APP中是weberwell
三、mui介绍
1.程序结构
根标签：< html ></ html>
子标签：
- < head></ head>：引入资源、设置
- 页面适配手机屏幕的代码介绍：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
width=device-width：宽度为设备宽度
initial-scale=1：正常情况原比例
minimum-scale=1,最小比例为1
maximum-scale=1：最大比例为1
user-scalable=no：滑轮
- < body></ body>
2. 使用mui的必须操作：
两个引入+初始化
<script src="js/mui.min.js"></script> ：引入操作mui的框架 --
<link href="css/mui.min.css" rel="stylesheet"/> ：引入mui的样式
<script type="text/javascript" charset="utf-8">
mui.init(); ：初始化
</script>
mui的存放位置：
mui.js：开发版，格式良好便于阅读，可以修改
mui.min.js：一行到底，没有不必须的空格和换行。部署时候用（小）
3.怎么用mui：
（m开头的都是mui的模板）
<body>
/*标题：mh…*/
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">太原</h1>
</header>
/*主体：mBody*/
<div class="mui-content">
<input type="button" value="ceshi" />
<button type="button" class="mui-btn mui-btn-green">按钮</button> /*更好看*/
</div>
</body>
4.怎么调用api获取手机的参数（与app挂钩）
<script type="text/javascript" charset="utf-8">
mui.init();
/*加此句：与底层相关。中间层帮助代理调用底层（上层应用，中间代理层，底层：Android系统*/ /*中间层，插件层：plusready */
/*调用api时要确定代理组件是否正常运行----检测pulsready。首次运行必须检测*/
/*document.创建事件监听为plusready*/
document.addEventListener("plusready",function(){
/*访问底层代码：*/
var model=plus.device.model; /*查看模拟器信息 plus命名空间下:集成api:*/
alert(model);
},false)
</script>
打开模拟器
- 配置模拟器端口号：
工具–设置–运行配置–Android模拟器端口（夜神为62001）26944 - 运行：
1.运行–运行到手机或模拟器–
2.发行–原生APP-云打包==>给下载地址，下载APP（.apk）–拖入模拟器安装
应用mui最小代码+访问底层api：
<!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();
document.addEventListener("plusready",function(){
/*访问底层代码：*/
},false)
</script>
</head>
<body>
</body>
</html>
四、html5支持视频格式
- 标签：<video> </video> 、<audio> </audio>
视频格式：（支持html5即可）flash已经不用了
hls
canvas
1.新建项目，用web展示
新建目录，放入电影：
2.视频播放
<body>
/*路径，宽高，自动播放，控件（开始、全屏）*/
<video src="videos/蓝忘机.mp4" width="640" height="640" autoplay="autoplay" controls="controls"></video>
</body>
这种方式的缺陷：可以随意将视频另存为
videos标签更适合监控领域
3.路径：
- 绝对路径：物理路径。需要在目录下打开网页（绝对路径，虚拟路径172.0.0.1不可以跨域访问资源）
<video src="D:/HBuilder/APPProject/HTML5Test/videos/蓝忘机.mp4" width="640" height="640" autoplay="autoplay" controls="controls"></video>
- 相对路径：与index.html 在同一目录下的文件。如果不在同一文件夹下：
src="../videos/蓝忘机.mp4" 向上一级
src="../../videos/蓝忘机.mp4" 向上两级
在test.html所在位置打开浏览器即可
- 假设videos资源不动，html文件动：
从根目录查找
<video src="/videos/蓝忘机.mp4" width="640" height="640"
4.js操纵视频
<script>
function play(){//自定义函数
var v=document.getElementById("v");/*获得video标签*/
v.play(); //控件的函数
}
function pause(){
var v=document.getElementById("v");
v.pause();
}
</script>
5.js监听事件
<head>
<script>
/*js放在这里，创建监听事件*/
function test(){
var ss=document.getElementById("s");
alert(ss);
}
</script>
</head>
<body onload="test()"> //加载完成后触发事件
……
</body>
6、html5音频audio标签
<audio src="videos/Try.mp3" controls="controls" autoplay="autoplay"></audio>
7、制作点播列表
……
<body>
<div>
<select id="s" onchange="mp3Changed()">下拉列表
<option value="videos/try.mp3">001</option>
<option value="videos/try2.mp3">002</option>
</select>
</div>
<audio id="a" src="videos/Try.mp3" controls="controls" autoplay="autoplay"></audio>
<div>
<input type="button" value="play" onclick="playa()"
style="border-radius: 25px;height: 50px;width: 50px;"/>
<input type="button" value="pause" onclick="pausea()"
style="border-radius: 25px;height: 50px;width: 50px;"/>
</div>
</body>
</html>
<script>
function mp3Changed(){
var s=document.getElementById("s");
var index=s.selectedIndex;
var a=document.getElementById("a");
a.src=s.options[index].value;
}
<script>
五、canvas–画布（展示动画效果）
- 标签：<canvas></canvas>
- canvas必须使用JavaScript绘画
- 浏览器要支持html5（html5shiv.js可以解决ie低版本浏览器不支持html5的问题）
1.创建项目：web
2.canvas实例
https://www.softwhy.com/daima/canvas_code/
https://www.xuebuyuan.com/3216326.html
3.canvas绘画步骤
3.1. 创建canvas标签
做了css才能看见画布（不必要，教学需求）
<head>
<style>
canvas{border: 1px solid blue;}
</style>
<head>
3.2. 设置画布大小
canvas必须设宽高。没有大小没法绘画
方法一：（推荐）
<body>
<canvas width="100" height="100"></canvas>
</body>
方法二：（可能会扭曲变形）
<head>
<style>
canvas{border: 1px solid blue;width: 100px;height: 100px}
</style>
<head>
3.3 js获取canvas–id
必须使用JavaScript绘画–>访问canvas标签–>设id（方式不唯一）
3.4 获取canvas对象
3.5 绘图上下文
<script>
var cvs=document.getElementById("cvs");
var cxt=cvs.getContext("2d");//绘画上下文 2d:二维平面 3D:另外两种
</script>
- canvas的坐标系建立在canvas的左上角
- 学习网页坐标系
* 3.1-3.5完成后可以正式绘图
基础骨架：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
canvas{border: 1px solid blue;}
</style>
</head>
<body>
<canvas id="cvs" width="200px" height="200px"></canvas>
</body>
</html>
4.canvas函数
cxt.moveTo(0,0);
cxt.lineTo(100,100);
cxt.lineTo(x,y);
cxt.stroke()：stroke() 方法绘制当前路径。
cxt.strokeStyle="#0000FF"; //颜色
cxt.lineWidth=5;//粗细
//矩形
cxt.strokeRect(50,50,100,100);
//填充
cxt.fillStyle=“burlywood”;
//cxt.rect(10,10,100,100); //1
cxt.fillRect(10,10,50,50); //2
cxt.fill();
//弧和圆
cxt.beginPath(); //类似moveto
cxt.arc(100,100,50,0,Math.PI,true);//true
cxt.closePath(); //闭合
cxt.stroke();
var x=Math.random()*200;：产生随机数
setInterval函数：每隔一定时间执行一次
setTimeout函数：延时执行函数
clearInterval(id);
5. 基于canvas的动画–蝴蝶飞
原理：图片变化
png格式:白色背景透明
svg格式：记事本可读
<script>
var cvs=document.getElementById("cvs");
var cxt=cvs.getContext("2d");
var x=0;var y=0;
var fly1=new Image();
var fly2=new Image();
fly1.src="img/1.png";
fly2.src="img/2.png";
//蝴蝶飞
setInterval(function(){
cxt.clearRect(0,0,900,600);//清空原来的区域
//cvs.width=900;cvs.height=600;//重新设置画布大小。当使用cleaRect函数后依然有残影，要+这句
x=x+5;y=y+3;
cxt.drawImage(y%2==0?fly1:fly2,x,y,100,100);
},500)
</script>
六、MUI
1.新建项目：5+app、mui
2.mui快捷键
mhead
mbody
数字角标
按钮
数字输入框
选项卡
复选框
图标
九宫格
列表：ml
进度条：mp
单选框：mr
范围：mr
侧滑导航：moffcanvas
3.制作：多个列表显示
快捷键：ml + js
<!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>
<!-- 列表自动生成：ml -->
<ul class="mui-table-view" id="nsList"> </ul>
</body>
</html>
<script>
var nsList=document.getElementById("nsList");
for(var i=1;i<5;i++){
nsList.innerHTML+=
'<a onclick="getId('+i+')">'/* 可以加入事件 */
//'<a onclick=\"getId('+i+')\">'
+'<img class="mui-media-object mui-pull-left" src="img/1.png">'
+'<div class="mui-media-body">'
+i+'<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>'
+'</div>'
+'</a>';
}
function getId(id){
alert(id);
}
</script>
七、数据通信
案例–植物信息记录
- 新建项目
- index
1.底部选项卡+绑定事件
2.创建窗口
3.切换窗口 - My
1.列表
2.新建My/PlantView.html +带返回的标题
3.在My.html中设置跳转和返回 - 服务器端做一个 servlet
1.新建项目
2.项目GreenHomeServerWeb中添加web窗体–API
在API.aspx.cs中写代码
877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
