技术前端

H5

HTML

问题汇总

  1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

  • checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

1
2
3
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

HBuilder

移动端的自适应

  1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放

     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

  2. 百分比布局

  3. 响应式页面的实现

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

  4. 页面使用相对字体

    两种常见的绝对单位em和rem

     rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
 em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em

     em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
 
 <div class="one">
     <span>第一层</span>
     <div class="two"> 
         <span>第二层</span>
         <div class="three">
             <span>第三层</span> 
         </div> 
     </div> 
 </div>
 
 body{ font-size: 20px; } 
 .one{ font-size: 1.5em; } 
 .two{ font-size: 0.5em; } 
 .three{ font-size: 2em; }
 
 结果：
 .one ---> 30px          1.5 * 20 = 30px
 .two ---> 15px          0.5 * 30 = 15px
 .three ---> 30px        2 * 15 = 30px

    相对长度单位rem

     body{ font-size: 20px; } 
 .one{ font-size: 1.5rem; } 
 .two{ font-size: 0.5rem; } 
 .three{ font-size: 2rem; }
 
 结果：
 .one ---> 30px 1.5 * 20 = 30px
 .two ---> 10px 0.5 * 20 = 10px
 .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh–viewport width/height

     1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的

     width:calc(100vw - 左侧宽度)
 // 注意的是运算符号的两边要有一个空格

  5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
// 重新设置字体
window.onresize = function(){  
    RootSize();  
}  
function RootSize(){ 
    //获取html元素
    var html = document.getElementsByTagName('html')[0]; 
    //屏幕的宽度（兼容处理）
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
    html.style.fontSize = w / 750 + "px";
}     
RootSize();
    对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
    对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。
  1. 整页背景图片
1
<body style="position: absolute;width: 100%;height: 100%;background: url(img/bg.jpg) no-repeat; background-size:100%;">
  1. 可以根据页面宽度变化，自动适应的图片按钮
1
2
<a style="position: absolute;margin-top: 45.5%;margin-left: 51%;width: 41%;height: 41%;background: url(img/share.png) 0 0 no-repeat; background-size:100%;" onclick="shareFB();">
</a>

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

  1. 滚动的子页面
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
          <div style="position: absolute; margin-top: 68.5%;width: 100%;height: 30.5%;">
		<div class="mui-scroll-wrapper" style="padding-left: 11%;top: 0%;width: 90%; height: 100%;">
			<div class="mui-scroll">
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
			</div>
		</div>
	</div>

<script src="js/mui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 

   	// 滚动条
   	(function($) {
              $('#scroll').scroll({
                  indicators: true
              });
              mui('.mui-scroll-wrapper').scroll({
                  deceleration: 0.0005
              });
          })(mui);
  1. 一键复制

https://github.com/zenorocha/clipboard.js/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

   $(document).ready(function(){      
 		//设置剪贴板数据
       var clipboard = new ClipboardJS('#copy_btn');       
       clipboard.on('success', function(e) {         
           alert('Copy "' + e.text +'" Success!');       
           e.clearSelection();      
       });
       clipboard.on('error', function(e) {         
           alert(e.text);     
           e.clearSelection();      
       });
  	});
  1. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/20vw为viewport width的20%/}

  1. 固定浮动在底部
1
2
   <a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>
  1. 图片变灰
1
2
3
4
5
6
7
8
9
10
   .gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

video 标签视频播放部分安卓手机播放不了

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
   var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
   autoFullScrenn(video.children[0]);
   
   
   var fullscreen = function(elem) {
       var prefix = 'webkit';
       if ( elem[prefix + 'EnterFullScreen'] ) {
           return prefix + 'EnterFullScreen';
       } else if( elem[prefix + 'RequestFullScreen'] ) {
           return prefix + 'RequestFullScreen';
       };
       return false;
   }
   
   function autoFullScrenn(v){
       var ua   = navigator.userAgent.toLowerCase();
       var Android = String(ua.match(/android/i)) == "android";
       // if(!Android) return;//非android系统不使用;
       var video  = v,doc = document;
       var fullscreenvideo = fullscreen(doc.createElement("video"));
       if(!fullscreen) {
           alert("不支持全屏模式");
           return;
       }
       video.addEventListener("webkitfullscreenchange",function(e){
           if(!doc.webkitIsFullScreen){//退出全屏暂停视频
               this.pause();
               // this.pause();
           };
       }, false);
       video.addEventListener("click", function(){
           this.play();
           video[fullscreenvideo]();
       }, false);
       video.addEventListener('ended',function(){
           doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
       },false);
   }

跨域访问

  1. 接口服务器端需要增加
1
2
3
4
5
6
response.setContentType("text/json; charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
  1. web客户端请求为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

mui.previewImage() 图片预览功能，与a标签href跳转有冲突

hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

  1. 下载打包sdk

    http://ask.dcloud.net.cn/article/103

  2. 启动带ADT的eclipse程序导入HBuilder-Hello

    如果ADT报错 This Android SDK requires A… ADT to the latest version.

    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop

    改小版本号

     plugin.version=22.0.0

  3. 直接运行程序

  4. 如果是新项目则需要改以下几个地方

    修改AndroidManifest.xml文件

     package="io.dcloud.HBuilder.seeker"
 
 所有 io.dcloud.HBuilder.seeker 的地方

    修改包名

     io.dcloud.HBuilder.seeker.wxapi

    打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中

    打开assets -> data下的control.xml文件，修改appid值

    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

    HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid

     "id": "seeker",

    HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的

React、Vue、Angular

  1. React

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

     1.声明式设计：React采用声明范式，可以轻松描述应用。
 
 2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
 
 3.灵活：React可以与已知的库或框架很好地配合。

    优点：

     1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
 
 2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
 
 3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
 
 4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
 
 5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
 
 6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

     React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

  2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

     1.轻量级的框架
 
 2.双向数据绑定
 
 3.指令
 
 4.插件化

    优点：

     1. 简单：官方文档很清晰，比 Angular 简单易学。
 
 2. 快速：异步批处理方式更新 DOM。
 
 3. 组合：用解耦的、可复用的组件组合你的应用程序。
 
 4. 紧凑：~18kb min+gzip，且无依赖。
 
 5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
 
 6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

     1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
 
 2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
 
 3. 不支持IE8

  3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

     1.良好的应用程序结构
 
 2.双向数据绑定
 
 3.指令
 
 4.HTML模板
 
 5.可嵌入、注入和测试

    优点：

     1. 模板功能强大丰富，自带了极其丰富的angular指令。
 
 2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
 
 3. 自定义指令，自定义指令后可以在项目中多次使用。
 
 4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
 
 5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

     1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
 
 2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
 
 3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
 
 4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
 
 5. DI 依赖注入 如果代码压缩需要显示声明.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
title: H5
date: 2016-02-22
categories:
- 技术
- 前端
tags:
- H5
---

***

# HTML

### 问题汇总

1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

* checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

$(“input[type=’checkbox’]”).prop(“checked”, function( i, val ) {
return !val;
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78





# HBuilder

### 移动端的自适应

1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放
    
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

2. 百分比布局

3. 响应式页面的实现    

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

4. 页面使用相对字体

    两种常见的绝对单位em和rem
    
        rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
        em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em
    
        em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
        
        <div class="one">
            <span>第一层</span>
            <div class="two"> 
                <span>第二层</span>
                <div class="three">
                    <span>第三层</span> 
                </div> 
            </div> 
        </div>
        
        body{ font-size: 20px; } 
        .one{ font-size: 1.5em; } 
        .two{ font-size: 0.5em; } 
        .three{ font-size: 2em; }
        
        结果：
        .one ---> 30px          1.5 * 20 = 30px
        .two ---> 15px          0.5 * 30 = 15px
        .three ---> 30px        2 * 15 = 30px

    相对长度单位rem
    
        body{ font-size: 20px; } 
        .one{ font-size: 1.5rem; } 
        .two{ font-size: 0.5rem; } 
        .three{ font-size: 2rem; }
        
        结果：
        .one ---> 30px 1.5 * 20 = 30px
        .two ---> 10px 0.5 * 20 = 10px
        .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh--viewport width/height
    
        1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的
    
        width:calc(100vw - 左侧宽度)
        // 注意的是运算符号的两边要有一个空格


5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

// 重新设置字体
window.onresize = function(){
RootSize();
}
function RootSize(){
//获取html元素
var html = document.getElementsByTagName(‘html’)[0];
//屏幕的宽度（兼容处理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
html.style.fontSize = w / 750 + “px”;
}
RootSize();

1
2
3
4
5
6
7

        对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
        对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。

6. 整页背景图片


1
2
3
4

7. 可以根据页面宽度变化，自动适应的图片按钮


1
2
3
4
5
6

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

8. 滚动的子页面


XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

	<script src="js/mui.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
	
	   	// 滚动条
	   	(function($) {
            $('#scroll').scroll({
                indicators: true
            });
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });
        })(mui);

1
2
3
4
5

9. 一键复制

https://github.com/zenorocha/clipboard.js/

<a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

$(document).ready(function(){      
		//设置剪贴板数据
    var clipboard = new ClipboardJS('#copy_btn');       
    clipboard.on('success', function(e) {         
        alert('Copy "' + e.text +'" Success!');       
        e.clearSelection();      
    });
    clipboard.on('error', function(e) {         
        alert(e.text);     
        e.clearSelection();      
    });
	});

1
2
3
4
5
6
7
8

10. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/*20vw为viewport width的20%*/}


11. 固定浮动在底部

<a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>

1
2
3

12. 图片变灰

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

1
2
3
4
5
6



### video 标签视频播放部分安卓手机播放不了


var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
autoFullScrenn(video.children[0]);


var fullscreen = function(elem) {
    var prefix = 'webkit';
    if ( elem[prefix + 'EnterFullScreen'] ) {
        return prefix + 'EnterFullScreen';
    } else if( elem[prefix + 'RequestFullScreen'] ) {
        return prefix + 'RequestFullScreen';
    };
    return false;
}

function autoFullScrenn(v){
    var ua   = navigator.userAgent.toLowerCase();
    var Android = String(ua.match(/android/i)) == "android";
    // if(!Android) return;//非android系统不使用;
    var video  = v,doc = document;
    var fullscreenvideo = fullscreen(doc.createElement("video"));
    if(!fullscreen) {
        alert("不支持全屏模式");
        return;
    }
    video.addEventListener("webkitfullscreenchange",function(e){
        if(!doc.webkitIsFullScreen){//退出全屏暂停视频
            this.pause();
            // this.pause();
        };
    }, false);
    video.addEventListener("click", function(){
        this.play();
        video[fullscreenvideo]();
    }, false);
    video.addEventListener('ended',function(){
        doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
    },false);
}

1
2
3
4
5
6
7
8



### 跨域访问

1. 接口服务器端需要增加


    response.setContentType("text/json; charset=utf-8");
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");

1
2
3
4
5

        
2. web客户端请求为


mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

    
### mui.previewImage() 图片预览功能，与a标签href跳转有冲突

### hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

1. 下载打包sdk
	
    http://ask.dcloud.net.cn/article/103
    
2. 启动带ADT的eclipse程序导入HBuilder-Hello

	如果ADT报错 This Android SDK requires A... ADT to the latest version.
    
    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop
    
    改小版本号
    
    	plugin.version=22.0.0

3. 直接运行程序

4. 如果是新项目则需要改以下几个地方

	修改AndroidManifest.xml文件
    
    	package="io.dcloud.HBuilder.seeker"
        
        所有 io.dcloud.HBuilder.seeker 的地方
        
    修改包名
    
    	io.dcloud.HBuilder.seeker.wxapi

	打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中
    
    打开assets -> data下的control.xml文件，修改appid值
    
    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

	HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid
    
    	"id": "seeker",
        
	HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的




















# React、Vue、Angular

1. React 

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

        1.声明式设计：React采用声明范式，可以轻松描述应用。
        
        2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
        
        3.灵活：React可以与已知的库或框架很好地配合。

    优点：

        1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
        
        2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
        
        3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
        
        4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
        
        5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
        
        6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

        React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

        1.轻量级的框架
        
        2.双向数据绑定
        
        3.指令
        
        4.插件化

    优点：

        1. 简单：官方文档很清晰，比 Angular 简单易学。
        
        2. 快速：异步批处理方式更新 DOM。
        
        3. 组合：用解耦的、可复用的组件组合你的应用程序。
        
        4. 紧凑：~18kb min+gzip，且无依赖。
        
        5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
        
        6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

        1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
        
        2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
        
        3. 不支持IE8

