【前端】ionic使用记录

学习记录

教程：Ionic实战：基于AngularJS的移动混合应用开发

仓库地址：https://github.com/ionic-in-action

论坛：https://www.manning.com/books/ionic-in-action

ionic图标：https://github.com/ionic-team/ionicons/tree/v1.1

环境

# 安装node版本管理
npm install -g nvm
# 安装指定版本node
nvm install 0.12.0
# 切换到指定版本node
nvm use 0.12.0
# npm查看源
npm get registry
# 切换npm成淘宝源
npm config set registry http://registry.npm.taobao.org
# 安装Ionic CLI和Cordova
npm install -g cordova@4.2.0 ionic@1.3.22
# 查看版本
cordoova -v
ionic -v

问题1： nvm install报错Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt

解决办法：where nvm 找到nvm的安装路径，在同级目录下找到或者新建settings.txt，修改源为淘宝源

node_mirror: npm.taobao.org/mirrors/node/
npm_mirror: npm.taobao.org/mirrors/npm/

问题2：ionic无法安装成功

由于ionic已被废弃，可能淘宝源不记录废弃的包，这里我实在没有啥解决方法，只能科学上网了。

创建应用

# 后面可指定模板，指定默认是 tabs（创建后问是否需要创建账号忽略即可）
ionic start ionic_learning
cd ionic_learning
# 添加支持平台
ionic platform add android
# 构建APP
ionic build android
# 在模拟器上执行APP(添加-l -c可热重载，需要提前安装好模拟器)
ionic emulate android
# 在真机上执行APP(添加-l -c可热重载，需要提前开启USB调试并数据线连接)
# ionic run android

当然大多数情况下我们只需要在浏览器调试好之后再到真机去调试：ionic serve

常用组件

日期选择组件

日期选择组件：https://github.com/katemihalikova/ion-datetime-picker

模仿minit-ui做的日期选择组件：

.popup-container{
  &.datetime-picker-popup {
    align-items: flex-end;
  
    .popup {
      width: 100%;
      border-radius: 0;
  
      .popup-head, .popup-buttons {
        display: none;
      }

      .popup-body {
        text-align: left;
        padding: 0;

        .picker-toolbar {
          border-bottom: solid 1px #eaeaea;
          height: 40px;

          .mint-datetime-cancel {
            float: left;
          }

          .mint-datetime-confirm {
            float: right;
          }

          .mint-datetime-action {
            display: inline-block;
            width: 50%;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            color: var(--main-color, $main-color);
          }
        }

        .picker-items {
          display: flex;
          justify-content: center;
          padding: 0;
          text-align: right;
          font-size: 24px;
          position: relative;

          .picker-slot {
              font-size: 18px;
              height: 252px;
              overflow: hidden;
              position: relative;
              max-height: 100%;
              flex: 1 1 0%;

              &.picker-slot-center {
                text-align: center;
              }

              .picker-slot-wrapper {
                  transform: translate(0,0) translateZ(0);
                  transition-duration: 0.3s;
                  transition-timing-function: ease-out;
                  backface-visibility: hidden;

                  .picker-item {
                      height: 36px;
                      line-height: 36px;
                      padding: 0;
                      white-space: nowrap;
                      position: relative;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      color: #707274;
                      left: 0;
                      top: 0;
                      width: 100%;
                      box-sizing: border-box;
                      transition-duration: .3s;
                      backface-visibility: hidden;

                      &.picker-selected {
                        // color: #000;
                        color: red;
                        transform: translate3d(0, 0, 0) rotateX(0);
                      }
                  }
              }
          }

          .picker-center-highlight {
              height: 36px; 
              margin-top: -18px;
              box-sizing: border-box;
              position: absolute;
              left: 0;
              width: 100%;
              top: 50%;
              margin-top: -18px;
              pointer-events: none;
              height: 36px;

              &:before, &:after {
                  content: '';
                  position: absolute;
                  height: 1px;
                  width: 100%;
                  background-color: #eaeaea;
                  display: block;
                  z-index: 15;
                  transform: scaleY(0.5);
              }

              &:before {
                  left: 0;
                  top: 0;
                  bottom: auto;
                  right: auto;
              }

              &:after {
                  left: 0;
                  bottom: 0;
                  right: auto;
                  top: auto;
              }
          }
        }
      }
    }
  }
}

