# ✍️述 - 踩坑

微信公众号开发「小程序开发」，位于微信的环境中加上其他问题「设备兼容性等」，会有很多" 坑👿"

/**
* iOS兼容性问题
*/
- #1 点击无效问题
- #2 键盘导致定位偏移导致弹出框按钮点击失效

# 📖#1

公众号开发过程中，遇到了在iOS环境下部分页面不可点击「点击无效」，遂查之。

# “iOS click 300ms的延迟会造成这种现象”「可能性最大」🌿

笔者使用的UI框架是AUI，自身提供的tapMode用来消除300ms的延时问题，不过由于

框架问题「或许是自身理解能力不够😓」，无法通过该方法进行消除，转而寻找其他替代方案。

# - 方案1 cursor: pointer;

# - 方案2 Zepto touch.js source-link

🚀方案一可以解决部分开发者遇到的不可点击问题，不过目前看来不适用于我。

🚀方案二可以解决目前的问题「当前项目中的具体应用撇开不谈，只谈核心解决方法」

/**
* 将之前click的处理方法替换为tap，手动添加事件监听
*/

$('your_target').on('tap', function (e) {
    // your original code { click event process}
})

#1-尾注

Zepto touch.js还有许多适用于移动端的tap处理例如longTap, doubleTao, swipeLeft ...,使用这个插件可以做一些额外的手势👍处理，当然，如果你需要的话。

# 📖#2

在iOS环境下，使用AUI框架做出的form表单，input会在键盘弹出后自动上移到键盘上方，确保在用户的视野中。

问题来了：由于这种动态的调整位置，导致最后一个input在失去焦点后，整个页面的位置没有归位，导致框架自身的 dialog弹出后点击失效

这种情况第一次见，排查后bug-100%复现。📖解决方案如下:

/**
* 🚀1. 焦点框失去焦点后进行”归位“
* 🚀2. 弹出框弹出前进行“归位”
*/

$('your_target').on('blur', function () {
	document.body.scrollTop = 0;
	document.documentElement.scrollTop = 0;
})

// or

document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;

dialog - go // 弹出框操作

# 📖#3

手机环境：iOS9.3.2 | iPhone6s Plus | Wechat 7.0.3, 出现页面无法点击的问题。

采用**折半「二分法」，穷举「一行一行」**调试后，得到bug代码段如下：

var handleBannerClick = async () => {
	// executor
	...
	var result = await getOrderState()
	...
}

原因：

# 由于手机当前的iOS版本较低，导致微信使用的safari内核对于js的support不是100%

解决方案🚀：

直接使用babel在线编译，将es6 -> es5,然后将async promise等改写为普通的callback

另：polyfill应该也是可行的