3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

        1.良好的应用程序结构
        
        2.双向数据绑定
        
        3.指令
        
        4.HTML模板
        
        5.可嵌入、注入和测试

    优点：

        1. 模板功能强大丰富，自带了极其丰富的angular指令。
        
        2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
        
        3. 自定义指令，自定义指令后可以在项目中多次使用。
        
        4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
        
        5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

        1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
        
        2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
        
        3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
        
        4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
        
        5. DI 依赖注入 如果代码压缩需要显示声明.

title: H5
date: 2016-02-22
categories:

  • 技术
  • 前端
    tags:
  • H5

HTML

问题汇总

  1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

  • checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

1
2
3
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

HBuilder

移动端的自适应

  1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放

     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

  2. 百分比布局

  3. 响应式页面的实现

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

  4. 页面使用相对字体

    两种常见的绝对单位em和rem

     rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
 em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em

     em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
 
 <div class="one">
     <span>第一层</span>
     <div class="two"> 
         <span>第二层</span>
         <div class="three">
             <span>第三层</span> 
         </div> 
     </div> 
 </div>
 
 body{ font-size: 20px; } 
 .one{ font-size: 1.5em; } 
 .two{ font-size: 0.5em; } 
 .three{ font-size: 2em; }
 
 结果：
 .one ---> 30px          1.5 * 20 = 30px
 .two ---> 15px          0.5 * 30 = 15px
 .three ---> 30px        2 * 15 = 30px

    相对长度单位rem

     body{ font-size: 20px; } 
 .one{ font-size: 1.5rem; } 
 .two{ font-size: 0.5rem; } 
 .three{ font-size: 2rem; }
 
 结果：
 .one ---> 30px 1.5 * 20 = 30px
 .two ---> 10px 0.5 * 20 = 10px
 .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh–viewport width/height

     1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的

     width:calc(100vw - 左侧宽度)
 // 注意的是运算符号的两边要有一个空格

  5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
// 重新设置字体
window.onresize = function(){  
    RootSize();  
}  
function RootSize(){ 
    //获取html元素
    var html = document.getElementsByTagName('html')[0]; 
    //屏幕的宽度（兼容处理）
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
    html.style.fontSize = w / 750 + "px";
}     
RootSize();
    对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
    对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。
  1. 整页背景图片
1
<body style="position: absolute;width: 100%;height: 100%;background: url(img/bg.jpg) no-repeat; background-size:100%;">
  1. 可以根据页面宽度变化，自动适应的图片按钮
1
2
<a style="position: absolute;margin-top: 45.5%;margin-left: 51%;width: 41%;height: 41%;background: url(img/share.png) 0 0 no-repeat; background-size:100%;" onclick="shareFB();">
</a>

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

  1. 滚动的子页面
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
          <div style="position: absolute; margin-top: 68.5%;width: 100%;height: 30.5%;">
		<div class="mui-scroll-wrapper" style="padding-left: 11%;top: 0%;width: 90%; height: 100%;">
			<div class="mui-scroll">
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
			</div>
		</div>
	</div>

<script src="js/mui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 

   	// 滚动条
   	(function($) {
              $('#scroll').scroll({
                  indicators: true
              });
              mui('.mui-scroll-wrapper').scroll({
                  deceleration: 0.0005
              });
          })(mui);
  1. 一键复制

https://github.com/zenorocha/clipboard.js/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

   $(document).ready(function(){      
 		//设置剪贴板数据
       var clipboard = new ClipboardJS('#copy_btn');       
       clipboard.on('success', function(e) {         
           alert('Copy "' + e.text +'" Success!');       
           e.clearSelection();      
       });
       clipboard.on('error', function(e) {         
           alert(e.text);     
           e.clearSelection();      
       });
  	});
  1. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/20vw为viewport width的20%/}

  1. 固定浮动在底部
1
2
   <a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>
  1. 图片变灰
1
2
3
4
5
6
7
8
9
10
   .gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

video 标签视频播放部分安卓手机播放不了

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
   var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
   autoFullScrenn(video.children[0]);
   
   
   var fullscreen = function(elem) {
       var prefix = 'webkit';
       if ( elem[prefix + 'EnterFullScreen'] ) {
           return prefix + 'EnterFullScreen';
       } else if( elem[prefix + 'RequestFullScreen'] ) {
           return prefix + 'RequestFullScreen';
       };
       return false;
   }
   
   function autoFullScrenn(v){
       var ua   = navigator.userAgent.toLowerCase();
       var Android = String(ua.match(/android/i)) == "android";
       // if(!Android) return;//非android系统不使用;
       var video  = v,doc = document;
       var fullscreenvideo = fullscreen(doc.createElement("video"));
       if(!fullscreen) {
           alert("不支持全屏模式");
           return;
       }
       video.addEventListener("webkitfullscreenchange",function(e){
           if(!doc.webkitIsFullScreen){//退出全屏暂停视频
               this.pause();
               // this.pause();
           };
       }, false);
       video.addEventListener("click", function(){
           this.play();
           video[fullscreenvideo]();
       }, false);
       video.addEventListener('ended',function(){
           doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
       },false);
   }

跨域访问

  1. 接口服务器端需要增加
1
2
3
4
5
6
response.setContentType("text/json; charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
  1. web客户端请求为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

mui.previewImage() 图片预览功能，与a标签href跳转有冲突

hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

  1. 下载打包sdk

    http://ask.dcloud.net.cn/article/103

  2. 启动带ADT的eclipse程序导入HBuilder-Hello

    如果ADT报错 This Android SDK requires A… ADT to the latest version.

    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop

    改小版本号

     plugin.version=22.0.0

  3. 直接运行程序

  4. 如果是新项目则需要改以下几个地方

    修改AndroidManifest.xml文件

     package="io.dcloud.HBuilder.seeker"
 
 所有 io.dcloud.HBuilder.seeker 的地方

    修改包名

     io.dcloud.HBuilder.seeker.wxapi

    打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中

    打开assets -> data下的control.xml文件，修改appid值

    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

    HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid

     "id": "seeker",

    HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的

React、Vue、Angular

  1. React

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

     1.声明式设计：React采用声明范式，可以轻松描述应用。
 
 2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
 
 3.灵活：React可以与已知的库或框架很好地配合。

    优点：

     1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
 
 2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
 
 3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
 
 4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
 
 5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
 
 6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

     React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

  2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

     1.轻量级的框架
 
 2.双向数据绑定
 
 3.指令
 
 4.插件化

    优点：

     1. 简单：官方文档很清晰，比 Angular 简单易学。
 
 2. 快速：异步批处理方式更新 DOM。
 
 3. 组合：用解耦的、可复用的组件组合你的应用程序。
 
 4. 紧凑：~18kb min+gzip，且无依赖。
 
 5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
 
 6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

     1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
 
 2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
 
 3. 不支持IE8

  3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

     1.良好的应用程序结构
 
 2.双向数据绑定
 
 3.指令
 
 4.HTML模板
 
 5.可嵌入、注入和测试

    优点：

     1. 模板功能强大丰富，自带了极其丰富的angular指令。
 
 2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
 
 3. 自定义指令，自定义指令后可以在项目中多次使用。
 
 4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
 
 5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

     1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
 
 2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
 
 3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
 
 4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
 
 5. DI 依赖注入 如果代码压缩需要显示声明.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
title: H5
date: 2016-02-22
categories:
- 技术
- 前端
tags:
- H5
---

***

# HTML

### 问题汇总

1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

* checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

$(“input[type=’checkbox’]”).prop(“checked”, function( i, val ) {
return !val;
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78





# HBuilder

### 移动端的自适应

1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放
    
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

2. 百分比布局

3. 响应式页面的实现    

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

4. 页面使用相对字体

    两种常见的绝对单位em和rem
    
        rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
        em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em
    
        em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
        
        <div class="one">
            <span>第一层</span>
            <div class="two"> 
                <span>第二层</span>
                <div class="three">
                    <span>第三层</span> 
                </div> 
            </div> 
        </div>
        
        body{ font-size: 20px; } 
        .one{ font-size: 1.5em; } 
        .two{ font-size: 0.5em; } 
        .three{ font-size: 2em; }
        
        结果：
        .one ---> 30px          1.5 * 20 = 30px
        .two ---> 15px          0.5 * 30 = 15px
        .three ---> 30px        2 * 15 = 30px

    相对长度单位rem
    
        body{ font-size: 20px; } 
        .one{ font-size: 1.5rem; } 
        .two{ font-size: 0.5rem; } 
        .three{ font-size: 2rem; }
        
        结果：
        .one ---> 30px 1.5 * 20 = 30px
        .two ---> 10px 0.5 * 20 = 10px
        .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh--viewport width/height
    
        1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的
    
        width:calc(100vw - 左侧宽度)
        // 注意的是运算符号的两边要有一个空格


5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

// 重新设置字体
window.onresize = function(){
RootSize();
}
function RootSize(){
//获取html元素
var html = document.getElementsByTagName(‘html’)[0];
//屏幕的宽度（兼容处理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
html.style.fontSize = w / 750 + “px”;
}
RootSize();

1
2
3
4
5
6
7

        对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
        对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。

6. 整页背景图片


1
2
3
4

7. 可以根据页面宽度变化，自动适应的图片按钮


1
2
3
4
5
6

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

8. 滚动的子页面


XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

	<script src="js/mui.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
	
	   	// 滚动条
	   	(function($) {
            $('#scroll').scroll({
                indicators: true
            });
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });
        })(mui);

1
2
3
4
5

9. 一键复制

https://github.com/zenorocha/clipboard.js/

<a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

$(document).ready(function(){      
		//设置剪贴板数据
    var clipboard = new ClipboardJS('#copy_btn');       
    clipboard.on('success', function(e) {         
        alert('Copy "' + e.text +'" Success!');       
        e.clearSelection();      
    });
    clipboard.on('error', function(e) {         
        alert(e.text);     
        e.clearSelection();      
    });
	});

1
2
3
4
5
6
7
8

10. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/*20vw为viewport width的20%*/}


11. 固定浮动在底部

<a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>

1
2
3

12. 图片变灰

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

1
2
3
4
5
6



### video 标签视频播放部分安卓手机播放不了


var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
autoFullScrenn(video.children[0]);


var fullscreen = function(elem) {
    var prefix = 'webkit';
    if ( elem[prefix + 'EnterFullScreen'] ) {
        return prefix + 'EnterFullScreen';
    } else if( elem[prefix + 'RequestFullScreen'] ) {
        return prefix + 'RequestFullScreen';
    };
    return false;
}

function autoFullScrenn(v){
    var ua   = navigator.userAgent.toLowerCase();
    var Android = String(ua.match(/android/i)) == "android";
    // if(!Android) return;//非android系统不使用;
    var video  = v,doc = document;
    var fullscreenvideo = fullscreen(doc.createElement("video"));
    if(!fullscreen) {
        alert("不支持全屏模式");
        return;
    }
    video.addEventListener("webkitfullscreenchange",function(e){
        if(!doc.webkitIsFullScreen){//退出全屏暂停视频
            this.pause();
            // this.pause();
        };
    }, false);
    video.addEventListener("click", function(){
        this.play();
        video[fullscreenvideo]();
    }, false);
    video.addEventListener('ended',function(){
        doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
    },false);
}

1
2
3
4
5
6
7
8



### 跨域访问

1. 接口服务器端需要增加


    response.setContentType("text/json; charset=utf-8");
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");

1
2
3
4
5

        
2. web客户端请求为


mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

    
### mui.previewImage() 图片预览功能，与a标签href跳转有冲突

### hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

1. 下载打包sdk
	
    http://ask.dcloud.net.cn/article/103
    
2. 启动带ADT的eclipse程序导入HBuilder-Hello

	如果ADT报错 This Android SDK requires A... ADT to the latest version.
    
    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop
    
    改小版本号
    
    	plugin.version=22.0.0

