移动Web开发学习笔记

大三选了移动Web开发这门课，最后复习时整理了一下学习笔记

移动端浏览器也可以使用alert等

有趣的标签

mark：高亮显示标签

track：video，audio的内嵌标签，用于设置字幕信息

embed：用于内嵌媒体资源类似video，audio，但是支持的类型更加广泛

progress：进度条

ruby：给文本添加拼音

<ruby>
    汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
    字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

base：在head标签中提供下列内容的基本地址

<base href="source/"></base>

使用Meta标签指定自动刷新

<Meta http-equiv="Refresh" Content="5" Url="http://www.downme.com">

使用Meta设置页面进入，退出效果

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)"> 

font：对内部字体设置

<font face=字体 size=字体字号  color=字体颜色>

sup,sub上下标文本

<sup>上标</sup><sub>下标</sub>

iframe，指定url显示的页面

<iframe src="url"></iframe>

使用datalist对input提示

<input type="text" list="data" style="width: 12.5rem;" />
<datalist id="data"><!-- 与输入框配合进行联想提示 -->
    <option value="1">博丽灵梦</option>
    <option value="12">雾雨魔理沙</option>
    <option value="123">十六夜咲夜</option>
</datalist>

details可以向下展开的列表

<details><!-- 可以向下展开的列表 -->
    <summary>东方Project</summary><!--默认只有上面的-->
    <p>博丽灵梦</p>
    <p>雾雨魔理沙</p>
    <p>十六夜咲夜</p>
</details>

Video补充

psoter：指定视频无法播放显示的图片

playbackRate：获取设置当前视频播放速率

canvas补充

shadowOffsetX 和 shadowOffsetY：设置阴影偏移

shadowBlur：设置阴影模糊

shadowColor：设置阴影颜色

var imagedata = context.getImageData(sx,sy,sw,sh);//获取像素信息

context.putImageData(imagedata,dx,dy[,dirtyX,dirtyY,dirtyWidth, dirtyHeight]);//设置像素信息

ctx.clip();//设置裁剪画布，之后绘制只作用裁剪部分(注意保存之前的状态)

表单标签(input)

required：必填项，否则无法提交

pattern：使用正则表达式进行验证

multiple：若type=file时指定，可以多选文件

上传的文件可以通过Blob操作 可以通过FileReader获取上传对象内容

获取文件Blob对象(input type=file)

onchange事件 文件选择变换事件 files属性获取Blob对象数组

使用FileReader读取Blob数据

let reader=new FileReader();//创建对象
reader.readAsText(file.files[0]);//读取资源
reader.onload=function(f){//监听成功结果
    console.log(f);//打印内容
}

为Blob对象创建方法URL

var objecturl = window.URL.createObjectURL(blob);

URL.revokeObjectURL (默认URL的有效时间同该页面，也可以通过该方法手动使URL失效)

浏览器的私有属性

例如使用Webkit内核浏览器标志：-webkit-

Gecko：-moz- Opera：-o- IE：-ms-

文本阴影

text-shadow: 5px 5px red;//依次设置 x y偏移 阴影颜色

创建使用服务端字体

@font-face {
　　font-family: MyFont;/* 自定义字体名称 */
　　/* 指定字体位置 */
　　/* 先找本地是否存在，存在则使用本地字体 */
　　src: local("myFont"),
　　　　  /* 这里是两种后缀的字体的使用方法 */
　　　　  url("myFont.ttf")format("truetype"),
　　　　  url("myFont.otf")format("opentype");
}

边框设置

border: 1px solid rgb(255, 1, 1);  //一次设置
border-style: dotted;		//分别设置
border-color: aqua;
border-width: 5px;

媒体查询，根据不同条件显示不同效果

@media screen and (min-width: 300px) {//多个条件可以使用 and or not 组合
    body {//满足条件才生效
        background-color:lightblue;
    }
}

也可以再满足媒体查询条件时导入指定css

<link rel=“stylesheet” media=“screen and(min-width:600) and(max-width:900px)” href=“small.css” />

CSS动画

