常用知識點 · 多谷微信平臺開發指南

#常用知識點 [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> ~~~