3. 直接运行程序

4. 如果是新项目则需要改以下几个地方

	修改AndroidManifest.xml文件
    
    	package="io.dcloud.HBuilder.seeker"
        
        所有 io.dcloud.HBuilder.seeker 的地方
        
    修改包名
    
    	io.dcloud.HBuilder.seeker.wxapi

	打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中
    
    打开assets -> data下的control.xml文件，修改appid值
    
    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

	HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid
    
    	"id": "seeker",
        
	HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的




















# React、Vue、Angular

1. React 

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

        1.声明式设计：React采用声明范式，可以轻松描述应用。
        
        2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
        
        3.灵活：React可以与已知的库或框架很好地配合。

    优点：

        1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
        
        2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
        
        3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
        
        4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
        
        5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
        
        6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

        React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

        1.轻量级的框架
        
        2.双向数据绑定
        
        3.指令
        
        4.插件化

    优点：

        1. 简单：官方文档很清晰，比 Angular 简单易学。
        
        2. 快速：异步批处理方式更新 DOM。
        
        3. 组合：用解耦的、可复用的组件组合你的应用程序。
        
        4. 紧凑：~18kb min+gzip，且无依赖。
        
        5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
        
        6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

        1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
        
        2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
        
        3. 不支持IE8

3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

        1.良好的应用程序结构
        
        2.双向数据绑定
        
        3.指令
        
        4.HTML模板
        
        5.可嵌入、注入和测试

    优点：

        1. 模板功能强大丰富，自带了极其丰富的angular指令。
        
        2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
        
        3. 自定义指令，自定义指令后可以在项目中多次使用。
        
        4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
        
        5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

        1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
        
        2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
        
        3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
        
        4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
        
        5. DI 依赖注入 如果代码压缩需要显示声明.

title: H5
date: 2016-02-22
categories:

  • 技术
  • 前端
    tags:
  • H5

HTML

问题汇总

  1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

  • checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

1
2
3
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

HBuilder

移动端的自适应

  1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放

     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

  2. 百分比布局

  3. 响应式页面的实现

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

  4. 页面使用相对字体

    两种常见的绝对单位em和rem

     rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
 em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em

     em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
 
 <div class="one">
     <span>第一层</span>
     <div class="two"> 
         <span>第二层</span>
         <div class="three">
             <span>第三层</span> 
         </div> 
     </div> 
 </div>
 
 body{ font-size: 20px; } 
 .one{ font-size: 1.5em; } 
 .two{ font-size: 0.5em; } 
 .three{ font-size: 2em; }
 
 结果：
 .one ---> 30px          1.5 * 20 = 30px
 .two ---> 15px          0.5 * 30 = 15px
 .three ---> 30px        2 * 15 = 30px

    相对长度单位rem

     body{ font-size: 20px; } 
 .one{ font-size: 1.5rem; } 
 .two{ font-size: 0.5rem; } 
 .three{ font-size: 2rem; }
 
 结果：
 .one ---> 30px 1.5 * 20 = 30px
 .two ---> 10px 0.5 * 20 = 10px
 .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh–viewport width/height

     1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的

     width:calc(100vw - 左侧宽度)
 // 注意的是运算符号的两边要有一个空格

  5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
// 重新设置字体
window.onresize = function(){  
    RootSize();  
}  
function RootSize(){ 
    //获取html元素
    var html = document.getElementsByTagName('html')[0]; 
    //屏幕的宽度（兼容处理）
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
    html.style.fontSize = w / 750 + "px";
}     
RootSize();
    对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
    对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。
  1. 整页背景图片
1
<body style="position: absolute;width: 100%;height: 100%;background: url(img/bg.jpg) no-repeat; background-size:100%;">
  1. 可以根据页面宽度变化，自动适应的图片按钮
1
2
<a style="position: absolute;margin-top: 45.5%;margin-left: 51%;width: 41%;height: 41%;background: url(img/share.png) 0 0 no-repeat; background-size:100%;" onclick="shareFB();">
</a>

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

  1. 滚动的子页面
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
          <div style="position: absolute; margin-top: 68.5%;width: 100%;height: 30.5%;">
		<div class="mui-scroll-wrapper" style="padding-left: 11%;top: 0%;width: 90%; height: 100%;">
			<div class="mui-scroll">
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
			</div>
		</div>
	</div>

<script src="js/mui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 

   	// 滚动条
   	(function($) {
              $('#scroll').scroll({
                  indicators: true
              });
              mui('.mui-scroll-wrapper').scroll({
                  deceleration: 0.0005
              });
          })(mui);
  1. 一键复制

https://github.com/zenorocha/clipboard.js/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

   $(document).ready(function(){      
 		//设置剪贴板数据
       var clipboard = new ClipboardJS('#copy_btn');       
       clipboard.on('success', function(e) {         
           alert('Copy "' + e.text +'" Success!');       
           e.clearSelection();      
       });
       clipboard.on('error', function(e) {         
           alert(e.text);     
           e.clearSelection();      
       });
  	});
  1. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/20vw为viewport width的20%/}

  1. 固定浮动在底部
1
2
   <a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>
  1. 图片变灰
1
2
3
4
5
6
7
8
9
10
   .gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

video 标签视频播放部分安卓手机播放不了

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
   var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
   autoFullScrenn(video.children[0]);
   
   
   var fullscreen = function(elem) {
       var prefix = 'webkit';
       if ( elem[prefix + 'EnterFullScreen'] ) {
           return prefix + 'EnterFullScreen';
       } else if( elem[prefix + 'RequestFullScreen'] ) {
           return prefix + 'RequestFullScreen';
       };
       return false;
   }
   
   function autoFullScrenn(v){
       var ua   = navigator.userAgent.toLowerCase();
       var Android = String(ua.match(/android/i)) == "android";
       // if(!Android) return;//非android系统不使用;
       var video  = v,doc = document;
       var fullscreenvideo = fullscreen(doc.createElement("video"));
       if(!fullscreen) {
           alert("不支持全屏模式");
           return;
       }
       video.addEventListener("webkitfullscreenchange",function(e){
           if(!doc.webkitIsFullScreen){//退出全屏暂停视频
               this.pause();
               // this.pause();
           };
       }, false);
       video.addEventListener("click", function(){
           this.play();
           video[fullscreenvideo]();
       }, false);
       video.addEventListener('ended',function(){
           doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
       },false);
   }

跨域访问

  1. 接口服务器端需要增加
1
2
3
4
5
6
response.setContentType("text/json; charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
  1. web客户端请求为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

mui.previewImage() 图片预览功能，与a标签href跳转有冲突

hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

  1. 下载打包sdk

    http://ask.dcloud.net.cn/article/103

  2. 启动带ADT的eclipse程序导入HBuilder-Hello

    如果ADT报错 This Android SDK requires A… ADT to the latest version.

    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop

    改小版本号

     plugin.version=22.0.0

  3. 直接运行程序

  4. 如果是新项目则需要改以下几个地方

    修改AndroidManifest.xml文件

     package="io.dcloud.HBuilder.seeker"
 
 所有 io.dcloud.HBuilder.seeker 的地方

    修改包名

     io.dcloud.HBuilder.seeker.wxapi

    打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中

    打开assets -> data下的control.xml文件，修改appid值

    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

    HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid

     "id": "seeker",

    HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的

React、Vue、Angular

  1. React

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

     1.声明式设计：React采用声明范式，可以轻松描述应用。
 
 2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
 
 3.灵活：React可以与已知的库或框架很好地配合。

    优点：

     1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
 
 2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
 
 3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
 
 4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
 
 5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
 
 6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

     React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

  2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

     1.轻量级的框架
 
 2.双向数据绑定
 
 3.指令
 
 4.插件化

    优点：

     1. 简单：官方文档很清晰，比 Angular 简单易学。
 
 2. 快速：异步批处理方式更新 DOM。
 
 3. 组合：用解耦的、可复用的组件组合你的应用程序。
 
 4. 紧凑：~18kb min+gzip，且无依赖。
 
 5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
 
 6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

     1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
 
 2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
 
 3. 不支持IE8

  3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

     1.良好的应用程序结构
 
 2.双向数据绑定
 
 3.指令
 
 4.HTML模板
 
 5.可嵌入、注入和测试

    优点：

     1. 模板功能强大丰富，自带了极其丰富的angular指令。
 
 2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
 
 3. 自定义指令，自定义指令后可以在项目中多次使用。
 
 4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
 
 5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

     1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
 
 2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
 
 3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
 
 4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
 
 5. DI 依赖注入 如果代码压缩需要显示声明.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
title: H5
date: 2016-02-22
categories:
- 技术
- 前端
tags:
- H5
---

***

# HTML

### 问题汇总

1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

* checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

$(“input[type=’checkbox’]”).prop(“checked”, function( i, val ) {
return !val;
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78





# HBuilder

### 移动端的自适应

1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放
    
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

2. 百分比布局

3. 响应式页面的实现    

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

4. 页面使用相对字体

    两种常见的绝对单位em和rem
    
        rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
        em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em
    
        em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
        
        <div class="one">
            <span>第一层</span>
            <div class="two"> 
                <span>第二层</span>
                <div class="three">
                    <span>第三层</span> 
                </div> 
            </div> 
        </div>
        
        body{ font-size: 20px; } 
        .one{ font-size: 1.5em; } 
        .two{ font-size: 0.5em; } 
        .three{ font-size: 2em; }
        
        结果：
        .one ---> 30px          1.5 * 20 = 30px
        .two ---> 15px          0.5 * 30 = 15px
        .three ---> 30px        2 * 15 = 30px

    相对长度单位rem
    
        body{ font-size: 20px; } 
        .one{ font-size: 1.5rem; } 
        .two{ font-size: 0.5rem; } 
        .three{ font-size: 2rem; }
        
        结果：
        .one ---> 30px 1.5 * 20 = 30px
        .two ---> 10px 0.5 * 20 = 10px
        .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh--viewport width/height
    
        1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的
    
        width:calc(100vw - 左侧宽度)
        // 注意的是运算符号的两边要有一个空格


5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

// 重新设置字体
window.onresize = function(){
RootSize();
}
function RootSize(){
//获取html元素
var html = document.getElementsByTagName(‘html’)[0];
//屏幕的宽度（兼容处理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
html.style.fontSize = w / 750 + “px”;
}
RootSize();

1
2
3
4
5
6
7

        对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
        对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。

6. 整页背景图片


1
2
3
4

7. 可以根据页面宽度变化，自动适应的图片按钮


1
2
3
4
5
6

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

8. 滚动的子页面


XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

	<script src="js/mui.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
	
	   	// 滚动条
	   	(function($) {
            $('#scroll').scroll({
                indicators: true
            });
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });
        })(mui);

1
2
3
4
5

9. 一键复制

https://github.com/zenorocha/clipboard.js/

<a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

$(document).ready(function(){      
		//设置剪贴板数据
    var clipboard = new ClipboardJS('#copy_btn');       
    clipboard.on('success', function(e) {         
        alert('Copy "' + e.text +'" Success!');       
        e.clearSelection();      
    });
    clipboard.on('error', function(e) {         
        alert(e.text);     
        e.clearSelection();      
    });
	});

1
2
3
4
5
6
7
8

10. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/*20vw为viewport width的20%*/}


11. 固定浮动在底部

<a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>

1
2
3

12. 图片变灰

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

1
2
3
4
5
6



### video 标签视频播放部分安卓手机播放不了


var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
autoFullScrenn(video.children[0]);


var fullscreen = function(elem) {
    var prefix = 'webkit';
    if ( elem[prefix + 'EnterFullScreen'] ) {
        return prefix + 'EnterFullScreen';
    } else if( elem[prefix + 'RequestFullScreen'] ) {
        return prefix + 'RequestFullScreen';
    };
    return false;
}

function autoFullScrenn(v){
    var ua   = navigator.userAgent.toLowerCase();
    var Android = String(ua.match(/android/i)) == "android";
    // if(!Android) return;//非android系统不使用;
    var video  = v,doc = document;
    var fullscreenvideo = fullscreen(doc.createElement("video"));
    if(!fullscreen) {
        alert("不支持全屏模式");
        return;
    }
    video.addEventListener("webkitfullscreenchange",function(e){
        if(!doc.webkitIsFullScreen){//退出全屏暂停视频
            this.pause();
            // this.pause();
        };
    }, false);
    video.addEventListener("click", function(){
        this.play();
        video[fullscreenvideo]();
    }, false);
    video.addEventListener('ended',function(){
        doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
    },false);
}