@keyframes example {/* 创建动画并命名 */
     from {background-color: red;}/* 设置开始结束状态 */
     to {background-color: yellow;}
}
div {
    width: 100px;
    height: 100px;
    animation-name: example;/* 应用动画  并设置动画时长 */
    animation-duration: 4s;
    animation-delay: 2s;
    /* animation-delay: 2s;  指定动画的延迟时间 */
    /* animation-iteration-count: 3;设置动画运行次数 可以设置infinite无限循环 */
    /* animation-direction: reverse;设置动画播放方向 */
    /* animation-timing-function: linear;指定动画曲线 */
    /* animation-fill-mode: forwards;指定动画停止时的状态 */
}
@keyframes example {
    0%   {background-color: red;}/* 也可以这样设置多个动画点 */
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

jquery.mobile使用

引入jquery.js，jquery.mobile-1.4.5.js与jquery.mobile-1.4.5.min.css

<div data-role="header"><!--data-role指定该区域的内容 可以指定  header，content，footer-->
    <h1>header</h1>
</div>

自定义data

可以在标签添加data-xxx="MyData"存储信息，通过dataset获取信息(h1.dataset.xxx)

页面切换

<div data-role="page" id="page1"><!--指定角色为一个页面，并指定id-->
    <div data-role="header">
        <a data-rel="back">后退</a><!--back添加后退按钮-->
    </div>
    <div data-role="content">
        <h1>Page1</h1>
        <!--data-rel指定对面页面风格  dialog弹窗风格 -->
        <a href="#page2" data-rel="dialog">Page2</a><!--超链接可以使用其id切换-->
    </div>
    <!--data-position用于定位头或脚默认直接跟随上面的 fiexd会固定到下面或上面-->
    <div data-role="footer" data-position="fixed"><!--设置为footer的div内部元素会自动宽度包裹-->
        <h1>footer</h1>
    </div>
</div>
<!--
data-theme指定主题  有  a-e可选  不同的div可以使用不同风格
-->
<div data-role="page" id="page2" data-theme="b">
    <h1>Page2</h1>
    <a href="#page1" data-transition="Flip">Page1</a><!--data-transition指定页面切换效果-->
    <!-- data-role=button  会把超链接变成button样式 button与input,type=button样式也有改变 -->
    <!-- data-icon使用css内置的图标 data-iconpos用于指定图标的位置 若设置notext只显示图标不显示文本 -->
    <a href="#home" data-role="button" data-iconpos="right" data-icon="home">a Link button</a>
    <!--data-inline设置宽度包裹按钮，默认宽度占满横向-->
    <button data-icon="home" data-inline="true">按钮</button>
</div>

按钮组

<div data-role="controlgroup" data-type="horizontal"><!--controlgroup指定内部为一个分组	horizontal指定方向-->
    <button data-icon="home">按钮</button>
    <button data-icon="home">按钮</button>
    <button data-icon="home">按钮</button>
</div>

navbar

<nav data-role="navbar"><!--navbar会自动将内部内容转换为按钮-->
    <ul><!--内部元素最多5个排成一排，再多会按每排两个排列-->
        <li><a href="#">照片</a></li>
        <li><a href="#">状态</a></li>
        <li><a href="#">信息</a></li>
        <li><a href="#">签到</a></li>
        <li><a href="#">评论</a></li>
        <li><a href="#">活动</a></li>
        <li><a href="#">链接</a></li>
    </ul>
</nav>

网格布局

<div class="ui-grid-b"><!--ui-grid-x使用网格布局  a每行2个 b 3个  依次类推-->
    <!--若想位于一行需要ui-block-x不一样,若一样会排到下一行-->
    <div class="ui-block-a"><input type="reset" data-theme="c" value="reset" /></div>
    <div class="ui-block-b"><input type="submit" data-theme="b" value="submit" /></div>
    <div class="ui-block-c"><input type="reset" data-theme="c" value="reset" /></div>
</div>

折叠块

<!--data-collapsed-icon,data-expanded-icon指定展开或关闭的图标显示-->
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"><!--指定可折叠样式-->
    <h1>点击我 - 我可以折叠！</h1><!--折叠标题-->
    <p>我是可折叠的内容。</p><!--折叠内容-->
</div>
<div data-role="collapsible-set"><!--外面可以使用 collapsible-set包裹实现手风琴效果-->
    <div data-role="collapsible">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p></div>
    <div data-role="collapsible">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p></div>
    <div data-role="collapsible">
        <h3>点击我 - 我可以折叠！</h3>
        <p>我是可折叠的内容。</p></div>
</div>

表单对齐

<div data-role="fieldcontain"><!--指定内容处于一行-->
    <label for="slider">slider：</label>
    <input type="range" name="slide" id="slide" value="2" min="0" max="10" />
</div>

指定为开关

<select data-role="slider"><!--slider指定为开关效果，只能有两项-->
    <option value="off">关闭</option>
    <option value="on">开启</option>
</select>

单选样式

<fieldset data-role="controlgroup" data-type="horizontal"><!--为单选提供分组效果-->
    <legend>你的微博选项：</legend>
    <input type="radio" name="radio-1" id="radio-1" value="any"/><label for="radio-1">微博</label>
    <input type="radio" name="radio-1" id="radio-2" value="16-22" /><label for="radio-2">粉丝</label>
    <input type="radio" name="radio-1" id="radio-3" value="23-30" /><label for="radio-3">关注</label>
</fieldset>

下列选择

<select data-native-menu="false" multiple><!--data-native-menu指定是否为传统菜单   可以添加multiple实现多选-->
    <option data-placeholder="true">OK</option><!--data-placeholder指定为提示选择无法选择-->
    <option>OK</option>
    <option>OK</option>
</select>

使用列表样式

<!--data-filter指定为列表添加模糊搜索	data-filter-placeholder 设置搜索提示文本-->
<ul data-role="listview" data-theme="g" data-filter="true" data-filter-placeholder="搜索姓名..."><!--listview使用列表样式-->
    <!--也可以在父ul中设置data-autodividers="true"  默认使用第一个字母当分割条-->
    <li data-role="list-divider">A</li><!--list-divider指定为分割符-->
    <!--ui-li-count指定气泡效果里面写数字-->
    <li><a href="index.html">Adam Kinkaid</a><span class="ui-li-count">2233</span></li>
    <li data-role="list-divider">B</li>
    <li><a href="index.html">Bob Cabot</a></li>
</ul>

默认使用AJAX处理请求

可以使用 $.mobile.ajaxEnabled=false 关闭ajax，使用传统方式处理请求

控制加载框

$.mobile.showPageLoadingMsg();//显示加载框 $.mobile.hidePageLoadingMsg();//隐藏加载框

$.mobile.loadingMessage//设置加载框信息

定义函数并立马调用

(function(){
    console.log("OKKKKKKKKKK");
})();

sessionStorage与localStorage(最大5M)

sessionStorage只在一个会话有效，localStorage会存储到本地一直有效

localStorage.length//获取数据条数 localStorage.setItem(‘name’,‘博丽灵梦’)//设置存储数据 localStorage.key(0);//获取指定下标的键

localStorage.getItem(‘name’)//获取指定存储内容 localStorage.removeItem(‘name’)//移除内容 localStorage.clear();//清空内容

sessionStorage用法同上

建立manifest文件指定缓存文件在离线时使用

CACHE MANIFEST    # 首行标识必须的
#version 0.0.0  注释
CACHE:	#下面列出了带有相对路径的资源文件
Js0.js
Images/img1.png
NETWORK: #下面列出了在线时需要访问的资源文件
Index.jsp
Online.do
FALLBACK:	#以成对形式列出不可访问文件的替补资源文件
/Project/Index.jsp    /BkProject/Index.jsp

获取用户端状态信息

navigator.onLine//是否在线 navigator.userAgent//浏览器信息

WebSql存储(最大250M)

// 创建/获取数据库		名字      版本     描述信息     大小
let db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
    tx.executeSql('CREATE TABLE IF NOT EXISTS names (id unique, log)');//执行sql语句
    tx.executeSql('insert into names values(2,"博丽灵梦")');
    tx.executeSql('SELECT * FROM names', [], function (tx, results) {//查询通过回调获取数据
        var len = results.rows.length;//获取数据条数
        console.log(len);
        for (i = 0; i < len; i++){
            console.log(results.rows.item(i));//获取每条数据
        }
    }, null);
});

