移动端开发遇到的一些问题 ios 微信公众号 h5

你们移动端开发公众号遇到了哪些问题呢？

ios:
（1）原生input输入框难获取焦点（点了几次才选得中）
原因：使用了FastClick的原因（FastClick的bug）
解决：

import FastClick from 'fastclick'
FastClick.prototype.focus = function(targetElement) {
  targetElement.focus();
};
FastClick.attach(document.body);  //重点：添加这一行

（2）收起键盘后页面下方有空白
解决：ios 在键盘收起的时候input 会失去焦点（安卓不会），所以可以通过input 的focus 和 blur 事件来判断键盘的状态，收起键盘，输入框失去焦点后滚动到可视区域 @blur scrollIntoView()

//input.vue
    <input
      class="c6 f14"
      v-bind="$attrs"
      :value="value"
      @blur="onBlur(value)"
      @input="e => $emit('input', e.target.value)"
      :style="{ textAlign: align }"
    />
import onBlur from "./onBlur";

onBlur.js
export default {
  methods: {
    onBlur(value) {
      this.$emit("blur",value)
      setTimeout(() => {
        if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) return
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          document.activeElement.scrollIntoView()
        }
      }, 100)
    }
  }
}

（3）ios滚动不顺畅
解决：
当你用overflow-y:scorll，发现滚动的效果很卡可以使用-webkit-overflow-scrolling:touch，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅。
（4）连续几个页面填写表单，最后一步提交表单完成后不希望按返回键还能返回上个页面（填写表单的页面）
解决：修改路由栈，再回来就关掉页面

//successed.vue 提交表单的页面
  async created() {
    this.getInfo();
    // 修改历史，预约成功后返回只能回首页
    const currentHref = window.location.href;
    const hrefWithClose =
      currentHref + (this.$route.query.info ? "&" : "?") + "close=true";
    window.history.pushState(null, "", hrefWithClose);   //close
    window.history.pushState(null, "", window.location.pathname + "#/home"); //去主页
    window.history.pushState(null, "", currentHref);//当前页面
  },
    // 预约成功返回首页再返回成功则在路由进入前关掉页面
  beforeRouteEnter(to, from, next) {
    if (window.location.href.indexOf("close=true") !== -1) {
      wx.closeWindow();  //公众号
    } else {
      next();
    }
  }

（5）移动端调试
移动端调试是不是很麻烦呢，不要慌安装个vconsole插件就可以看到控制台打印、接口请求等了
解决：

npm install    vconsole

// main.js
function runApp () {
  new Vue({
    router,
    i18n,    
    // store,
    render: h => h(App)
  }).$mount('#app')

}

/**
 * 本地开发环境 或者 网址添加 ?debug 以开启调试
 */
if ((isLocal && !/localhost/.test(location.host)) || location.search.match('debug')) {
  import(/* webpackChunkName: "vconsole" */ 'vconsole').then(VConsole => {
    new VConsole.default()
    runApp()
  })
} else { 
  runApp()
}

（6）移动端表单验证用什么插件呢？
解决：

npm install vee-validate

差不多了！！！！！！！！！！！！！！！！！下次再出个封装移动端input组件的文文吧！