1
2
3
4
5
6
7
8



### 跨域访问

1. 接口服务器端需要增加


    response.setContentType("text/json; charset=utf-8");
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");

1
2
3
4
5

        
2. web客户端请求为


mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

    
### mui.previewImage() 图片预览功能，与a标签href跳转有冲突

### hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

1. 下载打包sdk
	
    http://ask.dcloud.net.cn/article/103
    
2. 启动带ADT的eclipse程序导入HBuilder-Hello

	如果ADT报错 This Android SDK requires A... ADT to the latest version.
    
    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop
    
    改小版本号
    
    	plugin.version=22.0.0

3. 直接运行程序

4. 如果是新项目则需要改以下几个地方

	修改AndroidManifest.xml文件
    
    	package="io.dcloud.HBuilder.seeker"
        
        所有 io.dcloud.HBuilder.seeker 的地方
        
    修改包名
    
    	io.dcloud.HBuilder.seeker.wxapi

	打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中
    
    打开assets -> data下的control.xml文件，修改appid值
    
    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

	HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid
    
    	"id": "seeker",
        
	HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的




















# React、Vue、Angular

1. React 

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

        1.声明式设计：React采用声明范式，可以轻松描述应用。
        
        2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
        
        3.灵活：React可以与已知的库或框架很好地配合。

    优点：

        1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
        
        2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
        
        3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
        
        4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
        
        5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
        
        6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

        React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

        1.轻量级的框架
        
        2.双向数据绑定
        
        3.指令
        
        4.插件化

    优点：

        1. 简单：官方文档很清晰，比 Angular 简单易学。
        
        2. 快速：异步批处理方式更新 DOM。
        
        3. 组合：用解耦的、可复用的组件组合你的应用程序。
        
        4. 紧凑：~18kb min+gzip，且无依赖。
        
        5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
        
        6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

        1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
        
        2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
        
        3. 不支持IE8

3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

        1.良好的应用程序结构
        
        2.双向数据绑定
        
        3.指令
        
        4.HTML模板
        
        5.可嵌入、注入和测试

    优点：

        1. 模板功能强大丰富，自带了极其丰富的angular指令。
        
        2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
        
        3. 自定义指令，自定义指令后可以在项目中多次使用。
        
        4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
        
        5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

        1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
        
        2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
        
        3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
        
        4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
        
        5. DI 依赖注入 如果代码压缩需要显示声明.

title: H5
date: 2016-02-22
categories:

  • 技术
  • 前端
    tags:
  • H5

HTML

问题汇总

  1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

  • checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

1
2
3
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

HBuilder

移动端的自适应

  1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放

     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

  2. 百分比布局

  3. 响应式页面的实现

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

  4. 页面使用相对字体

    两种常见的绝对单位em和rem

     rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
 em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em

     em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
 
 <div class="one">
     <span>第一层</span>
     <div class="two"> 
         <span>第二层</span>
         <div class="three">
             <span>第三层</span> 
         </div> 
     </div> 
 </div>
 
 body{ font-size: 20px; } 
 .one{ font-size: 1.5em; } 
 .two{ font-size: 0.5em; } 
 .three{ font-size: 2em; }
 
 结果：
 .one ---> 30px          1.5 * 20 = 30px
 .two ---> 15px          0.5 * 30 = 15px
 .three ---> 30px        2 * 15 = 30px

    相对长度单位rem

     body{ font-size: 20px; } 
 .one{ font-size: 1.5rem; } 
 .two{ font-size: 0.5rem; } 
 .three{ font-size: 2rem; }
 
 结果：
 .one ---> 30px 1.5 * 20 = 30px
 .two ---> 10px 0.5 * 20 = 10px
 .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh–viewport width/height

     1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的

     width:calc(100vw - 左侧宽度)
 // 注意的是运算符号的两边要有一个空格

  5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
// 重新设置字体
window.onresize = function(){  
    RootSize();  
}  
function RootSize(){ 
    //获取html元素
    var html = document.getElementsByTagName('html')[0]; 
    //屏幕的宽度（兼容处理）
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
    html.style.fontSize = w / 750 + "px";
}     
RootSize();
    对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
    对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。
  1. 整页背景图片
1
<body style="position: absolute;width: 100%;height: 100%;background: url(img/bg.jpg) no-repeat; background-size:100%;">
  1. 可以根据页面宽度变化，自动适应的图片按钮
1
2
<a style="position: absolute;margin-top: 45.5%;margin-left: 51%;width: 41%;height: 41%;background: url(img/share.png) 0 0 no-repeat; background-size:100%;" onclick="shareFB();">
</a>

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

  1. 滚动的子页面
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
          <div style="position: absolute; margin-top: 68.5%;width: 100%;height: 30.5%;">
		<div class="mui-scroll-wrapper" style="padding-left: 11%;top: 0%;width: 90%; height: 100%;">
			<div class="mui-scroll">
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
			</div>
		</div>
	</div>

<script src="js/mui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 

   	// 滚动条
   	(function($) {
              $('#scroll').scroll({
                  indicators: true
              });
              mui('.mui-scroll-wrapper').scroll({
                  deceleration: 0.0005
              });
          })(mui);
  1. 一键复制

https://github.com/zenorocha/clipboard.js/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

   $(document).ready(function(){      
 		//设置剪贴板数据
       var clipboard = new ClipboardJS('#copy_btn');       
       clipboard.on('success', function(e) {         
           alert('Copy "' + e.text +'" Success!');       
           e.clearSelection();      
       });
       clipboard.on('error', function(e) {         
           alert(e.text);     
           e.clearSelection();      
       });
  	});
  1. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/20vw为viewport width的20%/}

  1. 固定浮动在底部
1
2
   <a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>
  1. 图片变灰
1
2
3
4
5
6
7
8
9
10
   .gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

video 标签视频播放部分安卓手机播放不了

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
   var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
   autoFullScrenn(video.children[0]);
   
   
   var fullscreen = function(elem) {
       var prefix = 'webkit';
       if ( elem[prefix + 'EnterFullScreen'] ) {
           return prefix + 'EnterFullScreen';
       } else if( elem[prefix + 'RequestFullScreen'] ) {
           return prefix + 'RequestFullScreen';
       };
       return false;
   }
   
   function autoFullScrenn(v){
       var ua   = navigator.userAgent.toLowerCase();
       var Android = String(ua.match(/android/i)) == "android";
       // if(!Android) return;//非android系统不使用;
       var video  = v,doc = document;
       var fullscreenvideo = fullscreen(doc.createElement("video"));
       if(!fullscreen) {
           alert("不支持全屏模式");
           return;
       }
       video.addEventListener("webkitfullscreenchange",function(e){
           if(!doc.webkitIsFullScreen){//退出全屏暂停视频
               this.pause();
               // this.pause();
           };
       }, false);
       video.addEventListener("click", function(){
           this.play();
           video[fullscreenvideo]();
       }, false);
       video.addEventListener('ended',function(){
           doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
       },false);
   }

跨域访问

  1. 接口服务器端需要增加
1
2
3
4
5
6
response.setContentType("text/json; charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
  1. web客户端请求为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

mui.previewImage() 图片预览功能，与a标签href跳转有冲突

hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

  1. 下载打包sdk

    http://ask.dcloud.net.cn/article/103

  2. 启动带ADT的eclipse程序导入HBuilder-Hello

    如果ADT报错 This Android SDK requires A… ADT to the latest version.

    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop

    改小版本号

     plugin.version=22.0.0

  3. 直接运行程序

  4. 如果是新项目则需要改以下几个地方

    修改AndroidManifest.xml文件

     package="io.dcloud.HBuilder.seeker"
 
 所有 io.dcloud.HBuilder.seeker 的地方

    修改包名

     io.dcloud.HBuilder.seeker.wxapi

    打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中

    打开assets -> data下的control.xml文件，修改appid值

    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

    HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid

     "id": "seeker",

    HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的

React、Vue、Angular

  1. React

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

     1.声明式设计：React采用声明范式，可以轻松描述应用。
 
 2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
 
 3.灵活：React可以与已知的库或框架很好地配合。

    优点：

     1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
 
 2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
 
 3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
 
 4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
 
 5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
 
 6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

     React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

  2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

     1.轻量级的框架
 
 2.双向数据绑定
 
 3.指令
 
 4.插件化

    优点：

     1. 简单：官方文档很清晰，比 Angular 简单易学。
 
 2. 快速：异步批处理方式更新 DOM。
 
 3. 组合：用解耦的、可复用的组件组合你的应用程序。
 
 4. 紧凑：~18kb min+gzip，且无依赖。
 
 5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
 
 6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

     1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
 
 2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
 
 3. 不支持IE8

  3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

     1.良好的应用程序结构
 
 2.双向数据绑定
 
 3.指令
 
 4.HTML模板
 
 5.可嵌入、注入和测试

    优点：

     1. 模板功能强大丰富，自带了极其丰富的angular指令。
 
 2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
 
 3. 自定义指令，自定义指令后可以在项目中多次使用。
 
 4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
 
 5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

     1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
 
 2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
 
 3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
 
 4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
 
 5. DI 依赖注入 如果代码压缩需要显示声明.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
title: H5
date: 2016-02-22
categories:
- 技术
- 前端
tags:
- H5
---

***

# HTML

### 问题汇总

1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

* checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

$(“input[type=’checkbox’]”).prop(“checked”, function( i, val ) {
return !val;
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78





# HBuilder

### 移动端的自适应

1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放
    
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

2. 百分比布局

3. 响应式页面的实现    

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

4. 页面使用相对字体

    两种常见的绝对单位em和rem
    
        rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
        em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em
    
        em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
        
        <div class="one">
            <span>第一层</span>
            <div class="two"> 
                <span>第二层</span>
                <div class="three">
                    <span>第三层</span> 
                </div> 
            </div> 
        </div>
        
        body{ font-size: 20px; } 
        .one{ font-size: 1.5em; } 
        .two{ font-size: 0.5em; } 
        .three{ font-size: 2em; }
        
        结果：
        .one ---> 30px          1.5 * 20 = 30px
        .two ---> 15px          0.5 * 30 = 15px
        .three ---> 30px        2 * 15 = 30px

    相对长度单位rem
    
        body{ font-size: 20px; } 
        .one{ font-size: 1.5rem; } 
        .two{ font-size: 0.5rem; } 
        .three{ font-size: 2rem; }
        
        结果：
        .one ---> 30px 1.5 * 20 = 30px
        .two ---> 10px 0.5 * 20 = 10px
        .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh--viewport width/height
    
        1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的
    
        width:calc(100vw - 左侧宽度)
        // 注意的是运算符号的两边要有一个空格


5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

// 重新设置字体
window.onresize = function(){
RootSize();
}
function RootSize(){
//获取html元素
var html = document.getElementsByTagName(‘html’)[0];
//屏幕的宽度（兼容处理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
html.style.fontSize = w / 750 + “px”;
}
RootSize();

1
2
3
4
5
6
7

        对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
        对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。

6. 整页背景图片


1
2
3
4

7. 可以根据页面宽度变化，自动适应的图片按钮


1
2
3
4
5
6

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

8. 滚动的子页面


XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

	<script src="js/mui.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
	
	   	// 滚动条
	   	(function($) {
            $('#scroll').scroll({
                indicators: true
            });
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });
        })(mui);

1
2
3
4
5

9. 一键复制

https://github.com/zenorocha/clipboard.js/

<a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

$(document).ready(function(){      
		//设置剪贴板数据
    var clipboard = new ClipboardJS('#copy_btn');       
    clipboard.on('success', function(e) {         
        alert('Copy "' + e.text +'" Success!');       
        e.clearSelection();      
    });
    clipboard.on('error', function(e) {         
        alert(e.text);     
        e.clearSelection();      
    });
	});

1
2
3
4
5
6
7
8

10. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/*20vw为viewport width的20%*/}


11. 固定浮动在底部