const {iScroll: IScroll} = require('iscroll')
const angular = require('angular')

// 求时间段交集(time1, time2)
function getTimeIntersection([start1 = -Infinity, end1 = Infinity], [start2 = -Infinity, end2 = Infinity]) {
  if (start1 > end1) [start1, end1] = [end1, start1]
  if (start2 > end2) [start2, end2] = [end2, start2]

  // 无交集(time2在time1的左右)
  if (end1 < start2 || start1 > end2) return []

  // 完全相交(time2在time1内部或time1在time2内部)
  if (start1 <= start2 && end1 >= end2) return [start2, end2]
  if (start2 <= start1 && end2 >= end1) return [start1, end1]

  // 部分相交(time2仅开始或者结束点在time1内)
  if (start2 <= end1 && start2 >= start1) return [start2, end1]
  if (end2 <= end1 && end2 >= start1) return [start1, end2]
}

// 日期转数组
function splitDate(date) {
  return [
    date.getFullYear(), date.getMonth(), date.getDate(),
    date.getHours(), date.getMinutes(), date.getSeconds()
  ]
}

function addYears(date, num) {
  const [year, month, day, hour, minute, second] = [
    date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()
  ]
  return new Date(year + num, month, day, hour, minute, second)
}

module.exports = ['$q', function($q) {
  const afterDomLoad = function(selector) {
    if (typeof selector !== 'string' || !selector) return $q.reject('selector cannot is invalid')

    const defer = $q.defer()
    const interval = setInterval(_ => {
      const elList = document.querySelectorAll(selector)
      if (elList) {
        clearInterval(interval)
        defer.resolve(elList)
      }
    }, 500)
    return defer.promise
  }
  const template = `
  <div class="picker-toolbar">
    <span class="mint-datetime-action mint-datetime-cancel" ng-click="cancel()">取消</span>
    <span class="mint-datetime-action mint-datetime-confirm" ng-click="confirm()">确定</span>
  </div>
  <div class="picker-items">
    <div class="picker-slot picker-slot-center" ng-show="view.isShow" 
        ng-repeat="view in viewData track by $index">
      <div class="picker-slot-wrapper">
        <div class="picker-item" ng-class="{'picker-selected': view.selectedIndex + 3 === $index}" 
            ng-repeat="item in view.data track by $index">{{ item }}</div>
      </div>
    </div>
    <div class="picker-center-highlight"></div>
  `

  return {
    restrict: 'AE',
    require: 'ngModel',
    scope: {
      modelDate: '=ngModel',
      dateRange: '=?' // [start, end]
    },
    controller: ['$scope', '$ionicPopup', '$timeout', function($scope, $ionicPopup, $timeout) {
      /**
       * {data: [], selectedIndex: '', iscroll: null, el: null, isShow: false}
      */
      $scope.viewData = [{}, {}, {}, {}, {}, {}]
      $scope.itemHeight = 36
      $scope.year = $scope.month = $scope.day = $scope.hour = $scope.minute = $scope.second = undefined
      let dateTimePicker = null

      function generateViewData(date) {
        const dateRange = $scope.dateRange
        const dateArray = angular.isArray(date) ? date : splitDate(date)
        const [year, month, day, hour, minute, second] = dateArray

        let preDateArray = [$scope.year, $scope.month, $scope.day, $scope.hour, $scope.minute, $scope.second]
        // if (JSON.stringify(preDateArray) === JSON.stringify(dateArray)) return

        function updateYears() {
          const len = dateRange[1].getFullYear() - dateRange[0].getFullYear() + 1
          const years = [...new Array(len).keys()].map(item => String(dateRange[0].getFullYear() + item).padStart(4, '0'))

          // if (!years.length) debugger
          $scope.viewData[0].data = ['', '', ''].concat(years).concat(['', '', ''])
          $scope.viewData[0].selectedIndex = years.findIndex(item => (item === String(year).padStart(4, '0')))
          $scope.viewData[0].selectedIndex = !~$scope.viewData[0].selectedIndex ? 0 : $scope.viewData[0].selectedIndex
          $scope.viewData[0].isShow = $scope.dateEnabled
          $scope.viewData[0].iscroll && setTimeout(_ => {
            $scope.viewData[1].iscroll.refresh()
            $scope.viewData[1].iscroll.scrollToPage(0, $scope.viewData[1].selectedIndex)
          }, 300)
          $scope.year = parseInt(years[$scope.viewData[0].selectedIndex])
        }
        function updateMonths() {
          let months = [...new Array(12).keys()].map(item => {
            const curTime = new Date($scope.year, item, 1, 0, 0, 0)
            const startTimeArr = splitDate(dateRange[0]).slice(0, 2).concat(1, 0, 0, 0)
            const endTimeArr = splitDate(dateRange[1]).slice(0, 2).concat(1, 0, 0, 0)
            if (curTime >= new Date(...startTimeArr) && curTime <= new Date(...endTimeArr)) {
              return String(item + 1).padStart(2, '0')
            }
          })
          months = months.filter(item => item)
          // if (!months.length) debugger
          $scope.viewData[1].data = ['', '', ''].concat(months).concat(['', '', ''])
          $scope.viewData[1].selectedIndex = months.findIndex(item => (item === String(month + 1).padStart(2, '0')))
          $scope.viewData[1].selectedIndex = !~$scope.viewData[1].selectedIndex ? 0 : $scope.viewData[1].selectedIndex
          $scope.viewData[1].isShow = $scope.dateEnabled
          $scope.viewData[1].iscroll && setTimeout(_ => {
            $scope.viewData[1].iscroll.refresh()
            $scope.viewData[1].iscroll.scrollToPage(0, $scope.viewData[1].selectedIndex)
          }, 300)
          $scope.month = parseInt(months[$scope.viewData[1].selectedIndex]) - 1
        }
        function updateDays() {
          let days = [...new Array(31).keys()].map(item => {
            const curTime = new Date($scope.year, $scope.month, item + 1, 0, 0, 0)
            if (curTime.getMonth() !== $scope.month) return

            const startTimeArr = splitDate(dateRange[0]).slice(0, 3).concat(0, 0, 0)
            const endTimeArr = splitDate(dateRange[1]).slice(0, 3).concat(0, 0, 0)
            if (curTime >= new Date(...startTimeArr) && curTime <= new Date(...endTimeArr)) {
              return String(item + 1).padStart(2, '0')
            }
          })
          days = days.filter(item => item)
          // if (!days.length) debugger
          $scope.viewData[2].data = ['', '', ''].concat(days).concat(['', '', ''])
          $scope.viewData[2].selectedIndex = days.findIndex(item => (item === String(day).padStart(2, '0')))
          $scope.viewData[2].selectedIndex = !~$scope.viewData[2].selectedIndex ? 0 : $scope.viewData[2].selectedIndex
          $scope.viewData[2].isShow = $scope.dateEnabled
          $scope.viewData[2].iscroll && setTimeout(_ => {
            $scope.viewData[2].iscroll.refresh()
            $scope.viewData[2].iscroll.scrollToPage(0, $scope.viewData[2].selectedIndex)
          }, 300)
          $scope.day = parseInt(days[$scope.viewData[2].selectedIndex])
        }
        function updateHours() {
          let hours = [...new Array(24).keys()].map(item => {
            const curTime = new Date($scope.year, $scope.month, $scope.day, item, 0, 0)
            const startTimeArr = splitDate(dateRange[0]).slice(0, 4).concat(0, 0)
            const endTimeArr = splitDate(dateRange[1]).slice(0, 4).concat(0, 0)
            if (curTime >= new Date(...startTimeArr) && curTime <= new Date(...endTimeArr)) {
              return String(item).padStart(2, '0')
            }
          })
          hours = hours.filter(item => item)
          // if (!hours.length) debugger
          $scope.viewData[3].data = ['', '', ''].concat(hours).concat(['', '', ''])
          $scope.viewData[3].selectedIndex = hours.findIndex(item => (item === String(hour).padStart(2, '0')))
          $scope.viewData[3].selectedIndex = !~$scope.viewData[3].selectedIndex ? 0 : $scope.viewData[3].selectedIndex
          $scope.viewData[3].isShow = $scope.timeEnabled
          $scope.viewData[3].iscroll && setTimeout(_ => {
            $scope.viewData[3].iscroll.refresh()
            $scope.viewData[3].iscroll.scrollToPage(0, $scope.viewData[3].selectedIndex)
          }, 300)
          $scope.hour = parseInt(hours[$scope.viewData[3].selectedIndex])
        }
        function updateMinutes() {
          let minutes = [...new Array(60).keys()].map(item => {
            const curTime = new Date($scope.year, $scope.month, $scope.day, $scope.hour, item, 0)
            const startTimeArr = splitDate(dateRange[0]).slice(0, 5).concat(0)
            const endTimeArr = splitDate(dateRange[1]).slice(0, 5).concat(0)
            if (curTime >= new Date(...startTimeArr) && curTime <= new Date(...endTimeArr)) {
              return String(item).padStart(2, '0')
            }
          })
          minutes = minutes.filter(item => item)
          // if (!minutes.length) debugger
          $scope.viewData[4].data = ['', '', ''].concat(minutes).concat(['', '', ''])
          $scope.viewData[4].selectedIndex = minutes.findIndex(item => (item === String(minute).padStart(2, '0')))
          $scope.viewData[4].selectedIndex = !~$scope.viewData[4].selectedIndex ? 0 : $scope.viewData[4].selectedIndex
          $scope.viewData[4].isShow = $scope.timeEnabled
          $scope.viewData[4].iscroll && setTimeout(_ => {
            $scope.viewData[4].iscroll.refresh()
            $scope.viewData[4].iscroll.scrollToPage(0, $scope.viewData[4].selectedIndex)
          }, 300)
          $scope.minute = parseInt(minutes[$scope.viewData[4].selectedIndex])
        }
        function updateSeconds() {
          let seconds = [...new Array(60).keys()].map(item => {
            const curTime = new Date($scope.year, $scope.month, $scope.day, $scope.hour, $scope.minute, item)
            const startTimeArr = splitDate(dateRange[0]).slice(0, 6)
            const endTimeArr = splitDate(dateRange[1]).slice(0, 6)
            if (curTime >= new Date(...startTimeArr) && curTime <= new Date(...endTimeArr)) {
              return String(item).padStart(2, '0')
            }
          })
          seconds = seconds.filter(item => item)
          // if (!seconds.length) debugger
          $scope.viewData[5].data = ['', '', ''].concat(seconds).concat(['', '', ''])
          $scope.viewData[5].selectedIndex = seconds.findIndex(item => (item === String(second).padStart(2, '0')))
          $scope.viewData[5].selectedIndex = !~$scope.viewData[5].selectedIndex ? 0 : $scope.viewData[5].selectedIndex
          $scope.viewData[5].isShow = $scope.timeEnabled
          $scope.viewData[5].iscroll && setTimeout(_ => {
            $scope.viewData[5].iscroll.refresh()
            $scope.viewData[5].iscroll.scrollToPage(0, $scope.viewData[5].selectedIndex)
          }, 300)
          $scope.second = parseInt(seconds[$scope.viewData[5].selectedIndex])
        }
        const updateFunList = [updateYears, updateMonths, updateDays, updateHours, updateMinutes, updateSeconds]
        const startIndex = preDateArray.findIndex((item, index) => (item && item !== dateArray[index]))
        updateFunList.slice(startIndex < 0 ? 0 : startIndex).forEach(fun => fun())
        preDateArray = dateArray
      }

      $scope.processModel = function() {
        // 初始化日期数据
        let date = $scope.modelDate
        date = $scope.modelDate instanceof Date ? $scope.modelDate : new Date($scope.modelDate)
        if (isNaN(date)) date = new Date()
        $scope.modelDate = date

        // 初始化校验数据（年份由于过多，限制是当前时间 +- 10，不做无限滚动）
        $scope.dateRange = $scope.dateRange || []
        if (typeof ($scope.dateRange) === 'string') $scope.dateRange = $scope.dateRange.split(',').map(item => (new Date(item)))
        $scope.dateRange[0] = $scope.dateRange[0] || undefined
        $scope.dateRange[1] = $scope.dateRange[1] || undefined
        $scope.dateRange = getTimeIntersection($scope.dateRange, [addYears(date, -10), addYears(date, 10)])

        generateViewData($scope.modelDate)
      }

      $scope.showPopup = function() {
        dateTimePicker = $ionicPopup.show({
          template,
          scope: $scope,
          cssClass: 'datetime-picker-popup',
        })
        afterDomLoad('.picker-slot').then(domList => {
          console.log('afterDomLoad - viewData', $scope.viewData)
          $scope.viewData.forEach((item, index) => {
            item.el = domList[index]

            let timer = null
            const onTouchAnimationEnd = function(e) {
              console.log('onTouchEnd')
              if (this.animating) {
                timer && clearTimeout(timer)
                timer = setTimeout(_ => {
                  onTouchAnimationEnd.call(this, e)
                }, 500)
                return
              }

              console.log('onTouchAnimationEnd', this, e)
              const yIndex = this.pagesY.findIndex(y => (y === this.y)) + 3
              // if (yIndex === -1) debugger
              let newValue = item.data[yIndex]
              newValue = parseInt(newValue || item.data[3])

              const newDateArr = [$scope.year, $scope.month, $scope.day, $scope.hour, $scope.minute, $scope.second]
              newDateArr[index] = newValue
              if (index === 1) {
                newDateArr[index]--
                new Date(...newDateArr).getMonth() !== newDateArr[index] && (newDateArr[index + 1] = 1)
              }
              generateViewData(new Date(...newDateArr))
              $scope.$apply()
            }
            item.iscroll = new IScroll(item.el, {
              hScrollbar: false,
              vScrollbar: false,
              zoom: false,
              momentum: false,
              snap: '.picker-item',
              y: -item.selectedIndex * $scope.itemHeight,
              onTouchEnd: onTouchAnimationEnd
            })
          })
        })
      }

      $scope.cancel = function() {
        dateTimePicker.close()
      }
      $scope.confirm = function() {
        dateTimePicker.close()
        $scope.commit()
      }
    }],
    link: function($scope, $element, $attrs, ngModelCtrl) {
      $scope.dateEnabled = $attrs.type === 'date'
      $scope.timeEnabled = $attrs.type === 'time'
      if (!$scope.dateEnabled && !$scope.timeEnabled) {
        $scope.dateEnabled = $scope.timeEnabled = true
      }

      ngModelCtrl.$render = function() {
        $scope.modelDate = ngModelCtrl.$viewValue
        $scope.processModel()
      }

      $scope.commit = function() {
        $scope.modelDate = new Date($scope.year, $scope.month, $scope.day, $scope.hour, $scope.minute, $scope.second)
        ngModelCtrl.$setViewValue($scope.modelDate)
      }

      $element.on('click', $scope.showPopup)
    }
  }
}]

