最近混合开发做了一个H5的存钱大单页业务，涉及的页面大概有30几个。很多接口涉及到需要跟不同的app的不同类型的app js sdk打交道，为了方便我们一套H5代码多app接入，里面涉及到很多问题，总结记录一下

调用照相机后，回调只有图片base64编码后的字符串，如何获取图片的实际大小

function getImageWidthHeight (str) {
  var img = new Image
  return new Promise ((resolve, reject) => {
     img.onload = () =>{
      resolve({
        width: img.width,
        height: img.height
      }) 
    }
    img.onerror = () => {
      reject(new Error('图片加载失败'))
    }
     img.src = str
  })
}

多SDK的全局接口封装

// 回调方法管理器
class interface {
  constructor () {
    this.fns = new Map
  },
  register (cate, plantfrom, interfaceName, fn) {
    var key = `${cate}-${plantform}-${interfaceName}`
    if (this.fns.has(key)) {
      this.fns.set(key, fn)
    } else {
      this.fns.set(key, fn)
    }
  },
  getFn (cate, plantfrom, interfaceName) {
    var key = `${cate}-${plantform}-${interfaceName}`
    return this.fns.get(key)
  }
}
interface.register(cate, plantfrom, interfaceName, fn) // 接口函数回调函数注册器

// 全局接口包装
全局注入一个配置项 ENV  跟进ENV 判断是接入app平台和app
function onCreame()
{
  switch(ENV.type) {
    case 'ljs'
          creame1();
        break
    case 'xiaomi'
        creame2()
        break;
  }
}

输出框校验的问题

parseFloat('5000.00000000000000000000001') === 5000
// 判断钱的输入框的时候，会出现parseFloat失效
// 因为js 使用的是unicode 浮点数出现精度问题，所以检验输入框是否是合法的字符串，建议使用验证组件

推荐一个非常好用的异步验证组件

ios下 settimeout focus 无法调起系统键盘

stackoverflow

ios 下 transform：3d 变化 引起z-index变化

大神介绍

移动端click 点击延迟300 ms的问题

引用fastclick 组件来优化点击，但是fastclick本身有一些问题。需要修改源码，主要是浏览器开始支持passive

js队列加载器

借助promise 加载方式，写了一个异步和同步的加载模块
可以参见 js异步加载

回调函数流程控制

输入框高度自动增加的判断逻辑

移动端滚动加载组装件 better-scroll

移动端输入框总结

移动端键盘掉起汇总

ios

<input  type="text" pattern=“[0-9]*”/>

完全掉起数字键盘

<input type="number" />

number并不是完全掉起数字键盘

安卓

<input  type="text" pattern=“[0-9]*”/>

会掉起全键盘

微信图片_20180905173752.jpg

<input type="number" />

会掉起数字键盘

微信图片_20180905173743.jpg

输入框被键盘挡住 安卓下

// 一种思路
  window.addEventListener('resize', () => {
      setTimeout(() => {
        document.activeElement.scrollIntoViewIfNeed() 
      }, 0)
  }, false)
// 第二种思路
当input框获得焦点后
把body高度设置成 100000px
把input滚动到可视区域
同时监听、move事件，如果不是拖动input拖动，就让input 失去焦点
让body高度变成auto
键盘收起来

输入框掉起数字键盘和全键盘的处理