<a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>

1
2
3

12. 图片变灰

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

1
2
3
4
5
6



### video 标签视频播放部分安卓手机播放不了


var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
autoFullScrenn(video.children[0]);


var fullscreen = function(elem) {
    var prefix = 'webkit';
    if ( elem[prefix + 'EnterFullScreen'] ) {
        return prefix + 'EnterFullScreen';
    } else if( elem[prefix + 'RequestFullScreen'] ) {
        return prefix + 'RequestFullScreen';
    };
    return false;
}

function autoFullScrenn(v){
    var ua   = navigator.userAgent.toLowerCase();
    var Android = String(ua.match(/android/i)) == "android";
    // if(!Android) return;//非android系统不使用;
    var video  = v,doc = document;
    var fullscreenvideo = fullscreen(doc.createElement("video"));
    if(!fullscreen) {
        alert("不支持全屏模式");
        return;
    }
    video.addEventListener("webkitfullscreenchange",function(e){
        if(!doc.webkitIsFullScreen){//退出全屏暂停视频
            this.pause();
            // this.pause();
        };
    }, false);
    video.addEventListener("click", function(){
        this.play();
        video[fullscreenvideo]();
    }, false);
    video.addEventListener('ended',function(){
        doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
    },false);
}

1
2
3
4
5
6
7
8



### 跨域访问

1. 接口服务器端需要增加


    response.setContentType("text/json; charset=utf-8");
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");

1
2
3
4
5

        
2. web客户端请求为


mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

    
### mui.previewImage() 图片预览功能，与a标签href跳转有冲突

### hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

1. 下载打包sdk
	
    http://ask.dcloud.net.cn/article/103
    
2. 启动带ADT的eclipse程序导入HBuilder-Hello

	如果ADT报错 This Android SDK requires A... ADT to the latest version.
    
    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop
    
    改小版本号
    
    	plugin.version=22.0.0

3. 直接运行程序

4. 如果是新项目则需要改以下几个地方

	修改AndroidManifest.xml文件
    
    	package="io.dcloud.HBuilder.seeker"
        
        所有 io.dcloud.HBuilder.seeker 的地方
        
    修改包名
    
    	io.dcloud.HBuilder.seeker.wxapi

	打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中
    
    打开assets -> data下的control.xml文件，修改appid值
    
    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

	HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid
    
    	"id": "seeker",
        
	HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的




















# React、Vue、Angular

1. React 

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

        1.声明式设计：React采用声明范式，可以轻松描述应用。
        
        2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
        
        3.灵活：React可以与已知的库或框架很好地配合。

    优点：

        1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
        
        2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
        
        3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
        
        4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
        
        5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
        
        6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

        React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

        1.轻量级的框架
        
        2.双向数据绑定
        
        3.指令
        
        4.插件化

    优点：

        1. 简单：官方文档很清晰，比 Angular 简单易学。
        
        2. 快速：异步批处理方式更新 DOM。
        
        3. 组合：用解耦的、可复用的组件组合你的应用程序。
        
        4. 紧凑：~18kb min+gzip，且无依赖。
        
        5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
        
        6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

        1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
        
        2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
        
        3. 不支持IE8

3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

        1.良好的应用程序结构
        
        2.双向数据绑定
        
        3.指令
        
        4.HTML模板
        
        5.可嵌入、注入和测试

    优点：

        1. 模板功能强大丰富，自带了极其丰富的angular指令。
        
        2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
        
        3. 自定义指令，自定义指令后可以在项目中多次使用。
        
        4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
        
        5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

        1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
        
        2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
        
        3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
        
        4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
        
        5. DI 依赖注入 如果代码压缩需要显示声明.

title: H5
date: 2016-02-22
categories:

  • 技术
  • 前端
    tags:
  • H5

HTML

问题汇总

  1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

  • checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

1
2
3
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

HBuilder

移动端的自适应

  1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放

     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

  2. 百分比布局

  3. 响应式页面的实现

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

  4. 页面使用相对字体

    两种常见的绝对单位em和rem

     rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
 em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em

     em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
 
 <div class="one">
     <span>第一层</span>
     <div class="two"> 
         <span>第二层</span>
         <div class="three">
             <span>第三层</span> 
         </div> 
     </div> 
 </div>
 
 body{ font-size: 20px; } 
 .one{ font-size: 1.5em; } 
 .two{ font-size: 0.5em; } 
 .three{ font-size: 2em; }
 
 结果：
 .one ---> 30px          1.5 * 20 = 30px
 .two ---> 15px          0.5 * 30 = 15px
 .three ---> 30px        2 * 15 = 30px

    相对长度单位rem

     body{ font-size: 20px; } 
 .one{ font-size: 1.5rem; } 
 .two{ font-size: 0.5rem; } 
 .three{ font-size: 2rem; }
 
 结果：
 .one ---> 30px 1.5 * 20 = 30px
 .two ---> 10px 0.5 * 20 = 10px
 .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh–viewport width/height

     1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的

     width:calc(100vw - 左侧宽度)
 // 注意的是运算符号的两边要有一个空格

  5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
// 重新设置字体
window.onresize = function(){  
    RootSize();  
}  
function RootSize(){ 
    //获取html元素
    var html = document.getElementsByTagName('html')[0]; 
    //屏幕的宽度（兼容处理）
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
    html.style.fontSize = w / 750 + "px";
}     
RootSize();
    对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
    对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。
  1. 整页背景图片
1
<body style="position: absolute;width: 100%;height: 100%;background: url(img/bg.jpg) no-repeat; background-size:100%;">
  1. 可以根据页面宽度变化，自动适应的图片按钮
1
2
<a style="position: absolute;margin-top: 45.5%;margin-left: 51%;width: 41%;height: 41%;background: url(img/share.png) 0 0 no-repeat; background-size:100%;" onclick="shareFB();">
</a>

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

  1. 滚动的子页面
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
          <div style="position: absolute; margin-top: 68.5%;width: 100%;height: 30.5%;">
		<div class="mui-scroll-wrapper" style="padding-left: 11%;top: 0%;width: 90%; height: 100%;">
			<div class="mui-scroll">
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
			</div>
		</div>
	</div>

<script src="js/mui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 

   	// 滚动条
   	(function($) {
              $('#scroll').scroll({
                  indicators: true
              });
              mui('.mui-scroll-wrapper').scroll({
                  deceleration: 0.0005
              });
          })(mui);
  1. 一键复制

https://github.com/zenorocha/clipboard.js/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

   $(document).ready(function(){      
 		//设置剪贴板数据
       var clipboard = new ClipboardJS('#copy_btn');       
       clipboard.on('success', function(e) {         
           alert('Copy "' + e.text +'" Success!');       
           e.clearSelection();      
       });
       clipboard.on('error', function(e) {         
           alert(e.text);     
           e.clearSelection();      
       });
  	});
  1. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/20vw为viewport width的20%/}

  1. 固定浮动在底部
1
2
   <a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>
  1. 图片变灰
1
2
3
4
5
6
7
8
9
10
   .gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

video 标签视频播放部分安卓手机播放不了

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
   var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
   autoFullScrenn(video.children[0]);
   
   
   var fullscreen = function(elem) {
       var prefix = 'webkit';
       if ( elem[prefix + 'EnterFullScreen'] ) {
           return prefix + 'EnterFullScreen';
       } else if( elem[prefix + 'RequestFullScreen'] ) {
           return prefix + 'RequestFullScreen';
       };
       return false;
   }
   
   function autoFullScrenn(v){
       var ua   = navigator.userAgent.toLowerCase();
       var Android = String(ua.match(/android/i)) == "android";
       // if(!Android) return;//非android系统不使用;
       var video  = v,doc = document;
       var fullscreenvideo = fullscreen(doc.createElement("video"));
       if(!fullscreen) {
           alert("不支持全屏模式");
           return;
       }
       video.addEventListener("webkitfullscreenchange",function(e){
           if(!doc.webkitIsFullScreen){//退出全屏暂停视频
               this.pause();
               // this.pause();
           };
       }, false);
       video.addEventListener("click", function(){
           this.play();
           video[fullscreenvideo]();
       }, false);
       video.addEventListener('ended',function(){
           doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
       },false);
   }

跨域访问

  1. 接口服务器端需要增加
1
2
3
4
5
6
response.setContentType("text/json; charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
  1. web客户端请求为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

mui.previewImage() 图片预览功能，与a标签href跳转有冲突

hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

  1. 下载打包sdk

    http://ask.dcloud.net.cn/article/103

  2. 启动带ADT的eclipse程序导入HBuilder-Hello

    如果ADT报错 This Android SDK requires A… ADT to the latest version.

    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop

    改小版本号

     plugin.version=22.0.0

  3. 直接运行程序

  4. 如果是新项目则需要改以下几个地方

    修改AndroidManifest.xml文件

     package="io.dcloud.HBuilder.seeker"
 
 所有 io.dcloud.HBuilder.seeker 的地方

    修改包名

     io.dcloud.HBuilder.seeker.wxapi

    打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中

    打开assets -> data下的control.xml文件，修改appid值

    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

    HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid

     "id": "seeker",

    HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的

React、Vue、Angular

  1. React

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

     1.声明式设计：React采用声明范式，可以轻松描述应用。
 
 2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
 
 3.灵活：React可以与已知的库或框架很好地配合。

    优点：

     1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
 
 2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
 
 3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
 
 4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
 
 5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
 
 6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

     React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

  2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

     1.轻量级的框架
 
 2.双向数据绑定
 
 3.指令
 
 4.插件化

    优点：

     1. 简单：官方文档很清晰，比 Angular 简单易学。
 
 2. 快速：异步批处理方式更新 DOM。
 
 3. 组合：用解耦的、可复用的组件组合你的应用程序。
 
 4. 紧凑：~18kb min+gzip，且无依赖。
 
 5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
 
 6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

     1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
 
 2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
 
 3. 不支持IE8

  3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

     1.良好的应用程序结构
 
 2.双向数据绑定
 
 3.指令
 
 4.HTML模板
 
 5.可嵌入、注入和测试

    优点：

     1. 模板功能强大丰富，自带了极其丰富的angular指令。
 
 2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
 
 3. 自定义指令，自定义指令后可以在项目中多次使用。
 
 4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
 
 5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

     1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
 
 2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
 
 3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
 
 4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
 
 5. DI 依赖注入 如果代码压缩需要显示声明.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
title: H5
date: 2016-02-22
categories:
- 技术
- 前端
tags:
- H5
---

***

# HTML

### 问题汇总

1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

* checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

$(“input[type=’checkbox’]”).prop(“checked”, function( i, val ) {
return !val;
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78





# HBuilder

### 移动端的自适应

1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放
    
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

2. 百分比布局

3. 响应式页面的实现    

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

4. 页面使用相对字体

    两种常见的绝对单位em和rem
    
        rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
        em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em
    
        em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
        
        <div class="one">
            <span>第一层</span>
            <div class="two"> 
                <span>第二层</span>
                <div class="three">
                    <span>第三层</span> 
                </div> 
            </div> 
        </div>
        
        body{ font-size: 20px; } 
        .one{ font-size: 1.5em; } 
        .two{ font-size: 0.5em; } 
        .three{ font-size: 2em; }
        
        结果：
        .one ---> 30px          1.5 * 20 = 30px
        .two ---> 15px          0.5 * 30 = 15px
        .three ---> 30px        2 * 15 = 30px

    相对长度单位rem
    
        body{ font-size: 20px; } 
        .one{ font-size: 1.5rem; } 
        .two{ font-size: 0.5rem; } 
        .three{ font-size: 2rem; }
        
        结果：
        .one ---> 30px 1.5 * 20 = 30px
        .two ---> 10px 0.5 * 20 = 10px
        .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh--viewport width/height
    
        1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的
    
        width:calc(100vw - 左侧宽度)
        // 注意的是运算符号的两边要有一个空格


5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

// 重新设置字体
window.onresize = function(){
RootSize();
}
function RootSize(){
//获取html元素
var html = document.getElementsByTagName(‘html’)[0];
//屏幕的宽度（兼容处理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
html.style.fontSize = w / 750 + “px”;
}
RootSize();

1
2
3
4
5
6
7

        对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
        对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。

6. 整页背景图片


1
2
3
4

7. 可以根据页面宽度变化，自动适应的图片按钮


1
2
3
4
5
6

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

8. 滚动的子页面


XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

	<script src="js/mui.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
	
	   	// 滚动条
	   	(function($) {
            $('#scroll').scroll({
                indicators: true
            });
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });
        })(mui);

1
2
3
4
5

9. 一键复制

https://github.com/zenorocha/clipboard.js/

<a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

$(document).ready(function(){      
		//设置剪贴板数据
    var clipboard = new ClipboardJS('#copy_btn');       
    clipboard.on('success', function(e) {         
        alert('Copy "' + e.text +'" Success!');       
        e.clearSelection();      
    });
    clipboard.on('error', function(e) {         
        alert(e.text);     
        e.clearSelection();      
    });
	});

1
2
3
4
5
6
7
8

10. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/*20vw为viewport width的20%*/}