弹窗组件

/*
* 点击遮罩关闭处理函数
* @param popup  弹窗对象
* @param maskClose  是否开启点击遮罩关闭弹窗
* @param e  点击事件
*/
function closePopup(popup, maskClose, e) {
  if (!maskClose) return

  if (
    ~['html', 'body'].indexOf(e.target.tagName.toLowerCase()) ||
    e.target.classList.contains('popup-container')
  ) {
    popup.close()
  }
}

// http://www.ionic.wang/js_doc-index-id-52.html
module.exports = function () {
  return {
    $get: ['$ionicPopup', 'i18n', function ($ionicPopup, i18n) {
      /*
      * 弹出提示窗口
      * @param content  内容
      * @param title  标题
      * @param options  配置项
      */
      function alert(content, title, options) {
        if (arguments.length === 2 && typeof title === 'object') {
          options = title
          options.template = content
        } else if (arguments.length === 1 && typeof content === 'object') {
          options = content
        } else {
          options = typeof options === 'object' ? options : {}
          options.title = title
          options.template = content
        }
        Object.keys(options).forEach(key => (options[key] === undefined && delete options[key]))
        const params = {
          title: i18n.t('TIPS.SYSTEM_MESSAGE'),
          okText: i18n.t('OP.YES'),
          okType: 'button-positive',
          ...options
        }
        const alertPopup = $ionicPopup.alert(params)
        const handleClose = closePopup.bind(null, alertPopup, options.maskClose)
        document.addEventListener('click', handleClose, false)
        return alertPopup.then(res => {
          document.removeEventListener('click', handleClose, false)
          return res
        })
      }

      /*
      * 弹出确认提示窗口
      * @param content  内容
      * @param title  标题
      * @param options  配置项
      */
      function confirm(content, title, options) {
        if (arguments.length === 2 && typeof title === 'object') {
          options = title
          options.template = content
        } else if (arguments.length === 1 && typeof content === 'object') {
          options = content
        } else {
          options = typeof options === 'object' ? options : {}
          options.title = title
          options.template = content
        }
        Object.keys(options).forEach(key => (options[key] === undefined && delete options[key]))
        const params = {
          title: i18n.t('TIPS.SYSTEM_MESSAGE'),
          okText: i18n.t('OP.CONFIRM'),
          cancelText: i18n.t('OP.CANCEL'),
          okType: 'button-default',
          cancelType: 'button-positive',
          ...options
        }
        if (options.reverseBtnOrder) [params.okText, params.cancelText] = [params.cancelText, params.okText]
        if (options.highlightCancel) [params.okType, params.cancelType] = [params.cancelType, params.okType]

        const confirmPopup = $ionicPopup.confirm(params)
        const handleClose = closePopup.bind(null, confirmPopup, options.maskClose)
        document.addEventListener('click', handleClose, false)
        return confirmPopup.then(res => {
          document.removeEventListener('click', handleClose, false)
          return res
        })
      }

      return {
        alert,
        confirm
      }
    }]
  }
}

