关于移动端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