11. 固定浮动在底部

<a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>

1
2
3

12. 图片变灰

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

1
2
3
4
5
6



### video 标签视频播放部分安卓手机播放不了


var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
autoFullScrenn(video.children[0]);


var fullscreen = function(elem) {
    var prefix = 'webkit';
    if ( elem[prefix + 'EnterFullScreen'] ) {
        return prefix + 'EnterFullScreen';
    } else if( elem[prefix + 'RequestFullScreen'] ) {
        return prefix + 'RequestFullScreen';
    };
    return false;
}

function autoFullScrenn(v){
    var ua   = navigator.userAgent.toLowerCase();
    var Android = String(ua.match(/android/i)) == "android";
    // if(!Android) return;//非android系统不使用;
    var video  = v,doc = document;
    var fullscreenvideo = fullscreen(doc.createElement("video"));
    if(!fullscreen) {
        alert("不支持全屏模式");
        return;
    }
    video.addEventListener("webkitfullscreenchange",function(e){
        if(!doc.webkitIsFullScreen){//退出全屏暂停视频
            this.pause();
            // this.pause();
        };
    }, false);
    video.addEventListener("click", function(){
        this.play();
        video[fullscreenvideo]();
    }, false);
    video.addEventListener('ended',function(){
        doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
    },false);
}

1
2
3
4
5
6
7
8



### 跨域访问

1. 接口服务器端需要增加


    response.setContentType("text/json; charset=utf-8");
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");

1
2
3
4
5

        
2. web客户端请求为


mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

    
### mui.previewImage() 图片预览功能，与a标签href跳转有冲突

### hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

1. 下载打包sdk
	
    http://ask.dcloud.net.cn/article/103
    
2. 启动带ADT的eclipse程序导入HBuilder-Hello

	如果ADT报错 This Android SDK requires A... ADT to the latest version.
    
    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop
    
    改小版本号
    
    	plugin.version=22.0.0

3. 直接运行程序

4. 如果是新项目则需要改以下几个地方

	修改AndroidManifest.xml文件
    
    	package="io.dcloud.HBuilder.seeker"
        
        所有 io.dcloud.HBuilder.seeker 的地方
        
    修改包名
    
    	io.dcloud.HBuilder.seeker.wxapi

	打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中
    
    打开assets -> data下的control.xml文件，修改appid值
    
    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

	HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid
    
    	"id": "seeker",
        
	HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的




















# React、Vue、Angular

1. React 

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

        1.声明式设计：React采用声明范式，可以轻松描述应用。
        
        2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
        
        3.灵活：React可以与已知的库或框架很好地配合。

    优点：

        1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
        
        2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
        
        3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
        
        4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
        
        5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
        
        6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

        React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

        1.轻量级的框架
        
        2.双向数据绑定
        
        3.指令
        
        4.插件化

    优点：

        1. 简单：官方文档很清晰，比 Angular 简单易学。
        
        2. 快速：异步批处理方式更新 DOM。
        
        3. 组合：用解耦的、可复用的组件组合你的应用程序。
        
        4. 紧凑：~18kb min+gzip，且无依赖。
        
        5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
        
        6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

        1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
        
        2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
        
        3. 不支持IE8

3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

        1.良好的应用程序结构
        
        2.双向数据绑定
        
        3.指令
        
        4.HTML模板
        
        5.可嵌入、注入和测试

    优点：

        1. 模板功能强大丰富，自带了极其丰富的angular指令。
        
        2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
        
        3. 自定义指令，自定义指令后可以在项目中多次使用。
        
        4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
        
        5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

        1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
        
        2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
        
        3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
        
        4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
        
        5. DI 依赖注入 如果代码压缩需要显示声明.

title: H5
date: 2016-02-22
categories:

  • 技术
  • 前端
    tags:
  • H5

HTML

问题汇总

  1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

  • checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

1
2
3
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

HBuilder

移动端的自适应

  1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放

     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

  2. 百分比布局

  3. 响应式页面的实现

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

  4. 页面使用相对字体

    两种常见的绝对单位em和rem

     rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
 em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em

     em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
 
 <div class="one">
     <span>第一层</span>
     <div class="two"> 
         <span>第二层</span>
         <div class="three">
             <span>第三层</span> 
         </div> 
     </div> 
 </div>
 
 body{ font-size: 20px; } 
 .one{ font-size: 1.5em; } 
 .two{ font-size: 0.5em; } 
 .three{ font-size: 2em; }
 
 结果：
 .one ---> 30px          1.5 * 20 = 30px
 .two ---> 15px          0.5 * 30 = 15px
 .three ---> 30px        2 * 15 = 30px

    相对长度单位rem

     body{ font-size: 20px; } 
 .one{ font-size: 1.5rem; } 
 .two{ font-size: 0.5rem; } 
 .three{ font-size: 2rem; }
 
 结果：
 .one ---> 30px 1.5 * 20 = 30px
 .two ---> 10px 0.5 * 20 = 10px
 .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh–viewport width/height

     1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的

     width:calc(100vw - 左侧宽度)
 // 注意的是运算符号的两边要有一个空格

  5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
// 重新设置字体
window.onresize = function(){  
    RootSize();  
}  
function RootSize(){ 
    //获取html元素
    var html = document.getElementsByTagName('html')[0]; 
    //屏幕的宽度（兼容处理）
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
    html.style.fontSize = w / 750 + "px";
}     
RootSize();
    对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
    对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。
  1. 整页背景图片
1
<body style="position: absolute;width: 100%;height: 100%;background: url(img/bg.jpg) no-repeat; background-size:100%;">
  1. 可以根据页面宽度变化，自动适应的图片按钮
1
2
<a style="position: absolute;margin-top: 45.5%;margin-left: 51%;width: 41%;height: 41%;background: url(img/share.png) 0 0 no-repeat; background-size:100%;" onclick="shareFB();">
</a>

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

  1. 滚动的子页面
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
          <div style="position: absolute; margin-top: 68.5%;width: 100%;height: 30.5%;">
		<div class="mui-scroll-wrapper" style="padding-left: 11%;top: 0%;width: 90%; height: 100%;">
			<div class="mui-scroll">
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
			</div>
		</div>
	</div>

<script src="js/mui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 

   	// 滚动条
   	(function($) {
              $('#scroll').scroll({
                  indicators: true
              });
              mui('.mui-scroll-wrapper').scroll({
                  deceleration: 0.0005
              });
          })(mui);
  1. 一键复制

https://github.com/zenorocha/clipboard.js/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

   $(document).ready(function(){      
 		//设置剪贴板数据
       var clipboard = new ClipboardJS('#copy_btn');       
       clipboard.on('success', function(e) {         
           alert('Copy "' + e.text +'" Success!');       
           e.clearSelection();      
       });
       clipboard.on('error', function(e) {         
           alert(e.text);     
           e.clearSelection();      
       });
  	});
  1. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/20vw为viewport width的20%/}

  1. 固定浮动在底部
1
2
   <a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>
  1. 图片变灰
1
2
3
4
5
6
7
8
9
10
   .gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

video 标签视频播放部分安卓手机播放不了

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
   var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
   autoFullScrenn(video.children[0]);
   
   
   var fullscreen = function(elem) {
       var prefix = 'webkit';
       if ( elem[prefix + 'EnterFullScreen'] ) {
           return prefix + 'EnterFullScreen';
       } else if( elem[prefix + 'RequestFullScreen'] ) {
           return prefix + 'RequestFullScreen';
       };
       return false;
   }
   
   function autoFullScrenn(v){
       var ua   = navigator.userAgent.toLowerCase();
       var Android = String(ua.match(/android/i)) == "android";
       // if(!Android) return;//非android系统不使用;
       var video  = v,doc = document;
       var fullscreenvideo = fullscreen(doc.createElement("video"));
       if(!fullscreen) {
           alert("不支持全屏模式");
           return;
       }
       video.addEventListener("webkitfullscreenchange",function(e){
           if(!doc.webkitIsFullScreen){//退出全屏暂停视频
               this.pause();
               // this.pause();
           };
       }, false);
       video.addEventListener("click", function(){
           this.play();
           video[fullscreenvideo]();
       }, false);
       video.addEventListener('ended',function(){
           doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
       },false);
   }

跨域访问

  1. 接口服务器端需要增加
1
2
3
4
5
6
response.setContentType("text/json; charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
  1. web客户端请求为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

mui.previewImage() 图片预览功能，与a标签href跳转有冲突

hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

  1. 下载打包sdk

    http://ask.dcloud.net.cn/article/103

  2. 启动带ADT的eclipse程序导入HBuilder-Hello

    如果ADT报错 This Android SDK requires A… ADT to the latest version.

    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop

    改小版本号

     plugin.version=22.0.0

  3. 直接运行程序

  4. 如果是新项目则需要改以下几个地方

    修改AndroidManifest.xml文件

     package="io.dcloud.HBuilder.seeker"
 
 所有 io.dcloud.HBuilder.seeker 的地方

    修改包名

     io.dcloud.HBuilder.seeker.wxapi

    打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中

    打开assets -> data下的control.xml文件，修改appid值

    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

    HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid

     "id": "seeker",

    HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的

React、Vue、Angular

  1. React

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

     1.声明式设计：React采用声明范式，可以轻松描述应用。
 
 2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
 
 3.灵活：React可以与已知的库或框架很好地配合。

    优点：

     1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
 
 2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
 
 3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
 
 4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
 
 5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
 
 6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

     React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

  2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

     1.轻量级的框架
 
 2.双向数据绑定
 
 3.指令
 
 4.插件化

    优点：

     1. 简单：官方文档很清晰，比 Angular 简单易学。
 
 2. 快速：异步批处理方式更新 DOM。
 
 3. 组合：用解耦的、可复用的组件组合你的应用程序。
 
 4. 紧凑：~18kb min+gzip，且无依赖。
 
 5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
 
 6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

     1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
 
 2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
 
 3. 不支持IE8

  3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

     1.良好的应用程序结构
 
 2.双向数据绑定
 
 3.指令
 
 4.HTML模板
 
 5.可嵌入、注入和测试

    优点：

     1. 模板功能强大丰富，自带了极其丰富的angular指令。
 
 2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
 
 3. 自定义指令，自定义指令后可以在项目中多次使用。
 
 4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
 
 5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

     1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
 
 2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
 
 3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
 
 4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
 
 5. DI 依赖注入 如果代码压缩需要显示声明.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
title: H5
date: 2016-02-22
categories:
- 技术
- 前端
tags:
- H5
---

***

# HTML

### 问题汇总

1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

* checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

$(“input[type=’checkbox’]”).prop(“checked”, function( i, val ) {
return !val;
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78





# HBuilder

### 移动端的自适应

1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放
    
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

2. 百分比布局

3. 响应式页面的实现    

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

4. 页面使用相对字体

    两种常见的绝对单位em和rem
    
        rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
        em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em
    
        em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
        
        <div class="one">
            <span>第一层</span>
            <div class="two"> 
                <span>第二层</span>
                <div class="three">
                    <span>第三层</span> 
                </div> 
            </div> 
        </div>
        
        body{ font-size: 20px; } 
        .one{ font-size: 1.5em; } 
        .two{ font-size: 0.5em; } 
        .three{ font-size: 2em; }
        
        结果：
        .one ---> 30px          1.5 * 20 = 30px
        .two ---> 15px          0.5 * 30 = 15px
        .three ---> 30px        2 * 15 = 30px

    相对长度单位rem
    
        body{ font-size: 20px; } 
        .one{ font-size: 1.5rem; } 
        .two{ font-size: 0.5rem; } 
        .three{ font-size: 2rem; }
        
        结果：
        .one ---> 30px 1.5 * 20 = 30px
        .two ---> 10px 0.5 * 20 = 10px
        .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh--viewport width/height
    
        1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的
    
        width:calc(100vw - 左侧宽度)
        // 注意的是运算符号的两边要有一个空格


5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

// 重新设置字体
window.onresize = function(){
RootSize();
}
function RootSize(){
//获取html元素
var html = document.getElementsByTagName(‘html’)[0];
//屏幕的宽度（兼容处理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
html.style.fontSize = w / 750 + “px”;
}
RootSize();

1
2
3
4
5
6
7

        对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
        对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。

6. 整页背景图片


1
2
3
4

7. 可以根据页面宽度变化，自动适应的图片按钮


1
2
3
4
5
6

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

8. 滚动的子页面


XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

	<script src="js/mui.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
	
	   	// 滚动条
	   	(function($) {
            $('#scroll').scroll({
                indicators: true
            });
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });
        })(mui);

1
2
3
4
5

9. 一键复制

https://github.com/zenorocha/clipboard.js/

<a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

$(document).ready(function(){      
		//设置剪贴板数据
    var clipboard = new ClipboardJS('#copy_btn');       
    clipboard.on('success', function(e) {         
        alert('Copy "' + e.text +'" Success!');       
        e.clearSelection();      
    });
    clipboard.on('error', function(e) {         
        alert(e.text);     
        e.clearSelection();      
    });
	});

1
2
3
4
5
6
7
8

10. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/*20vw为viewport width的20%*/}