ionic引起问题处理

鼠标滚轮滚动列表不流畅问题

复现场景：列表DOM层次超过10

// REQ-11064，需求5
// ionic (https://cdn.bootcdn.net/ajax/libs/ionic/1.3.2/js/ionic.js) 5444 行判断元素是否在滚动的下面使用该方法，但是默认的判断层数（10）对于html层次过多的情况不适用，这里加多一些层次
window.ionic.DomUtil.getParentOrSelfWithClass = function(e, className, depth) {
    depth = depth || 20
    while (e && depth--) {
        if (e.classList && e.classList.contains(className)) {
            return e
        }
        e = e.parentNode
    }
    return null
}

事实上，我认为如果不支持touch事件的设备，直接默认设置用系统滚动即可。因为pc设备很少有人会想到用移动端的拖放去显示。但是这和ionic完全模拟移动端的设想又冲突了。

滚动太过灵敏问题

// LKFBK-2005 (https://cdn.bootcdn.net/ajax/libs/ionic/1.3.2/js/ionic.js 1710行)
// 默认是10，也就是按下到松开手指的位移距离不超过10px就会认定为是点击
window.ionic.Gestures.gestures.Tap.defaults.tap_max_distance = 5

内嵌webview无法上传文件

复现场景：actionsheet里面通过动态创建input[type=file]，然后input.click()来触发文件选择

