常用知识点 · 多谷微信平台开发指南

#常用知识点 [TOC] ##常用meta * `<meta content="yes" name="apple-mobile-web-app-capable">` IOS中safari允许全屏浏览 * `<meta content="black" name="apple-mobile-web-app-status-bar-style">` IOS中Safari顶端状态条样式 * `<meta content="telephone=no" name="format-detection">` 忽略将数字变为电话号码 * `<meta content="email=no" name="format-detection">` 忽略识别email * `<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>`移动端加上这个标签才是真正的自适应 ##css部分 * `body`如果设置`height:100%;overflow:hidden`是依然可以滑动的，如果需禁止，要再加一层div设置 `height:100%`加`overflow：hidden（html,body加height:100%）` ，这样元素超出body的高度也不能滑动了 * 去除webkit的滚动条 ```css element::-webkit-scrollbar{ display: none; } ``` * 去除button在ios上的默认样式 ```css -webkit-appearance: none; border-radius: 0 ``` * `webkit-tap-highlight-color:rgba(0,0,0,0);`不想让按钮touch时有蓝色的边框 * 如果要用到`fixed`譬如导航等，可以用`absolute`达到一样的效果，把body设为100%；将元素absolute到body上即可 * 在移动端做动画效果的话，如果通过改变绝对定位的top，或者margin的话做出来的效果很差，很不流畅，而使用css3的transition或者animation的效果将会非常棒（这一方面IOS比android又要好不少） * 使用图片时，会发现图片下总是有大概4px的空白，（原因据说图片是inline，触发baseline什么的。。。）常用解决方法有(http://blog.sina.com.cn/s/blog_4990aec60100rckt.html) ```css img{display:block}； img{vertical-align:top}也可取其他几个值，视情况而定 ``` * 使用 a 标签的话，尽量让 a 标签 block ，尽量让用户可点击区域最大化 * 在iOS中，当你点击比如 input 准备输入时，虚拟键盘弹出，整个视窗的高度就会变为减去键盘的高度，加入你在底部有fixed的元素比如btn，这个元素就会跑上来，一般都不会太美观。我是当focus时就把它设为absolute，视情况而定 * 禁止用户选中文字 -webkit-user-select:none * 当你把input设为 width:100%时，有时可能会遇到input的宽度超出了屏幕，这时可对input加一个属性 box-sizing:border-box * 要table的td用col设置了宽度后超出部分隐藏的话给table加属性table-layout:fixed（固定宽度布局） * 如果想改变 placeholder 里的文字，需要用css伪类 ::-webkit-input-placeholder{color:#ccc} > 关于box-sizing:border-box，此属性是把边框的高宽包含在盒子的高宽中，假如你设置两个元素float且各占50%，又都有border时，用这个属性就可以完美地让它们能显示在同一行 ##常用js * 如果使用jquery绑定touch事件的话，获取`touchstart`，`touchmove`的触点坐标用 `e.originalEvent.targetTouches[0].pageX`，获取touchend则用 `e.originalEvent.changedTouches[0].pageX` * 利用style获取获取`transform`的`rotate`值`parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1])`如果页面一开始没有style值，rotate是写在CSS里的，需要用到getComputedStyle * 有些版本的iphone4中， audio和video默认播放事件不会触发，比如使用window.onload或计时器等都不能触发播放，必须用JS写事件让用户手动点击触发才会开始播放 * 想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault() 就会 e 报错，处理方法为 ```javascript touchmove:function(e,参数一){ var e=arguments[0] e.preventDefault() } ``` * HTML5的新js API有新的选择器，比如`querySelector(".class #id")`和`querySelectorAll(".class element")`。 * 点击一个元素时，使用touchstart会立即触发，而使用click则用有大概0.3s的延迟 * 判断是否来自微信浏览器 ```javascript function isFromWeiXin() { var ua = navigator.userAgent.toLowerCase(); return ua.match(/MicroMessenger/i) == "micromessenger"; } ``` * 判断手机的类型 (TODO) * 微信浏览器里均不能打开下载的链接，需在浏览器打开 * 如果在网页里嵌套一个iframe，src为其他的网址等，当在微信浏览器打开时，如果irame里的页面过大，则iframe的src不能加载 * ##应用目录结构推荐 ###基本目录结构1 ``` ├── css ├── images ├── js ├── public.html ├── index.html └── about.html ``` ###基本目录结构2 ``` ├── styles ├── images ├── scripts ├── public.html ├── index.html └── about.html ``` ##页面范例推荐 ~~~html <!DOCTYPE html> <html lang="zh-CN"> <head>  <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta name="format-detection" content="telephone=no" /> <meta content="email=no" name="format-detection"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>title</title> <link rel="stylesheet" href="style.css"> </head> <body>  <script src="app.js"></script> </body> </html> ~~~