關於移動端h5開發小總結

1.input標籤：

頁面背景圖安卓機上input調起鍵盤css屬性值不能用vh單位（安卓4.4如下不支持vh），input不能是absolute，不然壓縮背景圖或者背景圖不和input一同被頂起。

input調起鍵盤遮擋輸入框解決辦法：

focus函數裏：
setTimeout(function(){
        let inputOne = $('.input-one')
        inputOne.scrollIntoView(false) // ios須要設置
        inputOne.scrollIntoViewIfNeeded()
},200)

 

2.一些好用第三方插件：

h5跳app魔窗mLink.JS: （測試打包測試的app要把短鏈KEY放進去）

<script src="https://static.mlinks.cc/scripts/dist/mlink.min.js"></script>
// 魔窗app喚起
         new Mlink({
          mlink:'https://ahv8ke.mlinks.cc/ABCD', //短鏈地址，ABCD爲短鏈KEY
          button:document.querySelector('#btn'), // 某點擊喚起按鈕
          params: {
            schemeurl: encodeURIComponent(''), //傳給app的參數
          }
        })

3.vue組件中css：

<style scoped> // Add "scoped" attribute to limit CSS to this component only

4.一些js小技巧：

Array.prototype.slice.call( arguments )：類數組對象轉 => 數組 === ES6中Array.from( arguments )方法

Object.prototype.toString.call():檢驗js數據類型，比typeof更嚴謹

Array.prototype.slice(): copy數組 === es6展開運算符[...arr]

5.在微信中打開h5頁面,阻止微信touch默認事件:

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false) // 阻止瀏覽器默認的touch函數方法

可用iscroll.js寫的touch事件

 6.Hybrid開發js調用native組件總結:

1.建立全局對象bridge,具備call(調用native方法)和register(可傳callback,託管native某些方法)兩個屬性

2.分別獲取ios或者安卓的bridge(分別用的github上的WebViewJavascriptBridge和jsBridge橋樑)

3.根據環境暴露bridge object,把從ios或者安卓獲取的callHandler和registerHandler傳給全局bridge對象

 WebViewJavascriptBridge具體實現方法:

1.iOS可用iframe作請求,url:://native函數名?參數

2..安卓則能夠經過webview.addJavascriptInterface方法把方法注入到window上

調取第三方登陸的過程:

受權網絡標準:OAuth