如何让第二次在第三次之后触发有2个考虑，但是试了都不行

// input.click() 用下面方式代替
ionic.trigger('click', {target: input})

// 使用setTimeout
setTimeout(_ => input.click())

// CMFBK-17799、CIM-26409、CIM-27171
/*
          * 1. 无法弹窗选择文件对话框，问题在于ionic(https://cdn.bootcdn.net/ajax/libs/ionic/1.3.2/js/ionic.js) 2948行 tapClickGateKeeper
          * 2. 点击按钮后，tapClickGateKeeper触发了3次。第一次是button的tapClick，isIonicTap=true，不阻止默认行为。
          * 第二次是代码中input[type=file]的click，isIonicTap=false但是requireNativeClick=true，不阻止默认行为。
          * 第三次是button的click，isIonicTap=false，阻止默认行为。
          * 这里正常情况只有第一次和第三次的触发，第一次会执行我们绑定的方法，第二次由于没有任何绑定到原生click的行为，就没有影响。
          * 3. 这里造成上传失效的原因是第三次触发被阻止了默认行为，这个原理暂未得知，如果清楚可以记录下到这里。
          * 4. 综上所述，解决方法还可以是让第二次的点击事件在第三次之后触发（暂未考证）或者给触发点击的元素成为requireNativeClick的元素(这里使用的方法)。
          * 5. 对于这类问题，暂未有啥好的解决方法，ioinc do not allow through any click events that were not created by ionic.tap（http://git.mailtech.cn/fe-components/ionic-v1/-/commit/d0047cda446adf1f30e55b056e83bb31ac5c6061），
          * 可以放开不是ionic.tap触发的点击事件，但是更改第三方库逻辑可能导致第三方库运行出现未能预期的情况，特别是这种整体的处理，因此这里先临时处理。
*/
document.body.querySelector('p').type = 'file'