地理定位

主要通过navigator.geolocation，可以先判断是否存在该对象判断是否支持该功能

navigator.geolocation.getCurrentPosition(function(pos){//获取一次，其他回调省略
    console.log(pos);
});
let id=navigator.geolocation.watchPosition(function(pos){//持续获取，其他回调省略
    console.log(pos);
});
navigator.geolocation.clearWatch(id);//根据观察Id取消观察

使用SSE推送消息(单向的)

服务端

@GetMapping(value="/push",produces= MediaType.TEXT_EVENT_STREAM_VALUE)//注意需要修改媒体类型
public String push(){//还要注意跨域问题
    System.out.println("push msg..");
    try {Thread.sleep(2000);} catch (InterruptedException e) {e.printStackTrace();}//防止发送过快
    //注意：返回数据的格式要严格按照这样写，‘\n\n’不可少  标志消息结束(手动拼接协议)
    return "data:current time: "+new SimpleDateFormat("YYYY-MM-dd hh:mm:ss").format(new Date())+"\n\n";
}

客服端

let source=new EventSource("http://localhost:8080/sse/push");//请求地址会轮回发请求
source.addEventListener('message',function(msg){//监听消息推送
    console.log(msg);
});
source.addEventListener('open',function(e){
    console.log(e);
});

使用WebSocket

客服端

let ws=new WebSocket("ws://localhost:8080/test");//创建连接
ws.onopen=function(e){//连接事件
    console.log(e);
    ws.send("博丽灵梦");
};
ws.onmessage=function(msg){//收到消息事件
    console.log(msg.data);
    ws.send(msg.data);
};

WebWorker多线程限制

同源限制(分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源)

DOM 限制(无法使用dom,document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象)

通信联系(Worker 线程和主线程不能直接通信，必须通过消息完成)

脚本限制(Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求)

文件限制(Worker 线程无法读取本地文件，它所加载的脚本，必须来自网络)

常用API

主线程：

let worker=new Worker("js/test.js");//创建WebWorker 并指定脚本文件
worker.onmessage=function(msg){//指定接收消息回调
    console.log(msg);
}
worker.postMessage("OKKKKKKKKKK");// 向WebWorker发送消息
worker.terminate();//关闭 WebWorker

WebWorker线程：

importScripts("xxx","xxx");//用于引入其他  js文件
self.onmessage=function(msg){//指定接收消息回调
    console.log(msg);
}
postMessage("OK");//发送消息到主线程
self.stop();//停止自己

CSS简单计算

.box{
    margin-left:20px;
    width:calc(100%/3 - 20px);// 指定宽度为  整个宽度的  1/3   少  20px
}