11. 固定浮动在底部

<a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>

1
2
3

12. 图片变灰

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

1
2
3
4
5
6



### video 标签视频播放部分安卓手机播放不了


var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
autoFullScrenn(video.children[0]);


var fullscreen = function(elem) {
    var prefix = 'webkit';
    if ( elem[prefix + 'EnterFullScreen'] ) {
        return prefix + 'EnterFullScreen';
    } else if( elem[prefix + 'RequestFullScreen'] ) {
        return prefix + 'RequestFullScreen';
    };
    return false;
}

function autoFullScrenn(v){
    var ua   = navigator.userAgent.toLowerCase();
    var Android = String(ua.match(/android/i)) == "android";
    // if(!Android) return;//非android系统不使用;
    var video  = v,doc = document;
    var fullscreenvideo = fullscreen(doc.createElement("video"));
    if(!fullscreen) {
        alert("不支持全屏模式");
        return;
    }
    video.addEventListener("webkitfullscreenchange",function(e){
        if(!doc.webkitIsFullScreen){//退出全屏暂停视频
            this.pause();
            // this.pause();
        };
    }, false);
    video.addEventListener("click", function(){
        this.play();
        video[fullscreenvideo]();
    }, false);
    video.addEventListener('ended',function(){
        doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
    },false);
}

1
2
3
4
5
6
7
8



### 跨域访问

1. 接口服务器端需要增加


    response.setContentType("text/json; charset=utf-8");
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");

1
2
3
4
5

        
2. web客户端请求为


mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

    
### mui.previewImage() 图片预览功能，与a标签href跳转有冲突

### hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

1. 下载打包sdk
	
    http://ask.dcloud.net.cn/article/103
    
2. 启动带ADT的eclipse程序导入HBuilder-Hello

	如果ADT报错 This Android SDK requires A... ADT to the latest version.
    
    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop
    
    改小版本号
    
    	plugin.version=22.0.0

3. 直接运行程序

4. 如果是新项目则需要改以下几个地方

	修改AndroidManifest.xml文件
    
    	package="io.dcloud.HBuilder.seeker"
        
        所有 io.dcloud.HBuilder.seeker 的地方
        
    修改包名
    
    	io.dcloud.HBuilder.seeker.wxapi

	打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中
    
    打开assets -> data下的control.xml文件，修改appid值
    
    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

	HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid
    
    	"id": "seeker",
        
	HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的




















# React、Vue、Angular

1. React 

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

        1.声明式设计：React采用声明范式，可以轻松描述应用。
        
        2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
        
        3.灵活：React可以与已知的库或框架很好地配合。

    优点：

        1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
        
        2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
        
        3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
        
        4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
        
        5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
        
        6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

        React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

        1.轻量级的框架
        
        2.双向数据绑定
        
        3.指令
        
        4.插件化

    优点：

        1. 简单：官方文档很清晰，比 Angular 简单易学。
        
        2. 快速：异步批处理方式更新 DOM。
        
        3. 组合：用解耦的、可复用的组件组合你的应用程序。
        
        4. 紧凑：~18kb min+gzip，且无依赖。
        
        5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
        
        6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

        1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
        
        2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
        
        3. 不支持IE8

3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

        1.良好的应用程序结构
        
        2.双向数据绑定
        
        3.指令
        
        4.HTML模板
        
        5.可嵌入、注入和测试

    优点：

        1. 模板功能强大丰富，自带了极其丰富的angular指令。
        
        2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
        
        3. 自定义指令，自定义指令后可以在项目中多次使用。
        
        4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
        
        5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

        1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
        
        2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
        
        3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
        
        4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
        
        5. DI 依赖注入 如果代码压缩需要显示声明.

title: H5
date: 2016-02-22
categories:

  • 技术
  • 前端
    tags:
  • H5

HTML

问题汇总

  1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

  • checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

1
2
3
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

HBuilder

移动端的自适应

  1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放

     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

  2. 百分比布局

  3. 响应式页面的实现

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

  4. 页面使用相对字体

    两种常见的绝对单位em和rem

     rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
 em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em

     em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
 
 <div class="one">
     <span>第一层</span>
     <div class="two"> 
         <span>第二层</span>
         <div class="three">
             <span>第三层</span> 
         </div> 
     </div> 
 </div>
 
 body{ font-size: 20px; } 
 .one{ font-size: 1.5em; } 
 .two{ font-size: 0.5em; } 
 .three{ font-size: 2em; }
 
 结果：
 .one ---> 30px          1.5 * 20 = 30px
 .two ---> 15px          0.5 * 30 = 15px
 .three ---> 30px        2 * 15 = 30px

    相对长度单位rem

     body{ font-size: 20px; } 
 .one{ font-size: 1.5rem; } 
 .two{ font-size: 0.5rem; } 
 .three{ font-size: 2rem; }
 
 结果：
 .one ---> 30px 1.5 * 20 = 30px
 .two ---> 10px 0.5 * 20 = 10px
 .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh–viewport width/height

     1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的

     width:calc(100vw - 左侧宽度)
 // 注意的是运算符号的两边要有一个空格

  5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
// 重新设置字体
window.onresize = function(){  
    RootSize();  
}  
function RootSize(){ 
    //获取html元素
    var html = document.getElementsByTagName('html')[0]; 
    //屏幕的宽度（兼容处理）
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
    html.style.fontSize = w / 750 + "px";
}     
RootSize();
    对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
    对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。
  1. 整页背景图片
1
<body style="position: absolute;width: 100%;height: 100%;background: url(img/bg.jpg) no-repeat; background-size:100%;">
  1. 可以根据页面宽度变化，自动适应的图片按钮
1
2
<a style="position: absolute;margin-top: 45.5%;margin-left: 51%;width: 41%;height: 41%;background: url(img/share.png) 0 0 no-repeat; background-size:100%;" onclick="shareFB();">
</a>

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

  1. 滚动的子页面
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
          <div style="position: absolute; margin-top: 68.5%;width: 100%;height: 30.5%;">
		<div class="mui-scroll-wrapper" style="padding-left: 11%;top: 0%;width: 90%; height: 100%;">
			<div class="mui-scroll">
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
				<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
			</div>
		</div>
	</div>

<script src="js/mui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 

   	// 滚动条
   	(function($) {
              $('#scroll').scroll({
                  indicators: true
              });
              mui('.mui-scroll-wrapper').scroll({
                  deceleration: 0.0005
              });
          })(mui);
  1. 一键复制

https://github.com/zenorocha/clipboard.js/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   <a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

   $(document).ready(function(){      
 		//设置剪贴板数据
       var clipboard = new ClipboardJS('#copy_btn');       
       clipboard.on('success', function(e) {         
           alert('Copy "' + e.text +'" Success!');       
           e.clearSelection();      
       });
       clipboard.on('error', function(e) {         
           alert(e.text);     
           e.clearSelection();      
       });
  	});
  1. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/20vw为viewport width的20%/}

  1. 固定浮动在底部
1
2
   <a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>
  1. 图片变灰
1
2
3
4
5
6
7
8
9
10
   .gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

video 标签视频播放部分安卓手机播放不了

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
   var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
   autoFullScrenn(video.children[0]);
   
   
   var fullscreen = function(elem) {
       var prefix = 'webkit';
       if ( elem[prefix + 'EnterFullScreen'] ) {
           return prefix + 'EnterFullScreen';
       } else if( elem[prefix + 'RequestFullScreen'] ) {
           return prefix + 'RequestFullScreen';
       };
       return false;
   }
   
   function autoFullScrenn(v){
       var ua   = navigator.userAgent.toLowerCase();
       var Android = String(ua.match(/android/i)) == "android";
       // if(!Android) return;//非android系统不使用;
       var video  = v,doc = document;
       var fullscreenvideo = fullscreen(doc.createElement("video"));
       if(!fullscreen) {
           alert("不支持全屏模式");
           return;
       }
       video.addEventListener("webkitfullscreenchange",function(e){
           if(!doc.webkitIsFullScreen){//退出全屏暂停视频
               this.pause();
               // this.pause();
           };
       }, false);
       video.addEventListener("click", function(){
           this.play();
           video[fullscreenvideo]();
       }, false);
       video.addEventListener('ended',function(){
           doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
       },false);
   }

跨域访问

  1. 接口服务器端需要增加