ionic滑动动画和ios的滑动动画冲突

最直接的就是放弃ios下的滑动动画，因为无法完美解决。但是方法1是我认为可以接受的近乎完美方案。

方法1：

参考：
https://github.com/RedTeapot/Viewjs/issues/4
https://doc.view-js.com/main.-shi-tu-qie-huan-dong-hua

1. 滑动返回/前进动画，是safari自带的特性，无法禁止；
2. 浏览器执行的前进或后退，无法区分是通过滑动手势触发的，还是通过点击底部按钮触发的；
   开发者可通过区分 “由应用驱动的切换” 和 “由浏览器驱动的切换”，在“切换动作由浏览器驱动”场景下不呈现动画，而在“切换动作由应用驱动”的场景下呈现动画。

app.run(['$state', '$ionicHistory', '$rootScope', '$ionicViewSwitcher', function($state, $ionicHistory, $rootScope, $ionicViewSwitcher) {
  // 手动设置切换页面动画规则
  const setSwitchAnimationRule = function(toState, toParams, fromState, fromParams) {
      if (fromState.name === 'detail' && toState.name === 'index') {
          return $ionicViewSwitcher.nextDirection(['back'])
      }
      
      if (fromState.name === 'index' && toState.name === 'detail') {
          return $ionicViewSwitcher.nextDirection(['forward'])
      }

        
      $ionicViewSwitcher.nextDirection(['none'])
  }

  // 视图切换触发器：浏览器(navigator) 应用程序(app)
  let SWITCHTRIGGER = 'navigator'

  // 由于无法判断用户是通过浏览器触发的，因此只能给客户端触发添加标记
  const setSwitchTrigger = function() {
    const originFn = {
      stateGo: $state.go,
      ionicHistoryGoBack: $ionicHistory.goBack,
      history: {
        go: history.go,
        back: history.back,
        forward: history.forward
      }
    }
    $state.go = function() {
      SWITCHTRIGGER = 'app'
      originFn.stateGo.apply($state, [...arguments])
    }
    $ionicHistory.goBack = function() {
      SWITCHTRIGGER = 'app'
      originFn.ionicHistoryGoBack.apply($ionicHistory, [...arguments])
    }
    angular.forEach(Object.keys(originFn.history), item => {
      history[item] = function() {
        SWITCHTRIGGER = 'app'
        originFn.history[item].apply(history, [...arguments])
      }
    })
  }

  setSwitchTrigger()

  $rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
    if (SWITCHTRIGGER === 'navigator') {
      // 禁止动画
      $ionicViewSwitcher.nextDirection(['none'])
    } else {
      // 展示动画
      setSwitchAnimationRule(toState, toParams, fromState, fromParams)
      SWITCHTRIGGER = 'navigator'
    }
  })
}])

