做APP遇到的各种坑----有一点记一点

第一次使用Mui
1.mui.init()加载子页面实现双WebView
2.使用art-template模板冲突:
1）事件监听：在页面初始化时添加事件监听
2）初始化在前，自定义监听事件在后
3）自定义监听事件后——模板元素渲染后通过innerHTML替换
4）只要被包含在内部的标签都不能添加事件监听

<!--html-->
<script id="" type="text/html">
<button id="test"></button>
</script>

<script id="" type="text/javascript">
document.getElementById("test").addEventListener("tap",function(){
//不能够被触发
alert()
})
</script>

3.mui.plusReady()页面第一次初始化需要执行的函数定义在里面
mui().on()监听不是必须再Ready()定义，但是plus.*需要在mui()下定义；错误：找不到Plus
不使用input type=“file” 使用canvas图片上传（相册）
var img = new Image();//使用构造函数定义一个Img减少冗余，
但是canvas和img在一个函数里面，切必须加Img.o nload =function(){canvas…//code区域}//这个坑有点大

	function getBase64Image(url) {
//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
				var Img = new Image()
				var dataURL = ''
				Img.src = url;
				Img.onload = function() { //要先确保图片完整获取到，这是个异步事件
					var canvas = document.createElement("canvas"); //创建canvas元素
					canvas.width =Img.width; //确保canvas的尺寸和图片一样
					canvas.height =Img.height;
					console.log(Img.width)
					canvas.getContext("2d").drawImage(Img, 0, 0, canvas.width , canvas.height); //将图片绘制到canvas中
					dataURL = canvas.toDataURL('image/png'); //转换图片为dataURL
					console.log(dataURL) 
			//这里注意：图片大于1M时后台接收数据为空（ajax-async:false也一样）
			//比如 900kb-jpg后台==base64data    1M-jpg后台==null
			//原因未找到 暂时不能传1m以上图片设置为
			//就是 base64压缩 慢半拍
					return dataURL.replace('data:image/png:base64,','');
				}

			}

js 字符拼接坑 10+’s‘ 默认 ==‘字符串’

var div = document.getElementById('id');
var height = div.offsetHeight + 200;
 //  错误的      符号(单、双、单)
div.style.height  =  ' " '+height+'px " ' 
//正确的
div.style.height = height+'px'

回调函数简单介绍以及使用
用过，用得好很多，今天想写一个却不知道怎么弄，于是跑遍各个论坛看到一条评论（各位作者谈天说雾不接地气）
//适用于耗时长的操作：传输文件

	
	function  add (num1, num2,callback){
		var sum = num1 + sum2;
		callback(sum);
		//callback?callback(sum):null;
	};
	
	add(1,2,function(data){
		console(data)// 打印结果：3
	});

类似的函数回调：例子

	mui.ajax({
		url:' ',
		success:function(data){
			//code
		}
	})

js-div最简单的自动加长

$('#content').keyup(function() {
	//自动换行
	var off = this.offsetHeight;
	var scr = this.scrollHeight
	if(scr > off) {
		this.style.height = (off + 15) + "px"
	}
})

最简单的获取光标位置-添加字符串（除了IE都支持的方法）

var range
range = window.getSelection().getRangeAt(0); //找到焦点位置
var span = document.createElement('span').inertHtml = "123"
range.insertNode(span)

art-template include简单使用

<div id="body">
			<script id="main" type="text/html">
							{{title}}
				{{include 'user'}}
			</script>
			

			<script id="user" type="text/html">
							{{user.name}}
							{{user.age}}
			</script>
		</div>

var data = {
			title: 'title',
			user: {
				name: 'name',
				age: '0'
			}
		}
var temp = template('main', data)
document.getElementById('body').innerHTML = temp

art-template 变量

<!--简单实用方式-->
 <!--自定义变量 -->
{{if 1==2 }}
  	{{set id=1}}
  	 <!--{{id+10}}-->     	 <!--模板变量使用操作需要注释-->
  	 <p>{{id}}<p>			 <!--true等于11-->   
{{else}}
 	 {{set id=2}}
 	 <!--{{id+100}}-->  
 	 <p>{{id}}<p>			 <!--false等于102-->
{{/if}}

–预加载后需要返回时候需要重新刷新

location.reload()

–预加载不是很好用(不如create web view 至少免了加载时做正在加载样式用自带)

不能 关闭完后预加载就失效
mui.webview.currentWebview.close()

遇到坑在加 做完为止