1
2
3
4
5
6
response.setContentType("text/json; charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
  1. web客户端请求为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

mui.previewImage() 图片预览功能，与a标签href跳转有冲突

hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

  1. 下载打包sdk

    http://ask.dcloud.net.cn/article/103

  2. 启动带ADT的eclipse程序导入HBuilder-Hello

    如果ADT报错 This Android SDK requires A… ADT to the latest version.

    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop

    改小版本号

     plugin.version=22.0.0

  3. 直接运行程序

  4. 如果是新项目则需要改以下几个地方

    修改AndroidManifest.xml文件

     package="io.dcloud.HBuilder.seeker"
 
 所有 io.dcloud.HBuilder.seeker 的地方

    修改包名

     io.dcloud.HBuilder.seeker.wxapi

    打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中

    打开assets -> data下的control.xml文件，修改appid值

    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

    HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid

     "id": "seeker",

    HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的

React、Vue、Angular

  1. React

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

     1.声明式设计：React采用声明范式，可以轻松描述应用。
 
 2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
 
 3.灵活：React可以与已知的库或框架很好地配合。

    优点：

     1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
 
 2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
 
 3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
 
 4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
 
 5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
 
 6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

     React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

  2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

     1.轻量级的框架
 
 2.双向数据绑定
 
 3.指令
 
 4.插件化

    优点：

     1. 简单：官方文档很清晰，比 Angular 简单易学。
 
 2. 快速：异步批处理方式更新 DOM。
 
 3. 组合：用解耦的、可复用的组件组合你的应用程序。
 
 4. 紧凑：~18kb min+gzip，且无依赖。
 
 5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
 
 6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

     1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
 
 2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
 
 3. 不支持IE8

  3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

     1.良好的应用程序结构
 
 2.双向数据绑定
 
 3.指令
 
 4.HTML模板
 
 5.可嵌入、注入和测试

    优点：

     1. 模板功能强大丰富，自带了极其丰富的angular指令。
 
 2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
 
 3. 自定义指令，自定义指令后可以在项目中多次使用。
 
 4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
 
 5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

     1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
 
 2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
 
 3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
 
 4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
 
 5. DI 依赖注入 如果代码压缩需要显示声明.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
---
title: H5
date: 2016-02-22
categories:
- 技术
- 前端
tags:
- H5
---

***

# HTML

### 问题汇总

1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

* checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

$(“input[type=’checkbox’]”).prop(“checked”, function( i, val ) {
return !val;
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78





# HBuilder

### 移动端的自适应

1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放
    
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

2. 百分比布局

3. 响应式页面的实现    

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

4. 页面使用相对字体

    两种常见的绝对单位em和rem
    
        rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
        em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em
    
        em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
        
        <div class="one">
            <span>第一层</span>
            <div class="two"> 
                <span>第二层</span>
                <div class="three">
                    <span>第三层</span> 
                </div> 
            </div> 
        </div>
        
        body{ font-size: 20px; } 
        .one{ font-size: 1.5em; } 
        .two{ font-size: 0.5em; } 
        .three{ font-size: 2em; }
        
        结果：
        .one ---> 30px          1.5 * 20 = 30px
        .two ---> 15px          0.5 * 30 = 15px
        .three ---> 30px        2 * 15 = 30px

    相对长度单位rem
    
        body{ font-size: 20px; } 
        .one{ font-size: 1.5rem; } 
        .two{ font-size: 0.5rem; } 
        .three{ font-size: 2rem; }
        
        结果：
        .one ---> 30px 1.5 * 20 = 30px
        .two ---> 10px 0.5 * 20 = 10px
        .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh--viewport width/height
    
        1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的
    
        width:calc(100vw - 左侧宽度)
        // 注意的是运算符号的两边要有一个空格


5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

// 重新设置字体
window.onresize = function(){
RootSize();
}
function RootSize(){
//获取html元素
var html = document.getElementsByTagName(‘html’)[0];
//屏幕的宽度（兼容处理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
html.style.fontSize = w / 750 + “px”;
}
RootSize();

1
2
3
4
5
6
7

        对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
        对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。

6. 整页背景图片


1
2
3
4

7. 可以根据页面宽度变化，自动适应的图片按钮


1
2
3
4
5
6

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

8. 滚动的子页面


XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

XXXXXXXX: XXXXXXXXX

	<script src="js/mui.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
	
	   	// 滚动条
	   	(function($) {
            $('#scroll').scroll({
                indicators: true
            });
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });
        })(mui);

1
2
3
4
5

9. 一键复制

https://github.com/zenorocha/clipboard.js/

<a id="copy_btn" data-clipboard-action="copy" data-clipboard-text="1231321" style="position: absolute;margin-top: 8.5%;margin-left: 74%;width: 12%;height: 12%;background: url(img/copy.png) 0 0 no-repeat; background-size:100%;">
</a>
	
<script src="js/clipboard.min.js"></script>

$(document).ready(function(){      
		//设置剪贴板数据
    var clipboard = new ClipboardJS('#copy_btn');       
    clipboard.on('success', function(e) {         
        alert('Copy "' + e.text +'" Success!');       
        e.clearSelection();      
    });
    clipboard.on('error', function(e) {         
        alert(e.text);     
        e.clearSelection();      
    });
	});

1
2
3
4
5
6
7
8

10. 通过宽高单位来设置(手机上十分好用，避免使用百分比)

div{width:20vw;height:20vw;/*20vw为viewport width的20%*/}


11. 固定浮动在底部

<a id="download" style="bottom:2vw;z-index:100;position: fixed!important;margin-left: 9vw;width: 41vw;height: 22vw;background: url(img/download.png) 0 0 no-repeat; background-size:100%;">
</a>

1
2
3

12. 图片变灰

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
	
    filter: gray;
}

1
2
3
4
5
6



### video 标签视频播放部分安卓手机播放不了


var video = document.getElementById("story-id-video");
video.innerHTML = "<video controls class=\"story-content-video\"><source src=" + url + " type=\"video/mp4\" /></video>";
autoFullScrenn(video.children[0]);


var fullscreen = function(elem) {
    var prefix = 'webkit';
    if ( elem[prefix + 'EnterFullScreen'] ) {
        return prefix + 'EnterFullScreen';
    } else if( elem[prefix + 'RequestFullScreen'] ) {
        return prefix + 'RequestFullScreen';
    };
    return false;
}

function autoFullScrenn(v){
    var ua   = navigator.userAgent.toLowerCase();
    var Android = String(ua.match(/android/i)) == "android";
    // if(!Android) return;//非android系统不使用;
    var video  = v,doc = document;
    var fullscreenvideo = fullscreen(doc.createElement("video"));
    if(!fullscreen) {
        alert("不支持全屏模式");
        return;
    }
    video.addEventListener("webkitfullscreenchange",function(e){
        if(!doc.webkitIsFullScreen){//退出全屏暂停视频
            this.pause();
            // this.pause();
        };
    }, false);
    video.addEventListener("click", function(){
        this.play();
        video[fullscreenvideo]();
    }, false);
    video.addEventListener('ended',function(){
        doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
    },false);
}

1
2
3
4
5
6
7
8



### 跨域访问

1. 接口服务器端需要增加


    response.setContentType("text/json; charset=utf-8");
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Allow", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");

1
2
3
4
5

        
2. web客户端请求为


mui.ajax('http://114.55.74.44:8980/api/banner/1/list', {
	data: {
		categoryId: 1
	},
	dataType: 'json', //服务器返回json格式数据
	type: 'post', //HTTP请求类型
	timeout: 5000, //超时时间设置为10秒；
	success: function(data) {
		if (!data)
			return;
		
	},
	error: function(xhr, type, errorThrown) {
		//异常处理；
		console.log(type);
	}
});

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

    
### mui.previewImage() 图片预览功能，与a标签href跳转有冲突

### hbuilder 打包apk

参考： http://ask.dcloud.net.cn/article/38

1. 下载打包sdk
	
    http://ask.dcloud.net.cn/article/103
    
2. 启动带ADT的eclipse程序导入HBuilder-Hello

	如果ADT报错 This Android SDK requires A... ADT to the latest version.
    
    进入E:\adt-bundle-windows-x86_64-20131030\sdk\tools\lib目录，修改文件plugin.prop
    
    改小版本号
    
    	plugin.version=22.0.0

3. 直接运行程序

4. 如果是新项目则需要改以下几个地方

	修改AndroidManifest.xml文件
    
    	package="io.dcloud.HBuilder.seeker"
        
        所有 io.dcloud.HBuilder.seeker 的地方
        
    修改包名
    
    	io.dcloud.HBuilder.seeker.wxapi

	打开assets -> apps 目录，将下面“HelloH5”目录名称修改为应用manifest.json中的id名称（这步非常重要，否则会导致应用无法正常启动），并将所有应用资源拷贝到其下的www目录中
    
    打开assets -> data下的control.xml文件，修改appid值
    
    打开res -> values -> strings.xml文件，修改“app_name”字段值，该值为安装到手机上桌面显示的应用名称

	HBuilder的项目中，修改项目文件manifest.json里面的id，既是appid
    
    	"id": "seeker",
        
	HBuilder的项目中选中项目 选择 发行 -> 生成本地打包app资源 这个资源是拷贝到assets -> apps 目录中的




















# React、Vue、Angular

1. React 

    起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

    特性：

        1.声明式设计：React采用声明范式，可以轻松描述应用。
        
        2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
        
        3.灵活：React可以与已知的库或框架很好地配合。

    优点：

        1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
        
        2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
        
        3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
        
        4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
        
        5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
        
        6兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点：

        React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

2. Vue

    是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

    特性：

        1.轻量级的框架
        
        2.双向数据绑定
        
        3.指令
        
        4.插件化

    优点：

        1. 简单：官方文档很清晰，比 Angular 简单易学。
        
        2. 快速：异步批处理方式更新 DOM。
        
        3. 组合：用解耦的、可复用的组件组合你的应用程序。
        
        4. 紧凑：~18kb min+gzip，且无依赖。
        
        5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
        
        6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

    缺点：

        1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
        
        2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
        
        3. 不支持IE8

3. Angular

    是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

    特性：

        1.良好的应用程序结构
        
        2.双向数据绑定
        
        3.指令
        
        4.HTML模板
        
        5.可嵌入、注入和测试

    优点：

        1. 模板功能强大丰富，自带了极其丰富的angular指令。
        
        2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
        
        3. 自定义指令，自定义指令后可以在项目中多次使用。
        
        4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
        
        5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

    缺点：

        1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
        
        2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
        
        3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
        
        4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
        
        5. DI 依赖注入 如果代码压缩需要显示声明.

title: H5
date: 2016-02-22
categories:

  • 技术
  • 前端
    tags:
  • H5

HTML

问题汇总

  1. 关于table里面的checkbox选择无效的问题

https://blog.csdn.net/alanfancy/article/details/49997271

  • checkbox第一次选中,再取消,是正常的,再次选择的时候,就会出现选不上的情况

后来查AIP, 发现prop有这样一个方法

1
2
3
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

HBuilder

移动端的自适应

  1. 在HTML的头部加入meta标签

    告诉浏览器网页宽度等于设备屏幕宽度，且不进行缩放

     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

  2. 百分比布局

  3. 响应式页面的实现

    一种是利用媒体查询，另外一种是bootstrap下的栅格布局

  4. 页面使用相对字体

    两种常见的绝对单位em和rem

     rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
 em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

    相对长度单位em

     em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。
 
 <div class="one">
     <span>第一层</span>
     <div class="two"> 
         <span>第二层</span>
         <div class="three">
             <span>第三层</span> 
         </div> 
     </div> 
 </div>
 
 body{ font-size: 20px; } 
 .one{ font-size: 1.5em; } 
 .two{ font-size: 0.5em; } 
 .three{ font-size: 2em; }
 
 结果：
 .one ---> 30px          1.5 * 20 = 30px
 .two ---> 15px          0.5 * 30 = 15px
 .three ---> 30px        2 * 15 = 30px

    相对长度单位rem

     body{ font-size: 20px; } 
 .one{ font-size: 1.5rem; } 
 .two{ font-size: 0.5rem; } 
 .three{ font-size: 2rem; }
 
 结果：
 .one ---> 30px 1.5 * 20 = 30px
 .two ---> 10px 0.5 * 20 = 10px
 .three ---> 40px 2 * 20 = 40px

    第三种属性vw和vh–viewport width/height

     1vw等于视口宽度的1%

    css属性我们也应该使用上clac()，其是用来计算属性宽高的

     width:calc(100vw - 左侧宽度)
 // 注意的是运算符号的两边要有一个空格

  5. Js动态设置rem来实现移动端字体的自适应

    利用Js获取设备屏幕的宽度，并根据屏幕的宽度动态改变根元素html的font-siz属性的作用

1
2
3
4
5
6
7
8
9
10
11
12
13
// 重新设置字体
window.onresize = function(){  
    RootSize();  
}  
function RootSize(){ 
    //获取html元素
    var html = document.getElementsByTagName('html')[0]; 
    //屏幕的宽度（兼容处理）
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
    html.style.fontSize = w / 750 + "px";
}     
RootSize();
    对于iphone6而言，屏幕尺寸为750，那么在iPhone6下html的font-size为1px,所以1rem = 1px;
    对于iPhone5而言，屏幕尺寸为640，那么在iPhone5下html的font-size为640/750 = 0.85333px，所以1rem = 0.85333px。
  1. 整页背景图片
1
<body style="position: absolute;width: 100%;height: 100%;background: url(img/bg.jpg) no-repeat; background-size:100%;">
  1. 可以根据页面宽度变化，自动适应的图片按钮
1
2
<a style="position: absolute;margin-top: 45.5%;margin-left: 51%;width: 41%;height: 41%;background: url(img/share.png) 0 0 no-repeat; background-size:100%;" onclick="shareFB();">
</a>

==注意height: 41%;如果height值太大，会导致背景页面的下方留有很大空白==

  1. 滚动的子页面
            <div style="position: absolute; margin-top: 68.5%;width: 100%;height: 30.5%;">
				<div class="mui-scroll-wrapper" style="padding-left: 11%;top: 0%;width: 90%; height: 100%;">
					<div class="mui-scroll">
						<p><b>XXXXXXXX:</b> XXXXXXXXX</p>
						<p><b>XXXXXXXX:</b> XXXXXXX