方法2：

app.config(['$ionicConfigProvider', function ($ionicConfigProvider) {
    $ionicConfigProvider.views.swipeBackEnabled(false)
  }
])

iphone12 mini测试无效，但是的确有这个API，有待研究

IOS部分机型上下滑动卡顿

if (isIOS() && 'ontouchstart' in element) {
 element.bind('touchmove', function(e) {
     window.ionic.scroll.isScrolling && e.preventDefault()
 })
}

点击一次触发2次

问题出现机型：小米8系统浏览器，该设备其他浏览器正常

问题原因定位：见下图，触发了2种事件

问题复现demo: demo.rar （能在任意浏览器移动端复现)

解决办法：放弃使用alert或者做防抖处理

参考文献：

https://stackoverflow.com/questions/36271392/why-is-my-ng-click-event-firing-twice

Ionic.bundle.js causes ng-click event to fire multiple times

https://github.com/ionic-team/ionic-framework/issues/4345

最新发现情况2：ipad 2020 onTap触发2次

<div id="someId123" style="width: 300px;height: 300px;background: red;color: white;"></div>
<script>
    // tap点击一次触发2次问题(https://cdn.bootcdn.net/ajax/libs/ionic/1.3.2/js/ionic.js 967行)
    // ionic.Gestures.NO_MOUSEEVENTS = ionic.Gestures.HAS_TOUCHEVENTS
    console.log(window.navigator.userAgent)
    console.log('onmousedown' in window)  // true
    console.log('ontouchstart' in window)  // true
    window.ionic.onGesture('tap', function(ev) {
        console.log('ev', ev)
    }, document.getElementById('someId123'));
</script>

造成原因是ipad 2020同时支持mouse事件和touch事件，ionic的mousedown和touchstart都会对应到点击事件，所以导致点击事件会触发2次。

ionic的逻辑是希望移动端不使用mouse相关事件，但是检查的时候用的正则无法满足ipad2020所以造成该问题，事实上，既然存在touch事件，完全没有必要去检查ua判断是否移动端，直接用touch去模拟点击即可，这里有点理不清楚ionic的逻辑，故先如此处理

ionic.Gestures.MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android|silk/i;
ionic.Gestures.NO_MOUSEEVENTS = ionic.Gestures.HAS_TOUCHEVENTS && window.navigator.userAgent.match(ionic.Gestures.MOBILE_REGEX);

overflow-scroll问题

在 ion-scroll 指令中，overflow-scroll=”true” 无法缩放， overflow-scroll=”false” 则使得css的overflow:auto失效，无法通过touchmove滚动。

解决方法：设置overflow-scroll=”false”，然后控制器执行下面代码：

/*
<ion-scroll delegate-handle="smallscroll" style="height: 100px;">
    <button ng-click="scrollSmallToTop()">
        Scroll small area to top!
    </button>
</ion-scroll>
*/

$ionicScrollDelegate.$getByHandle('smallscroll').getScrollView().options.preventDefault = false

$ionicScrollDelegate

HTML content overflow when using innerHTML in IONIC

PS: 虽然这里可以这样子处理，但是感觉ionic底层是不推荐这样子的，因为默认行为被放开，可能无法阻止ios的捏合缩放手势，是否会有其他问题待验证。捏合手势目前先用下面方式处理，可能有兼容问题。

// Safari 9+支持, 处理IOS10 meta无法禁止缩放问题
// https://stackoverflow.com/questions/41696420/how-to-disable-zoom-on-mobile-website-for-ios-devices-using-metatag
window.ionic.on('gesturestart', event => event.preventDefault())

键盘弹出导致的页面不可见问题

暂时没有啥好的解决办法，只能禁用ionic的键盘调整

// Disabling Ionic's keyboard adjustments.
const interval = setInterval(_ => {
  if (window.ionic.keyboard.isInitialized) {
    window.ionic.keyboard.disable()
    clearInterval(interval)
  }
}, 1000)

shadowDOM无法点击问题

由于ionic顶层捕获所有的click事件，检查不符合条件的ionic就阻止冒泡导致其上的点击事件失效（即ionic只托管自己的点击，其他都阻止）

window.ionic.tap.requiresNativeClick = function(ele) {
  if (window.ionic.Platform.isWindowsPhone() && (ele.tagName == 'A' || ele.tagName == 'BUTTON' || ele.hasAttribute('ng-click') || (ele.tagName == 'INPUT' && (ele.type == 'button' || ele.type == 'submit')))) {
    return true // Windows Phone edge case, prevent ng-click (and similar) events from firing twice on this platform
  }
  if (!ele || ele.disabled || (/^(file|range)$/i).test(ele.type) || (/^(object|video)$/i).test(ele.tagName) || window.ionic.tap.isLabelContainingFileInput(ele)) {
    return true
  }
  // changed start
  if (ele.shadowRoot) {
    return true
  }
  // changed end
  return window.ionic.tap.isElementTapDisabled(ele)
}

ion-content无 has-footer/has-header 问题

<ion-header-bar class="bar-positive">
    <h1 class="title">Contacts</h1>
    <div class="buttons">
        <button class="button button-icon ion-compose" ng-click="modal.show()">
        </button>
    </div>
</ion-header-bar>
<ion-content padding="true" start-y="120">
    <ol class="messages">
        <li ng-repeat="message in messages" ng-bind-html="message.content"></li>
    </ol>
</ion-content>
<ion-footer-bar class="bar-frosted">
    <button class="button button-clear button-positive" ng-click="add()">Add Message</button>
</ion-footer-bar>

上面的 ion-content 会根据是否显示 ion-header-bar 和 ion-footer-bar 自动添加 has-header 和 has-footer 类。

当 ion-footer-bar 默认是隐藏的时候(ng-hide)，也会导致ion-content不带 has-footer.

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/58a5b361.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！